Pagespeed Says My Images Need More Work

So, you’ve run the EWWW Image Optimizer on all your images (or another IO plugin) and Pagespeed Insights (or GTMetrix, WebPageTest, etc.) still says you need to do more with your images? What do you do next?

To be clear, our ExactDN and Easy Image Optimizer services are intended to solve the major image optimization problems recognized by most speed testing sites:

  • Compress your images
  • Properly scale/size your images
  • Defer off-screen images (lazy load)
  • Use next-gen image formats (like WebP)

If you're using either of those services, and still getting any of these recommendations, we've summarized the important bits for ExactDN and Easy Image Optimizer in separate articles.

PageSpeed Insights (PSI) Moves to Lossy Compression

First of all, you need to be aware of one very important thing with PageSpeed Insights (PSI): it uses lossy compression instead of lossless. That means PSI has reduced the quality of your images in order to achieve the results they are recommending. Instead of lossless compression, PSI uses the freely available ImageMagick utility at quality 85 to compress images. I've written a  very long, and detailed explanation of what that change means for you. In short, it means that if you want to meet or exceed the PSI recommendations, you should use the Premium Plus setting in EWWW IO, but you might still get a few false-positives when/if you retest your page on PSI. You should certainly expect to see fewer images listed, because EWWW IO out-performs PSI on average. However, since PSI uses lossy compression, and the compression methods of EWWW IO and PSI are vastly different, the PSI results on re-testing may not be 100% accurate.

Yes, Premium compression requires an  API key, but you still have a choice to make here. Is lossy compression right for your site, or do you need pixel perfect optimization? For most sites, lossy compression will be a nice boost to your speed, and the quality loss is less than noticeable. If you don't make money with your site, or you need pixel-perfection, then stick with lossless compression. You'll still get a faster site, even if the change isn't as dramatic. In either case, is a good site for testing your results, as they do use lossless compression, and so their test is less prone to false-positives.

Images from your Media Library can be reduced by lossless compression

While PageSpeed has changed their wording to indicate images are not "efficiently encoded" and now uses lossy compression testing, GTmetrix still recommends lossless compression. If you already optimized your images once, the most likely culprit is image metadata. To fix this, make sure you enable the ‘Remove metadata’ option in EWWW I.O. All the page testing tools expect metadata to be stripped. This will not have a negative impact on SEO, search engines don’t care about metadata, because normal people can’t see it anyway. It is much more important to make sure you have ‘alt’ and ‘title’ tags on your images. The metadata we’re talking about is excess data embedded in the actual image file itself. This is different than the WordPress metadata stored in the database which contains information about available resizes, mime-type, as well as a copy of some of the useful information from the actual image metadata.

Images somewhere else can be reduced by (lossless) compression

If Pagespeed is flagging images that are not part of your Media Library, such as on-demand resources created by another plugin/theme, you can add the full path to the folder where the images are stored to the EWWW I.O. Settings. The “Folders to Optimize” setting is on the advanced tab, and requires the absolute path, not the path relative to your WordPress install. The auto-detected path to your WordPress install is listed directly above this setting for your reference. If it doesn’t save the setting, then you didn’t enter the path correctly. If you need help with that, contact us.
Once you’ve saved the extra Folders to Optimize, you should visit the Bulk Optimize page under Media Library, and run a Scan & Optimize. Once that has completed, you can turn on the Scheduled Optimization setting. However, you should only enable Scheduled Optimization if new images in the Folders to Optimize are not being optimized on creation. You can view all the images the plugin has optimized on the EWWW IO Tools page, by clicking Show Optimized Images. This will help you to verify if the new images are being optimized automatically or not. And of course, if you still are not sure whether those images are being auto-optimized, give us a holler.

Images need to be properly sized (or scaled)

This basically means your images are too large for where they are being displayed. It is also one of the harder problems to fix, which is why I created our ExactDN service. ExactDN will solve most image resizing problems and also features a lightning-fast CDN (Content Distribution Network) that will make sure your images are delivered as fast as possible. Additionally, EWWW IO now has another option on the resizing tab that lets you highlight images that might need resizing (Resize Detection). Keep reading to learn more about how to investigate image resizing yourself, and some alternative solutions that might work for you...
The first thing you need to determine is what sizes are needed. For this, we use the built-in developer tools for Google Chrome and Firefox. Find the image that is causing the problems in your page, right-click, and then Inspect Element. Then you will need to look at the height and width attributes to determine at what size the browser is displaying the image. There are some images that will be displayed by javascript, and it can be difficult to find the actual size. If you hover over the actual image filename in either Firebug or Chrome’s Developer Console, you will see the dimensions displayed (see the video below).
Once you know how large the browser thinks the image should be, you need to find a way to make your images the right size. If these are images from your Media Library, you may be able to fix them with the Simple Image Sizes plugin. This lets you generated the appropriate resized versions for plugins (or your theme) to display on your pages. Sometimes you can just use the built-in image editor to scale or crop your image to the expected size.

Defer off-screen images (lazy loading)

The EWWW Image Optimizer features one of the most comprehensive lazy loading features available, and you can enable it on the ExactDN tab. It's free to use, and doesn't technically require ExactDN, but it integrates with ExactDN to help solve image size/scaling problems.
If you have enabled our lazy loader, and still have problems, it is usually because of themes and page builders using background images into separate CSS blocks. If you that doesn't make sense to you, or you're still having trouble, get in contact with our support folks below.

Use next-gen image formats (like WebP)

Most browsers now support the WebP format, but it can be a little tricky to get working properly. We've documented various configurations and setups here.

This site recommends using lossy compression at level 50. My gut reaction to that is ewww (pun intended). Level 50 is going to look like crap, unless you’re half-blind. The good news is that you can have the best of both worlds. You can achieve dramatic results (often beating the claims at WPT), and retain visual clarity by using the Premium (lossy) JPG settings in EWWW I.O. We use the incredible TinyJPG (Premium Plus) and Caesium (Premium) technologies to achieve these results, and you can test it out for yourself with some sample images if you're a little nervous about making the leap.