What is a fallback image? How do you implement a fallback image? How does Google crawl images anyway?
In basic HTML, an image is provided in the src attribute of an <img> tag. For example:
<img src="awesome.jpg" alt="My Awesome Image">When Google sees the src attribute in the <img> tag, Google will queue that URL in the src attribute for later crawling.
There are two problems with the src attribute, though.
The first problem is that visitors (and Googlebot) use different screen sizes to access the website. An image sized for a desktop screen is not going to work on a mobile screen (and vice versa). We need a way to have responsive images.
The second problem is that the image provided in that src attribute might be a really large file that takes forever to load. There could be a better format to use with a smaller file size. However, that better format may not work for all visitors. You can only provide a single URL as the src in that basic <img> tag. So, you wouldn’t be able to use the better format and have to use the larger format that all visitors will support. (This is why so many websites use PNG or JPG images. They are widely supported.)
We can solve these problems by providing multiple images for browsers and robots to use. We have our preferred images to use for the right screen size or when optimal image formats are supported. And then we have our fallback image the browser or bot can use instead if those preferred images don’t work.
There are two ways of providing these multiple image options: srcset or a picture tag. Google will support both.
A srcset is an additional attribute added to the image. This is typically used to solve the first problem of needing to use different images to support different screen sizes. In this example, three sizes are provided in srcset. The browser will check each of these to see if they work. If none of those work, or srcset is not supported, then the browser or bot will use the src attribute. That src attribute acts as a fallback image.
<img src="awesome.jpg" alt="My Awesome Image"
srcset="awesome-large.jpg 1200w, /* Image for large screens (at least 1200 pixels wide) */
awesome-medium.jpg 800w, /* Image for medium screens (at least 800 pixels wide) */
awesome-small.jpg 400w" /* Image for small screens (at least 400 pixels wide) */
sizes="(max-width: 1200px) 100vw, 1200px">A <picture> tag can fix both problems, but is mostly used to present images in multiple formats. These alternate image options are provided in the <source> tag. In this example, if the browser supports AVIF, only the awesome.avif file will load to the page. If the browser doesn’t support AVIF, it will try the WebP in the next <source> tag. If WebP is also not supported, then the browser (or bot) will use the JPG image in the <img> tag. That final <img> tag is the fallback image.
<picture>
<source srcset="awesome.avif" type="image/avif"> <!-- AVIF format -->
<source srcset="awesome.webp" type="image/webp"> <!-- WebP format -->
<img src="awesome.jpg" alt="My Awesome Image"> <!-- JPG format (fallback) -->
</picture>