How to Optimize Images for Web and Performance
Optimizing your website images is an important step for any designer, website owner, or webmaster. Keeping your website images optimized not only reduces the overall footprint of your website, it may significantly improve pagespeed and even make backups (or migrations) easier to complete. To better optimize your WordPress site images, you must first understand the differences of JPG vs. PNG image formats, why you should resize images, and why you should check file sizes. Make sure you understand the underlying logic for each component and be wary of over-optimizing (yes, image over-optimization is a thing unfortunately!)
Proper Image Formats:
- JPG/JPEG file types are best for photos of real people or real objects. They are prone to corruption or “noise” which becomes apparent when JPGs are “over optimized,” which we will get to later. JPGs do not support transparency.
- PNG file types are best for graphics and artificially designed artwork, such as logos, icons, infographics, etc. These are not prone to corruption the same way JPG images are, but they are way less efficient when used for “organic” photos of people, places, or objects. PNGs allow transparency.
Proper Image Resizing:
- Recommended 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 significant portion of your customers use 4K displays (and if your website is actually built to support such a large screen).
- On page images that take up 50% screen width (i.e. a product photo sitting in one column) or less should not be wider than 640px.
Proper File Resizing:
- Don’t ever upload a huge raw or DSLR quality image and use WordPress or CSS to shrink it down to fit. The huge image is still being loaded, and either WordPress or the visitor’s browser has to work harder to resize the image right there on the spot.
- Tools like TinyPNG, EWWW Image Optimizer, and WP Smush strike the best balance between file size and 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.
- For pagespeed purposes, you should never place an image more than 1MB on a web page. After all, you’re just adding more time for the page to load.
Dangers of Over-Optimizing:
- Yes, over-optimization (overzealous compression) should be avoided or you risk ruining your images.
- Tools like EWWW offer “lossless” optimization with their default modes, preventing this from happening. Lossless optimizing makes a huge difference in file size/pagespeed, and is sufficient 99.9% of the time.
- Don’t tweak compression settings unless you know what they do and you have a backup of the original photo.
- Google’s Pagespeed Insights offers “optimized resources” at the bottom of the test page which are often not suitable. Always take your pagespeed tester’s recommendations with plenty of salt.