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 performance 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.
How Reliable are Performance Tests?
Before we go any further, I want to be clear about one thing. You can test the same site multiple times and get different results. Sometimes they'll say your images need work, then they say it's all good. Your score is 50, oh wait now it's 90! Oh, hold on, it's only 70 now...
Even if they were reliable, certain tests (like PageSpeed Insights) are focusing much more on the user experience than they are on just raw speed. You can have a really fast page loading in under a second with an abysmal score, and they make you think your site should be faster!
So, while performance tests (we use GTmetrix) will give you some valid recommendations, I always double-check things myself. It's quicker, and pretty easy, and I made a video to show you exactly how to check your site speed:
Now that we have that out of the way, let's talk about some of the specific recommendations you might see.
Lossy Compression (Efficient Encoding)
First of all, you need to be aware of one very important thing with most of the testing sites: they use lossy compression instead of lossless. That means they have reduced the quality of your images in order to achieve the results they are recommending. For example, PageSpeed Insights (PSI) uses the freely available ImageMagick utility at quality 85 to compress images. In short, this means that if you want to meet or exceed such recommendations, you can do one of two things:
Use our Premium compression to optimize your images. This will give you better quality AND better compression than what most testing sites recommend.
Use WebP to get similar results (but without altering your original images). WebP conversion usually only achieves about 40% savings, our Premium compression averages 45%, and our Premium Plus comes in at 55%. That said, WebP conversion and delivery is not as simple as just compressing your existing images.
Premium compression does requires a subscription, 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 (or use WebP). You'll still get a faster site, even if the change isn't as dramatic.
Remove Metadata
This option is normally on by default, but bear with me a moment while I get on my soapbox... Some folks worry about losing this information, notably copyright information. But here's the problem. If someone is going to steal your images, they can very easily strip that metadata, and it won't matter one bit. Your copyright information is not a deterrent to jerks who will steal your content. And to be fair, they aren't all jerks anyway, some folks are just completely ignorant of the fact that they can't grab any image they find on the Internet and use it however they want. They view the Internet as one big "commons" ripe for the picking. Those folks are wrong, but not jerks :)
At any rate, pretty much 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.
Images "somewhere else"
If a performance test 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.
First enable Ludicrous Mode, and then head over to the Advanced tab. 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 in 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 (still, in 2021, 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 IO 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.
