Images are often the biggest area for improvement on any site. That’s because they’re some of the largest files we use, and we tend to oversize them, too.
For instance, if you load an image that’s 400-by-400px wide into a 200-by-200px wide area, the dimensions are twice as large as necessary. Then, because images are two-dimensional, the file size of that 400px image is actually four times as large as necessary.
Possible fixes
The obvious solution is to use a smaller image size… but it’s hard to (a) know what that image size is or (b) how to use that throughout your theme. Although we won’t get into how to use these different methods, the options are:
Use smaller images
If possible, reference a smaller image size. This is usually the easiest to achieve without a developer, but has its drawbacks:
- If you need larger images in the future, you may have to re-upload them.
- This solution usually doesn’t work well for retina devices, which wants images that are double the available space, in order to look crisp.
Set up srcset
Modern browsers and WordPress core support an HTML feature called “srcset”. This allows you to upload giant images that are served to readers at the best possible size for their device/screen size.
It’s an awesome, powerful feature that’s also very complicated to implement in themes. We support this in our custom themes, but most other developers and pre-made themes do not or can not at this point.
Note that the WordPress 5.0 editor is currently experiencing some limited issues with srcset support (as of January 2019) and may lead to warnings/lower scores on those specific posts.
Lazy load
Although not a true fix to this problem, lazy loading images will improve these warnings and your overall load time, because it limits the number of (but not size of) images that are immediately referenced on the page.
Technically, lazy loading masks this problem and may lead to slowly-loading images as the user scrolls. Generally, as long as your images aren’t giant, this can be a good compromise to avoid dealing with either of the above options.
Next steps
Regenerate thumbnails
If you resize images or use srcset, you’ll likely need to regenerate images. Our plugin of choice is:
Compress images
After regenerating images, compress all images to further decrease their file size. Our plugin of choice is:
More information
Have a question? Images are easily one of the most complex topics to understand and discuss when it comes to site speed. We’ve attempted to simply the topic here. If you have specific questions, though, please email them to us!