Written by Christie LaBarca
Lifelong geek with a penchant for understanding the way humans (users) interact with the bots fueling search engines (and vice versa). SEO Manager at NetElixir Search Marketing Agency.
Did you know that images are still the number one cause of bloat on the web?
Why are heavy images so bad for the web? Besides slowing down the load time of sites for users, unnecessarily weight on websites ultimately ends up costing Google and other search engines, resources, time, and money, as it requires more bandwidth to crawl and index sites.
For one website, it may not seem like a huge deal to have a webpage that’s 10MB in weight (which we strongly advise against!), but Google crawls the entire web! Plus, heavy images serve little value to users viewing websites from their mobile devices.
So Google has two incentives to emphasize image optimization – ensuring more cost efficient crawling of the web – and a better experience for the end user. It’s no surprise that they’ve been dedicating a significant amount of attention and resources into improving the web’s problem of image bloat.
We’ve put together a summary of key points to help improve image optimization for your site’s SEO. These factors seem to transitioning from being “good to haves” (by Google’s ranking factors standards) to “must haves” (as algorithm updates take place). In other words, we can tell you first hand that Google has emphasized these factors more and more in the last couple of years. Ensuring your images are optimized now should certainly increase your organic performance.
Reduce the number of images on the mobile version of your site
- Countless case studies have proven that fewer images on mobile correlate with a higher number of conversions!
- Naturally, a smaller number of images will improve mobile page speed and increase the load time
Compress Images!
Since most users are on mobile devices, it’s not necessary to have extremely high quality, heavy, images on your site, especially not necessary to serve them to mobile users. Make sure all your images, especially on your homepage, are compressed!
- When adding new images to your site, make sure to compress them before uploading them.
- Have your team get into this habit, incorporate it into your workflow
- You can run the images through an optimizer tool such as TinyJPG or Optimizilla (both are free to use).
Compressing Existing Images on a Website
- For bulk compression, it’s recommended to download images from your site, use a bulk compressor tool, and then re-upload (make sure that your image quality hasn’t been compromised).
- On some CMS platforms, there may be ways to automate compression without manually downloading, compressing, and re-uploading. Check with your developers or technical teams for more details.
- You can also use a new image format such as WebP sitewide (see more information on WebP below).
- For a single page, you can also use a tool such as Cloudinary to preview and download optimized versions of images from an individual webpage URL.
Directions For Compressing Images on an Individual Page with Cloudinary
- Go to https://webspeedtest.cloudinary.com/
- Enter web page URL
- View the optimized images, download the version you choose (we usually recommend JPEG)
- Upload the optimized file to replace the existing, old image file on your website
What Is the Best File Type to Use for Image Optimization?
This is a topic of SEO, and overall web development (and internet infrastructure), that is still developing. Google often updates the latest developments or improvements for image optimization in it’s developer resource documentation.
- Currently, JPEG is typically the best file type for website images in terms of file size, weight and accessibility for different types of browsers (Chrome, IE, Firefox, etc)
- When saving a new image, check if there is an option to save as Progressive JPEG (in photoshop for example, there is an option), use this, as it is the preferred method
- In the future, we will hear more about WebP for image formatting to help improve significantly reduce image bloat and improve website speeds. However at this time, not all browsers support WebP.
It is possible to implement WebP for your sites images, and then have a fallback image type for those browsers that do not support it. See more about this in Google’s documentation on automating image optimization.