Skip to content

Image SEO: Technical Considerations

By Matthew Edgar · Last Updated: December 14, 2023

Organic image search is an often neglected area of SEO opportunity. Ecommerce websites can benefit from product images appearing in search results. Recipe websites can attract more clicks by showing appealing photos. News and reference websites can benefit from informational graphics ranking in search results.

Along with crafting the right image, there are several technical factors that can improve the chances that your website’s images will rank in search results. That includes using the correct HTML tags, selecting the optimal image formats, loading the images quickly, presenting the image correctly for Google, and opening images for indexing and crawling.

Key Image SEO Considerations

  • Images can be added in an <img> tag or as background images in CSS. Google will only crawl, index and rank images in <img> tags.
  • Images can be saved in different formats. You want to choose an image format that presents the image at the right level of quality but at a file size that will not slow the page load.
  • Googlebot does not crawl or index all image formats. Web browsers do not support all image formats. When using unsupported image formats, you can provide multiple image format options. Robots and browsers will review the format options and use the format they support.
  • Images can contribute to slower speeds. To prevent this, use lazy loading, size images properly, and use responsive images.
  • To make sure Google understands what the image is, use alt text or captions.
  • In general, you want to allow Google to crawl the images. However, you can prevent Google from crawling or indexing specific images if those images should not rank in search results.
  • You can monitor image SEO performance in Google Search Console. Google Search Console also provides a report on how many images Google has crawled on the website.

Placing Images on the Page

Images can be added to the page in two different ways: in an <img> tag or as a background image in the CSS code.

An <img> tag can be presented on its own, as shown in this example:

<img src="awesome.jpg" alt="My Awesome Image">

Or an image tag can be wrapped in a <figure> or <picture> tag. Here is an example of an image in a <figure> tag.

<figure>
  <img src="awesome.jpg" alt="My Awesome Image">
</figure>

Google will crawl, index, and rank these types of images in the <img> tags. However, Google will not crawl background images. A background image is added in the CSS code, as shown in the following example with a <p> tag containing a background image. Unless these images are provided another way, Google will not index or rank background images.

<p style="background-image: url('awesome.jpg');">Paragraph text…</p>

Image Formats

The first question to consider is what format to use for an image. There are many formats available and most of those formats are supported by Google. Currently, Google supports BMP, GIF, JPEG, PNG, WebP and SVG images. However, most websites use PNG and JPEG images. Data from W3Tech shows 82% of websites use PNG and 78% use JPEG images.

Determining which format to use primarily requires considering the content of the image and striking a balance between the image size and image quality.

Different formats are suited for different types of images. ImageKit has a great overview of how different image formats compare. To summarize:

  • JPEG images use lossy compression, meaning they can lose some data when they are compressed. As a result, a compressed JPEG may lose some precision and get blurry. This makes JPEGs ideal for photos where a slight loss of precision or blurriness due to compression may not be noticeable.
  • PNG images use lossless compression, meaning they do not lose data when compressed. As a result, PNGs retain their precision and are better for images with text where a lack of precision would be very noticeable.
  • GIFs are best for animations. Like PNG, it uses lossless compression so many websites previously used GIFs for images with text. However, using a PNG format for text-based images results in a smaller file size so PNGs have largely replaced for non-animated images. Even for animated images, GIFs may not be the right choice and a small video file can often deliver the same animation at a smaller file size. (Also, how do you pronounce GIF?)

While PNG and JPEG formats are popular, the drawback is that both formats have much larger file sizes than new, modern web formats of AVIF or WebP. AVIF and WebP formats both have great image quality even at much smaller sizes. WebP can also support animations, possibly replacing GIFs. WebP is supported in all modern browsers. AVIF is supported in all modern browsers except Edge.

To find out how much better AVIF or WebP might be for your images, use a tool like Squoosh.app. This tool can help you compare the quality and size of an image across different formats. For example, the following screenshot shows a comparison of a JPG vs. an AVIF file. At essentially the same level of quality, the AVIF file is 65% smaller than the JPEG.

Use Squoosh.app to test different image formats

Fallback Images

Ideally, you should use the image format with the smallest file size possible. Typically, that will be AVIF or WebP images. However, Google does not currently crawl or index AVIF files. You can still use an AVIF file for visitors who use a browser that supports AVIF though. Doing so requires providing a fallback image that Google can use instead of the AVIF file.

