Have you ever received the improvement “Optimize your images” from Google’s PageSpeed Insights website speed test? Unless you’re uploading huge, lossless quality images to your website, you’re probably already optimizing images using common image optimization tools and strategies. It might even feel like Google PageSpeed Insights stopped recognizing your optimized images. Yet Google revealed a new image optimization tool that challenges what current tools can do to win over PageSpeed Insights: that tool is Squoosh.
Google’s experimental web app Squoosh challenges other image optimization tools for PageSpeed. Indeed, Squoosh boasts of large file size savings with minimal quality loss. Compared to Squoosh savings, PageSpeed Insights might think your other image optimization tools are good enough.
The Image Optimization Trick
Common image optimization tools and strategies include:
- Compressing to ~72ppi web resolution
- Reducing the number of colors in PNGs and GIFs
- Exporting to the appropriate image format (e.g. JPEG photos, PNG icons, SVG logos)
- Running images through an app like ImageOptim to shave more off file size
- Using a WordPress plugin like Short Pixel or Smush to compress images on upload
- Resizing images no bigger than the display size
Using one or a combination of many of these image optimization tools decreases image file size by compression and small reductions in image quality. Overly compressed images result in ugly pixelated artifacts, hot pixels, and distorted color palettes.
Obviously, people don’t like seeing low quality images. However, SEO assessments target low quality content over low quality images. Although image alt text is important, search engines don’t penalize blurry website images with poorer SEO rankings.
Nonetheless image optimization is important for speed. Smaller image sizes result in faster downloads and content reveal for users. Most importantly, this website speed does impact SEO ranking. Faster websites (and their smaller images) rank higher in SEO, and that’s why using the right image optimization is crucial.
Optimized Images & PageSpeed Insights Scores
My personal experience with Google PageSpeed Insights’ command to optimize images has been frustrating. Like many people, I also use a combination of the above image optimization tricks to increase my website speed and improve my PageSpeed scores. Nonetheless, my optimized images don’t seem optimized enough to boost my scores into the Excellent range. Additionally, I switched WordPress image optimization plugins, too, without the success I wanted. I began to accept that a perfect score, or even an excellent score, might be unattainable without reducing my beautiful images to blurry, pixelated ruins.
However I stumbled across this interesting Google forum in which a user reported that PageSpeed stopped recognizing optimized images:
The responses suggested a new experimental image optimization tool made by Google…perhaps just for Google’s PageSpeed insights. Username “Analytics Manager 1” responds to OP, “It’s not that you’re not optimized, it’s just that Google Page Speed Insights now has an amazingly good lossless compression service that is beating the pants off of everything that I can find (latest versions!).”
I decided to investigate. I learned that image compression service is Squoosh, released November 2018. For now, Squoosh is available as a web app at https://squoosh.app/.
What Is Squoosh?
Squoosh is free as in liberty; it’s open source software. It’s also free as in beer; there’s no cost to use. Furthermore, Squoosh provides image optimization, including advanced compression settings, image conversion, and resizing all conveniently within its web app. Consequently, like several other apps out there, web designers can use Squoosh is as image optimization tool to boost PageSpeed website speed scores.
Yet, Squoosh’s biggest limitation is that the tool only processes one image at a time. This is compared to other image optimization tools that process batches. It’s also so new and experimental that Squoosh isn’t available as a WordPress plugin to automatically optimize images on upload. Therefore, users must run images through Squoosh themselves before dragging into the WordPress media library.
On the other hand, Squoosh’s biggest advantage over its image optimization competitors could be its excellent ability to reduce image size without sacrificing quality.
Below is a quick experiment of Squoosh’s image optimization capabilities.
Savings Results of Image Optimization Test
|Image Optimizer & Settings||File Size||Image|
Exported directly from InDesign
Maximum quality JPEG
Original image processed through ImageOptim:
Automatically selected settings best for image
475 KB (8% savings)
Original image processed through Squoosh at default settings:
60 KB (88% savings)
Original image processed through reSmush.It on WordPress upload:
74 KB (71% savings)
Original image processed through reSmush.It on WordPress upload:
60 KB (76% savings)
Squoosh did produce the lowest image file size at 88% savings. However I did notice JPEG artifacts, especially around the text, that makes me want to increase the default 75 quality setting. When I compared the result from Squoosh to the results from reSmush.It, I was happier with less artifacts in reSmush.It’s image. Nonetheless, reSmush.It’s image didn’t achieve as high as savings as Squoosh’s image when both were set to equal quality settings.
I experimented further to see what reSmush.It’s result would be at the same file size Squoosh achieved. For this particular image in reSmush.It, I found the quality setting at 65.
Analysis of Optimized Test Images
Both images appear to have the same amount of artifacts at this size. Therefore, reSmush.It’s earlier image might have had less artifacts simply because it had less compression, rather than one tool being a “better” optimizer.
However even at the same file size with similar JPEG artifacts around the text, I found that reSmush.It’s optimized image looks more sharp and crisp. The artifacts are more pronounced but then so is the text. At this point, whether Squoosh or reSmush.It is the “better” image optimization tool comes to a matter of preference.
Obviously, smaller images are more effective at increasing webpage speed and PageSpeed Insights scores. Yet we as web designers must find an acceptable balancing with that and image quality, lest users are turned off by low quality images.
Squoosh Performs as Well as Other Image Optimization Tools
In conclusion, Squoosh is a quality image optimization tool in the making. It does a remarkable job at optimizing images to reduced file size, maintain good quality, and help boost webpage speed with smaller images.
However, I wouldn’t abandon all your current image optimization tools just yet. Basically, I found reSmush.It to be as good as Squoosh. Additionally, reSmush. It lets users optimize multiple images at a time. It also integrates with a WordPress plugin to automatically optimize images on upload, allowing users to combine two tasks into one step.
Because of these similarities, Squoosh doesn’t seem to offer any more advantage in PageSpeed Insight website speed scores over other tools. Overall, just continue to optimize images responsibly to achieve your speed.