Google's John Mueller posted a great thread on Twitter about considerations around how to make your images more optimized, so that your pages load faster, while also taking into account how that might impact your rankings in Google Image Search. John posted several tweets on Twitter with the information.
This comes shortly after John posted an excellent Google tutorial on video SEO for Google. But let's focus on John's advice around image optimization and not losing Google rankings, if possible.
(1) Don't forget that if you change your image URL or filename, redirect the old URL of the image to the new one:
PSA: If you change your image URLs, and you care about Image Search, remember to redirect them. While tweaking my site, I noticed PSI suggesting to change some of my image formats, and realized it's worth mentioning this again. pic.twitter.com/gDHAqJB6eC
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(2) Keep in mind, you might not get much image search traffic in the first place and if you do, you can do things to improve your images without changing URLs he said:
But first: don't panic. Not all sites get significant traffic from Google Images (so you might not need to worry about it), and you can do a lot to improve images without changing the image file URLs. pic.twitter.com/hIg5rQ0uM2
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(3) Use Search Console to see how much traffic you are getting from image search:
Let's start. Is it really a problem worth focusing on? Check the Search Console performance report ( https://t.co/5ZvBuRDxR8 ), select "Search Type: Image", and look at the numbers. Are you getting lots of *useful* clicks from Google Images? If so, read on. pic.twitter.com/aEMputsFgi
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(4) Use Google Page Speed insights to determine what changes you can make to improve your images:
PSI: Take some of the popular images landing pages in Page Speed Insights: https://t.co/F8BxJ7YPih Are you seeing speed issues which point at image size issues? "Serve images in next-gen formats"? "Properly size images"? "Efficiently encode images"? pic.twitter.com/ffN9dAjKOB
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(5) Some image optimization resources:
FWIW, there's "no simple guide to complete image optimization" (I'm sure someone will make one now though :-)). You can get books on optimizing images for the web: https://t.co/MKtRfCxjYc . These things can be hard to get perfect, and you usually don't need to make them perfect.
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(6) Here are ways to optimize your images and the pages they are embedded on without changing the filename:
There are a few first steps you can try:
— 🍌 John 🍌 (@JohnMu) May 1, 2021
- use image lazy loading (especially if they're below the fold). WP can do this for you, plugins can do it too.
- make images the right size (however you're displaying them)
- specify the image size (again, with a plugin, often) pic.twitter.com/wsJY5MLpBO
(7) Use compression tools:
And then there's: load the really big images in your image editor, and see if there are compression settings you can use to save them with the same format in a smaller size. Try https://t.co/ZpGiXTQ8Ne if image editors aren't your thing. There's more at https://t.co/Xk0FapIsTN pic.twitter.com/O9IxSbIVKU
— 🍌 John 🍌 (@JohnMu) May 1, 2021
Again, a simple way to try it out for a handful of images is https://t.co/ZpGiXTQ8Ne . WebP might be a format to try, https://t.co/peYIawg0kA has more suggestions. Also keep in mind that not all browsers support super-modern formats, so check your user stats too.
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(8) Consider using responsive images:
Depending on your site's setup, you may be able to use responsive images ( https://t.co/MSWq818npp ) to include modern formats together with your previous image formats. This is the optimal configuration, but it can be hard. pic.twitter.com/fIQhZb8TY8
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(9) If you need to change file names because you are going from .png to .svg or something like that, do not forget the redirects. Keep in mind, it will be slow to communicate these changes to Google:
If, after all of this, you need to move from .jpg to .webp, set up redirects for these images on your server. Google Images takes longer to reprocess, and if the old URLs stop, they may drop out for a while, until the new ones are picked up. Redirecting helps prevent that. pic.twitter.com/UXXSzESVAW
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(10) If you host your images on a CDN, hopefully you can redirect as well:
If, after all of this, you need to move from .jpg to .webp, set up redirects for these images on your server. Google Images takes longer to reprocess, and if the old URLs stop, they may drop out for a while, until the new ones are picked up. Redirecting helps prevent that. pic.twitter.com/UXXSzESVAW
— 🍌 John 🍌 (@JohnMu) May 1, 2021
(11) Learn more at:
Want more links? Here's our guide to images: https://t.co/BPDOV02us9 , and our guide for responsive images: https://t.co/iSKBykZrO1
— 🍌 John 🍌 (@JohnMu) May 1, 2021
What did I miss? What worked best for your images?
The funny thing, embedding these tweets like this really probably kill the page speed of this page. But there is a trade off from giving more functionality to page speed.
Forum discussion at Twitter.
As long as you have the <img src=..> as fallback (in the picture / source srcset configuration), and redirect or keep the old URL, nothing would change for Image Search. My guess is you're seeing unrelated effects there.
— 🍌 John 🍌 (@JohnMu) May 3, 2021