Image file sizes – best practices?

  • Apologies if this is not the best place to post this, and if so, where is a better forum? Thx.

    I need some advice about image file sizes.

    I have a new client who currently has a large, custom-made, rather complex WordPress site. It contains mountains of eye candy using huge file sizes — e.g. near or over 3MB for each of 3 background images for the same page! The parallax effect when scrolling is impressive, but wow it is very slow to load especially on mobile.

    She recently commissioned some new images from a company that went out of business, so she needs someone else to install and set up this new visual theme for her. In the zip file she sent me, there are separate images intended for desktop, tablet and mobile, but even for mobile the images I see are all huge too – up to 2.7 MB for a background alone. I can’t quite tell if a parallax effect was intended with these images; possibly (hopefully) not.

    Is this becoming standard now, where it’s common (and considered good practice) to use huge file sizes of a half-MB or larger on a regular basis?

    Her current WordPress installation automatically creates several smaller file-dimension versions when uploaded through Media manager, but as near as I can tell from looking at page code (using browser developer resources), those smaller files aren’t used — that is, they don’t appear in the code for the image source — only the original, huge file. Or are the smaller files substituted automatically, just not showing in the browser View Source?

    I’m really puzzled about how to work effectively with image file sizes, and having seen two different developers having used huge file sizes, I’m wondering what I’m missing in understanding how best to manage image file sizes.

    Thanks in advance for the help.

Viewing 2 replies - 1 through 2 (of 2 total)

  • When in doubt, I run a speed test (Pingdom has one) and then pay very close attention to the waterfall. You can see which items are actually the big holdup. Sometimes it’s not just images that are slowing down a website, but issues with other files.

    3 images of 3MB each is excessively large.

    I try to avoid large images over 1MB, but that’s just my preference, based on my user set. If you set up browser caching in .htaccess correctly, you can reduce page loads when users click on other links. Loading the first page will still be slow, however. (See this if you need more information.)

    Here’s a lot of good advice from Google, with plenty of TL;DRs.

    https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

    Thread Starter Evolvingdoor

    (@evolvingdoor)

    Thank you so much for your reply. 1MB, wow I get nervous if an image gets into 3 digits. I guess maybe that might have been a concern several years ago but not today. But thank you for confirming that so much weight for just the background is overboard. I’ll have a look at the links for more about this. Many thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image file sizes – best practices?’ is closed to new replies.