To understand how a fallback image works, let’s look at how images are incorporated in an HTML document. 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. The problem is you can only provide a single URL as the src in that basic <img> tag. If you could only provide one image, you would have to provide an image that works for all browsers and for Googlebot. That would prevent using AVIF images.

We can solve this problem by changing how the image is added to the HTML document. Instead of using an <img> tag by itself, you can use a <picture> tag. This provides multiple images for browsers and robots to use. We have our preferred images to use in the optimal image format listed and then if those images are not supported, we specify a fallback image the browser or the robot can use instead.

In this example, if the browser or robot accessing the image supports AVIF, only the awesome.avif file will load to the page. If the browser or robot doesn’t support AVIF, it will try the WebP file in the next <source> tag. If WebP is also not supported, then the browser or robot 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>

Image Load Times

The next consideration is how to ensure the image is loaded as efficiently as possible. As of October 2023, images account for 40% of a page’s total size according to data from HTTP Archive. So, reducing image load times will help improve overall page performance.

Choosing the image format is part of this but there are other steps to take to load images as quickly as possible. This includes lazy loading images and sizing images appropriately.

Lazy Load

One of the best ways to improve image load time is with lazy loading. With lazy loading, the browser delays downloading the image until the image is about to appear on the screen.

This can be done by adding the loading attribute to an <img> tag. For example:

<img src="my-image.jpg" loading="lazy">

You can see how this works in this video from Web.dev. The images are only downloaded right before they come into view.

Example of lazy loading. Source: https://web.dev/articles/browser-level-image-lazy-loading

It is important to note that images should only be lazy loaded when they are outside the first viewport, or the first screen of content visitors will see. If images in the first viewport, like a header image at the top of the page, are lazy loaded that image may end up loading much slower than the rest of the content. That would result in visitors thinking the website was loading more slowly.

If the loading=”lazy” attribute is not provided, the images will use eager loading. Eager loading means the image is loaded as quickly as possible once the browser finds the <img> tag. Images higher up on the screen should use eager loading and any images outside of the first screen should use lazy loading (in general, there are always exceptions).

Image Dimensions: Width and Height

The image’s byte size is directly proportional to the image’s dimensions. An image with a larger width or a larger height will have a larger byte size and take longer to load.

There are two sets of dimensions to consider for every image on a website: the rendered size and the intrinsic size. The rendered size is the width and height of the image as displayed on the page. The intrinsic size is the native size of the image—the size the image was saved at in your image editor.

It is important to save the image at the width and height it will be displayed at on the webpage. If the intrinsic size is greater than the rendered size, then the browser will load a larger file than is needed and that will unnecessarily slow down the website’s load.

You can view the rendered and intrinsic sizes in Google Chrome’s DevTools. Right click on an image and select Inspect. This will open the HTML code for that <img> tag. You can hover over the image and a panel will appear listing the intrinsic and rendered sizes. If the intrinsic and rendered sizes match, then only the rendered size will be shown.

In the following example, my headshot image on Elementive’s website has a rendered size of 200×200 pixels but has an intrinsic size of 750×751 pixels. That means the browser must load a larger, 750×750 pixel image when it only needs to load a smaller, 200×200 pixel image. The 750×750 pixel image has a file size of 411 kilobytes compared with a 56.4 kilobyte file size for the smaller image. Changing this to a 200×200 pixel image would improve the website’s performance.

Chrome DevTools shows the intrinsic and rendered (displayed) sizes of an image

Responsive Images

The challenge is that images cannot always use one size on a webpage. Instead, the image’s size depends on the visitor’s screen size. Visitors on a mobile device need to see a smaller image than visitors on a desktop device. One option would be to use an image with a large intrinsic size and then display that image at different sizes depending on the device. As discussed above, that would result in mobile visitors downloading an image at a much larger size than is necessary. Instead, we can use a responsive image.

Responsive image sizes can be defined using a srcset attribute in the <img> tag. In this example, three sizes are provided in srcset.

<img src="default-image.jpg"
     srcset="image-phone.jpg 500w,
             image-small-laptop.jpg 1000w,
             image-large-desktop.jpg 2000w"
     alt="My responsive image!">

The first value listed is “image-phone.jpg 500w”, with “image-phone.jpg” stating the file name and “500w” stating the image’s intrinsic size. The browser will check if any images provided in the srcset will fit on this visitor’s screen. If none will work, then the browser or bot will use the src attribute.

