Resize image tips for Google PageSpeed Insights
Compress and resize your images is what Google PageSpeed Insights tell you so often. ShortPixel takes care of the compression part, but you need to solve the proper scaling issue by yourself.
This is not always as easy as it sounds, so we thought that you might need a little help. Here are three tips for resizing images for Google PageSpeed Insights.
1. Check if your theme uses responsive images.
“Responsive images” means that your theme serves different images for different display sizes. The most common way to implement it is by using srcset attribute. Check your images with Chrome DevTools or with Firefox Developer Tools, and see if you have a responsive theme, and its break points.
2. Read the most popular guides.
Sometimes, we miss important info even if it is under our nose. Read what Google says about properly scaled images, and you will understand why it is so important, and why it affects your GPSI score.
Next step is to learn to use browser tools to check your theme. GTmetrix has a good article about image optimization. We would have said “a great article” if they mentioned ShortPixel as the best solution for image compression. We are subjective, but we have data to support this 🙂
CSS Tricks is an amazing site and well-known reference for all web designers. Read Chris Coyier’s article on Resize Images in CSS. We write this article having WordPress in mind, but CSS is universal, and an expert view on it is invaluable.
3. Regenerate your thumbnails so you have enough thumbnail sizes for your page.
Your website will be viewed on different displays, and you cannot tell for sure which viewport is the most popular. Always there will be users for which your images will be either a bit too large or a bit too small for their placeholder. But you need to find the best compromise. After deciding what thumbnail sizes you need for your responsive website regenerate your thumbnails. For this, you will need a plugin like (some of our users recommended it):
https://wordpress.org/plugins/force-regenerate-thumbnails/
Important: Please don’t keep ShortPixel and the regenerate plugin active in the same time, and remember to re-activate ShortPixel when the regeneration of the thumbnails is finished.
Remember that Google PageSpeed Insights is a tool and it’s your job to find the best solution for your images. A quote from Google guideline written by Ilya Grigorik: “Finding the optimal settings for your image requires careful analysis along many dimensions: format capabilities, content of encoded data, quality, pixel dimensions, and more.”
ShortPixel can take care of many of these things, but you should know how to choose the proper image format for different situations, and how many thumbnails you need.
Don’t forget to sign-up for a free ShortPixel account or to test our online compressor.
