Optimizing website images is important for any web designer or web developer worth his/her salts. Keeping your website images optimized not only reduces the footprint of your website, but significantly improves pagespeed. A website with optimized images even makes the process for backups (or migrations) easier.
To better optimize images in your WordPress site, you must first understand 3 key components. 1.) The differences of JPG vs. PNG image formats, 2.) why you should resize image resolutions, and 3.) why you should be aware of file sizes. Make sure you understand the underlying reasoning for each component and be wary of over-optimizing (yes, image over-optimization is a real thing!)
Proper Image Formats:
- JPG/JPEG file types are most efficient for photos of real people or real objects. They are prone to corruption or “noise”, which becomes noticable when JPGs are heavily compressed or “over optimized,” which we will get to later. JPGs do not support transparency.
- PNG file types are best for graphic designs and artificial artwork, such as logos, icons, infographics, and so on. These are not prone to the same type of corruption as JPG images, but they are way less efficient when used for “organic” photos of people, places, or objects. PNGs allow transparency.
Proper Image Resizing:
- Recommended mininum background image dimensions are 1280x853 or 1280x720 depending on the aspect ratio. These numbers don’t have to be exact, but are more of a rule of thumb.
- Background images do not need to be bigger than 1920x1280 pixels, unless a huge portion of your customers use 4K displays (and if your website is actually built around using such a large screen).
- Images that take up 50% screen width (i.e. a product page photo sitting on one side) or less should not be wider than 640px.
Proper File Resizing:
- Don’t ever upload a huge raw or DSLR quality image and then use WordPress or CSS to shrink it down to fit. Doing so is a bandaid, and the huge image is still being loaded to the visitor’s computer. Not only that, but their browser now has to work even harder to resize that image on the spot.
- Tools like TinyPNG, EWWW Image Optimizer, and WP Smush strike the best balance between file size & image quality, by removing junk data, metadata, and extra color data from image files.
- Ideal file sizes for a 1920x1280 background image should be <500KB.
- A 1280x853 background image should be 90-250KB.
- These are ballpark estimates, but if you have a medium-sized product photo that takes up 800KB of space for example, you’re doing something wrong and need to take a second look.
- For pagespeed purposes, you should never use an image >1MB on a web page. Otherwise, you’re just adding extra time for the page to load.
Dangers of Over-Optimizing:
- Yes, over-optimization (overzealous compression) should be avoided, or your images will look like dog excrement.
- EWWW and TinyPNG offer “lossless” optimization at their default modes, preventing this from happening. 99.9% of the time, lossless optimizing makes a hugely positive difference in file size/pagespeed, without the human eye being able to tell the difference.
- Don’t tweak image compression settings unless you know what they do (& also know what you’re doing).
- Google Pagespeed Insights offers “optimized resources” at the bottom of their test pages that are often ruined due to over-optimizing. Take Google’s (or any other page speed tester) image recommendations with plenty of salt.