When crawling, Googlebot can fetch images from srcset but it may not always be reliable. So, it is important to always provide an image in the src attribute to ensure Google can crawl the image.

How Google Knows What the Image Contains: Alt Text and More

Google uses multiple data sources to understand what an image is. Google primarily relies on computer vision algorithms to detect what objects are present in the image. You can test Google’s understanding of an image by using Google’s image search. Select the “search by image” feature and upload your image. If relevant and related images appear, then you know Google correctly understands the nature of your image.

Another source Google relies on to understand the image is the text surrounding that image on the page. This helps put the image in context. During indexing, Google will use this information to determine why people may want to see this image. That determination will be used to help Google to decide where, and if, to rank this image.

The other source Google uses to understand an image is the alt text. Alt text is an additional attribute added to the <img> tag describing what the image is. For example, the headshot containing my headshot uses the alt text “Matthew Edgar, Technical SEO Consultant, Elementive”.

<img alt="Matthew Edgar, Technical SEO Consultant, Elementive" src="/img/matthew-edgar-headshot.jpg">

When writing alt text, remember that this will be useful for Google to determine where to rank the image and it will help improve image accessibility for visitors using assistive technology, like screen readers.

To help Google and visitors using screen readers, the alt text should be descriptive but succinct. Alt text should also not be stuffed with keywords, which was a common practice in the older days of SEO. Also, it is best to avoid phrases like “Picture of” or “Image of” in the alt text. Those phrases do not help Google understand the image (they already know it is a picture or image of something) and these phrases are redundant for visitors using assistive technology (the screen reader has already told the visitor it is an image).

Remember to not add alt text to decorative images. Alt text is only useful for images that contain important content visitors need to see. If the image is simply enhancing the visual design, without contributing to the page’s content, Googlebot and visitors using screen readers do not need to know anything about the image. In these cases, the appropriate solution is to leave the alt text attribute empty, as shown in this code example:

<img src=" /decorative-image.png" alt="">

When images are added to the page within a <figure> tag, a <figcaption> tag can also be added. A <figcaption> provides additional information about the image. This information is intended to be presented alongside the image, offering more detailed explanations. As a result, you should have both a caption and alt text provided for an image. Google may use the content provided in the figcaption to better understand and evaluate the image.

<figure>
<img src="/uploads/how-long-to-keep-a-redirect.png" alt="keep redirect decision tree">
<figcaption>Flow chart to decide whether to keep an old redirect</figcaption>
</figure>

Crawling and Indexing Images 

You typically want Google to find all the images contained on your website and index those images so they can appear in organic search results. Google typically does a good job discovering images within the website HTML and no additional work is needed to get those images indexed.

To improve discoverability, images can be added to an XML sitemap. That is especially helpful on larger websites with more images. It is also helpful when images are loaded via JavaScript as this method of loading images can limit Google’s ability to find the image on the page. Check out my XML sitemap guide for details about adding images to the XML sitemap.

There are also ways to prevent Google crawling and indexing images using Disallow and noindex statements. You can also prevent Google from using full-size images in image search results.

Disallow Image Crawling

There may be some images you do not want Google to crawl. This should be the exception. By default, Google should be allowed to crawl all images on the website. Crawling the images allows Google to see what images are in use on various pages and lets Google factor those images into decisions about the overall page quality. Allowing Google to crawl images will also help Google know how to rank your images in image search results. You want to make sure that none of the Disallow statements on the robots.txt file prevent Google from crawling images. Learn more about Disallow statements.

An exception to this would be placeholder images that Google does not need to crawl to understand the website. For example, you may use an image of a blank gray box as a placeholder until the main image loads to the page. In that example, if the placeholder image was in the /images/placeholder/ directory with the name blank.gif, you could disallow crawling of it with the following robots.txt statement. Google would not crawl this image even if saw a reference to it in the code.

User-Agent: *
Disallow: /images/placeholder/blank.gif

You may also want to prevent Google from crawling images containing sensitive or private information. For example, your site visitors may upload a picture of their passport and you would not want those images to be found or indexed by Google. The Disallow statement is not a strong enough signal in this case. That is because the Disallow statement only blocks crawling. Google can still index and rank images it does not crawl.

For images you do not want Google to crawl, index or rank, the better answer is to restrict access to the image. For example, you could require a login before you are able to view the image. If you cannot login to view the image, you will receive an error message. That means, if Googlebot attempted to access the image, it would see an error message and would not crawl or index that image.

Noindex Images

