Image size vs. Image Display size

98
79.2K followers
Updated

I hate to belabor a point but, I wanted to point out the difference between size of an image which is actually the file size and its the size of the image that is displayed.

The displayed size can change, you can have a nice large picture uploaded to your site and make it look very small on the site, and that works well. The problem with that is that WordPress is still loading the full sized image and just shrinking it for the display. The image is still large, it still takes a large amount of resources to display that small image.

In most cases, the maximum width of the website will be no more than 1000 pixels, so uploading an image that is 4000 pixels wide just doesn't make sense. There are many programs that will optimize images for the web. Photoshop has a button that will do this. Gimp will also do this with an ad on. Gimp is free and is very similar to Photoshop but you will need to perform some gyrations to get it to have all the features that Photoshop has. Canva will also save an image that is optimized for the web.

Basically what optimized for the web means is that the software you're using will shrink the file size down so that it will display well on your website and not take up all the resources that are needed to display a big picture. "Big file size".

Let me illustrate what I'm talking about. If I open Unsplash and save one of their images.

This image is 2800 wide by 1508 pixels high. It has very nice resolution and is a very nice picture. The file size is 1.56 MB. the display size has been reduced fit this post.

If I pull this picture into GIMP and create an image that was 1080 x 582. This is what it looks like now. The display size is the same but the file size is different.

I can't see a difference in the resolution and/or quality of that picture. It still displayed very similarly to the one above it. However, it is sized smaller. The file size is 297 kB. Even that is a little larger than I like to see when I uploaded to my website. The file size of the first picture is five times larger than the other.

Now translate this to a website that has between one and five pictures on every blog post multiplied by the number of blog posts you have on your site, and you can see that you fill up your website quota very quickly. Each of those images takes roughly 5 times longer to load is well. What this means is that if you are not optimizing your image size you are slowing down your website by a considerable amount of time.

You have a maximum of six seconds to make an impression with your website. If your website doesn't load for 5 1/2 seconds of that, how much of an impression will you actually make?

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

85

ok, now how do I add video to my site? when I go to upload media it tells me I exceed 8 limit even tho only using mp4 versions. Tried adding youtube url, works- but display can't be reduced and after video completes I'm left with a screen full of thumbnails for other videos that aren't mine and I don't like that either.

Upload the videos to YouTube, you can adjust the settings of the video in Youtube to not play additional videos. You can also remove the play controls and sharing if you like. YouTube has some limitations but if you find they are too much, pop over to Vimeo to host your videos and embed from there.
Loading the MP4 file onto your site is not a good idea.

thanks again!

This is very helpful thanks.

welcome

Great information thank you for sharing.

You are welcome

Great information. Now I know why my website is loading so slow. Thank you.

This is one of the main reasons for slow loading.

I really needed to have this information. It was very useful for me.
Thanks Craig again for the info.
Linda

I have a full discussion of images in the Video Lab at OnlineLabGuy.com You might have seen it already.

Very informative Craig, and thanks for sharing. At my age my eyesight probably isn't the best but I think you'd have to be a professional photographer to notice the difference. And I doubt that the average visitor wouldn't care anyway. As long as the page loads quickly, the pictures look fine and the content is interesting to the reader, that's all that counts. Thanks again. Ken

Thanks Labman, good information.

can your theme reduce file size by using the edit media feature or must they be reduced before uploading?

i will check

Always before adding to media file!!!

Yes, always reduce the file before uploading to reduce the load on your website.

thank you

good point and good thing to know

Good point. You could easily go to 50 kB for the second picture and there would be no visible difference with the one of 1.5 MB. I keep them almost always below 100.

As do I, the point however was made.

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training