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 Easy Image Optimizer service is 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 Easy IO, and still getting any of these recommendations, we've summarized the important bits for Easy Image Optimizer in a separate article.

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, GTmetrix.com 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, some testing sites might still recommend 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 IO. 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/EXIF.

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 IO Advanced Settings. The “Folders to Optimize” setting 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 to regularly scan such folders for new images.

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 Easy IO service. Easy IO 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 has an option on the resizing tab that lets you highlight images that might need resizing (Resize Detection).
Our lazy loader can often be a quick fix for scaling issues, see the lazy load section for more info. 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 the 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. The quickest fix is to select a more suitable size (medium, thumbnail, etc.) from the image block settings (in the page/post editor). If you don't already have the right size and 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. As a last resort, 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. While we built it to work best with Easy IO, the lazy loader can help to solve many image size/scaling problems. Any images that have responsive/srcset markup can be auto-sized with the EWWW IO lazy loader. Easy IO tackles the tougher images, including inline CSS background images.
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 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.

Webpagetest.org

This site recommends using lossy compression at level 50 (or at least it used to, I never use it anymore). 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 get a free trial to check it out for yourself.