There may also be images that Google can crawl but should not appear in search results. For example, there may be low-quality images on the website or decorative images on the website that do not have much SEO value. Google needs to crawl these images to properly evaluate the website and understand how the website works. However, you would not want these images appearing in search results.

You can noindex image files using an X-Robots tag. The following code would be placed on an .htaccess file and it applies a noindex tag to all files in the /decorative-images/ directory. This operates like a <meta> noindex tag in an HTML document and signals Google that the file with this noindex directive should not rank in search results.

<If "%{REQUEST_URI} =~ m#^/decorative-images/.*#">
    Header set X-Robots-Tag "noindex"
</If>

Prevent Full-Size Images from Ranking 

You can also prevent Google from using a full-size image in image search results. Google can still rank the image but instead of showing the full-size image, Google will use a thumbnail image they generated when crawling the page. Blocking full-size images from ranking in search results can help cut down on people copying your full-size images directly from image search results.

To do this, you want to change the HTTP status code returned for the image when Googlebot crawls from a status 200 to a status 204. A 204 HTTP status code says that there is no content available for the requested image. With no content available, Google will have nothing to index. Typically, you do not want Googlebot to see anything different than regular users. Showing Googlebot something different than other users is referred to as cloaking. However, using a 204 to block full-size images from ranking is a permissible exception and it will not be considered cloaking.

Monitoring Image Performance in Google Search Console

You can track the performance of images in Google Search Console using the Performance report. There are two types of search results that include images that are available in the Performance report: Web and Images.

Web search is the default search type shown in the Performance report. This is the regular search result page you see after typing in a query on Google. Web results with images are shown in the following example. Images are presented in a carousel and thumbnails are provided next to each organic search listing.

Images in Google Image Search

Google Search Console’s Performance report does not break out clicks and impressions for individual images. For example, the carousel seen above may get clicks but those clicks would track as clicks to the page containing the image and not as clicks on the image specifically. The same is true for image thumbnails or other image features Google includes on Web search results. Even though specific data is not provided, if you know your website is included in an image carousel for a specific search term, then you can infer that some number of the clicks reported for that search term came from the images.

Images are also ranked in Image search results. Image search results appear after clicking on the Image button at the top of the search results page. Image results operate differently than Web results. Clicking an image will expand a panel with additional details about the image and other related images, as seen in the example image below. There is a link on the panel to visit the website. Images in image results may not drive as much traffic as web results because the link to the website is less direct.

Images in Google Image Search

In Google Search Console, you can view Image search activity by changing the Search type on the Performance report from Web to Image. When filtering to Image search, clicks will show how many people clicked from the details panel to the website. This report does not show how many people clicked to expand the panel.

Viewing image search performance data in Google Search Console

View Image Crawls in Google Search Console

The other important metric to monitor is how often Google crawls images on your website. You can view this data with Google Search Console’s Crawl Stats report. To access the Crawl Stats report, click Settings in the sidebar and then click Open Report next to Crawl Stats. Scroll down the page to the By File Type card. This lists Image crawls, which are 12% in the following example.

Google Search Console Crawl Stats By file type report

Click on Image in the file type card to view more details. At the top of the details page, you will see a graph of how frequently Google crawls images on the website. This is helpful to determine if crawls are consistent and how frequently Google typically crawls images. Below the graph, you can also see a table of which images are being crawled.

Google Search Console Crawl Stats Image crawl details

Pro Tip: If your website hosts images on a subdomain, such as images.yoursite.com, you can set up a separate prefix property in Google Search Console for that subdomain. That way you can view crawls of the images subdomain specifically.

Final Thoughts 

Image SEO is an area with a lot of opportunity. It is similar to regular SEO but there are unique considerations to keep in mind, especially around how images are presented on the page, speed implications, and deciding what format to use. If you have any questions or need help improving your image SEO performance, please contact me.

You may also like

Handling Out of Stock & Removed Product Pages

How do you remove products from your website without harming your users or SEO performance—or at least minimize the harm? In this post, Matthew walks through the different options available.

Do Redirects Impact Your Website’s Speed?

Yes, redirects do add to a website’s speed. There are two ways redirects can affect speed: by adding to the server overhead or by delaying the load of the final destination page. Discover the data-driven conclusion.

How To Fix 404 Errors On Your Website

How do you find the 404 errors on your website? Once found, how do you fix the 404 errors? What tools can help? Find out in this in-depth 404 guide!