*See our updated guide on our docs site: https://docs.ewww.io/article/5-pagespeed-says-my-images-need-more-work
So, you’ve run the EWWW Image Optimizer on all your images and Pagespeed Insights (or GTMetrix, or Yslow, etc.) still says you need to do more with your images? Here are a few likely scenarios:
Images from your Media Library can be reduced by lossless compression
I see this a lot, and the normal culprit is image metadata. To fix this, enable the ‘Remove metadata’ option in EWWW I.O. All the page testing tools I know 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, you’re either using an older version of EWWW IO, or you didn’t enter the path correctly.
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 Bulk Optimize page, by clicking Show Optimized Images. This will help you to verify if the new images are being optimized automatically or not.
Images need compressing and resizing
This basically means your images are too large for where they are being displayed. It is also one of the harder problems to fix. The first thing you need to determine is what sizes are needed. For this, I use the built-in browser developer tools, though EWWW IO now has a built-in Resize Detection option (enable Ludicrous Mode and enable it under the Resize settings). Otherwise, to use the dev tools, find the image that is causing the issue in your page, right-click, and then Inspect Element.
In Chrome (and most browsers), if the image is too large for the space, you’ll see the “rendered” dimensions, and the “intrinsic” dimensions. If you hover over the actual image filename in your browser’s developer console, you will see these dimensions displayed. The first is the size the browser is displaying, the second is how many pixels the image actually has.
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 can try to fix them manually by adding additional thumbs/sizes to your site configuration. Another simpler solution is our Easy IO CDN which will run when your page loads and generate the correctly-sized images on demand. It also caches them to our CDN servers so that it isn’t slowing things down on every page load.
Webpagetest.org
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 JPG compression in EWWW IO (via the Compress API or Easy IO).
If you have any further questions or comments, feel free to let us know, and I’ll update this post accordingly.
