Sizing and Optimizing Images
A high percentage of websites (even professionally built ones) have images that haven’t been properly optimized.
For this first pass, we definitely want to optimize images when on the home page when there is room to save 500kb or more.
Later on, it’s worth working on the other important pages on the website, but to start we’ll just focus on the home page and situations where there’s more than 500kb in unnecessary bloat.
An exception to this would be if we notice that a site has gigantic images (over 1mb) on their home page – in this case we might choose to look at other important pages right away as this level of bloat will be dramatically impacting performance.
To find these image issues you’ll look in the Top Issues report in GTMetrix and look for warnings to:
- Efficiently encode images
- Properly size images
If you’re looking in the Google Pagespeed Mobile test, you may also be told to
- Serve images in next-gen formats
In general, you’ll see the same offending images reported in GT Metrix and Google Pagespeed. That said, if you fix the ones you’ve identified in GT Metrix and there are still images identified in Google Pagespeed Insights, it may be that the mobile version of the website is leveraging images that weren’t present in the Desktop GT test.
You can pick the list from either GT Metrix or Google Pagespeed to fix, but then be sure to run both tests again after your fixes to make sure there are no additional images to fix.
The most important thing to note is that the value of these tests is in identifying them, not using them to dictate exactly what to do.
For instance:
