As we all know, a picture is worth a thousand words. Large, high-quality images on webpages are common across the internet, but as image quality gets better, image file sizes grow. Large images make for slow load times. Not good, since today’s users expect a page to render in under one second.
What’s more, Google won’t crawl or index anything on a page that loads after 5 seconds. That means that if the hero image renders before all the page content and takes 5 seconds to load, none of the on-page content will be crawled by Google. The page won’t rank as highly in the Google search results.
The good news? It’s easy to make sure this isn’t happening with your pages.
Google’s Tool to Check Image Sizes
Check webpages on Google’s pagespeed tool to see if image sizing and compression is an issue with your website.
This tool highlights images that should be compressed and the amount of space you’d save. You can find this feature under “Optimize Images.” After analyzing the page, each image URL is listed along with the potential space that would be saved by compressing it.
Google Analytics also tracks user pagespeed under “Behavior > Page Timings.” It identifies which pages are the biggest offenders in terms of pagespeed.
Google’s pagespeed tool reviews images on both mobile and desktop devices. If the recommended compression savings is higher on mobile than desktop, this can be an indication that images are rendering at sizes too large for mobile.
Consider reserving large images for the desktop experience. This can allow the page to render faster on mobile devices, which allows a better user experience.
Recommended Image File Type for SEO:
JPG is typically the best file type for SEO, since it can retain high image quality while being compressed. PNG and GIF are not as easily compressed and require higher file sizes to maintain the same level of quality as JPG. SVG is only recommended for vector images, like logos, where the file size can remain small and retain high quality. JPG requires a higher file size to retain the same quality for vector images like logos and other one-color icons than SVG.
Tips for Image Sizing
A guideline to help keep your page in check is to ensure the sum of all images per page is under 1MB. You can check the size of each image using www.webpagetest.org. This tool provides a chart which lists each element and how long it takes to load. Select an image URL to see the image size and loading time. Once you have identified large images, the next step is to resize and compress them.
When to Resize Images
Consider how the image will appear to the user. If the image is used as a thumbnail and the image size is 1200×1200 with a file size of 2MB, this could easily be resized and then compressed and still maintain its high quality.
If the page is heavy on images, consider removing any images not vital to understanding the content of the page. You can also split the page into two or more pages.
Try to avoid using images as backgrounds and visual on-page elements (like buttons and navigation bars). Instead, leverage CSS to provide the same result. Google can help you delve deeper with specific recommendations.
Another option is to create a script that automatically compresses and resizes images. This is especially useful if the site is built around user-generated content. An image compression script can help control pagespeed at scale and usually implemented by a developer.
Recommended Free Online Compression Tool
Tinypng.com is a great free online tool for image compression. You can upload multiple images at once and then download them in the compressed size. Tinypng also offers a WordPress plugin that does bulk image optimizations.
Image Sizes on Mobile vs. Desktop
Although an image may appear smaller on a mobile device, that doesn’t necessarily mean the image is optimized for mobile. As technology improves, user standards and Google’s expectations increase. Google expects that desktop webpages will fully load in under 4 seconds and that mobile webpages will fully load in under 2 seconds. On mobile, Google recommends the page should render in under 1 second.
Next Steps
Review images in Google’s pagespeed tool and WebPageTest to understand if images are a problem on your website. If so, take a page on your site that is image heavy and compress/resize the images and watch the organic traffic over the next few weeks for improvement.
Need help? Have questions about image optimization and technical SEO? Please reach out. We’d love to help.
