Image SEO

Understanding Image SEO

Image SEO is the practice of making webpage images easier for visitors and search engines to understand, discover, and use efficiently.

Useful image optimization begins with normal HTML practices: use appropriate image elements, write meaningful alternative text, choose descriptive filenames when practical, place images near relevant content, and avoid unnecessarily large image files. These practices improve accessibility and usability while also helping search engines interpret image content. :contentReference[oaicite:0]{index=0}

Use HTML Image Elements

Images that are part of the page content should generally be included with standard HTML image markup such as the <img> element.

<img src="/img/images/tomato-plant.jpg" alt="Tomato plant growing in a raised garden bed">

Search engines can discover images referenced by the src attribute of an <img> element, including an <img> used inside a <picture> element. Images used only as CSS backgrounds are not handled in the same way for image indexing. :contentReference[oaicite:1]{index=1}

Use CSS background images primarily for decorative presentation rather than for important content that should be represented by an HTML image.

Use Descriptive Filenames

An image filename can provide a small amount of information about the image subject. When practical, choose a short filename that describes the image instead of using an automatically generated camera or software filename. :contentReference[oaicite:2]{index=2}

A descriptive filename might be:

tomato-plant-raised-bed.jpg

A generic filename provides less information:

IMG_4827.jpg

Use lowercase letters and hyphens for a consistent naming convention, and avoid stuffing filenames with repeated keywords.

Write Useful Alt Text

The alt attribute provides text that can replace an image when the image cannot be perceived or displayed. It is important for accessibility and can also help search engines understand the subject of an image. :contentReference[oaicite:3]{index=3}

Good alternative text describes the meaningful information the image contributes in the context of the page.

<img src="/img/images/tomato-plant.jpg" alt="Tomato plant supported by a wire cage">

Avoid filling the attribute with repeated search terms:

<img src="/img/images/tomato-plant.jpg" alt="tomato tomato plant tomatoes gardening tomato growing tomato tips">

The wording should make sense for someone who cannot see the image, not merely for a search engine.

Decorative Images

Not every image needs a written description. An image that is purely decorative and adds no meaningful information can use an empty alt attribute.

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

An empty alt value tells assistive technology that the image does not need to be announced as meaningful content.

Do not omit useful alternative text from informative images merely for SEO reasons. The purpose and meaning of the image should determine the appropriate alt value. :contentReference[oaicite:4]{index=4}

Place Images Near Relevant Content

The text surrounding an image helps establish its context. Place important images near headings, paragraphs, captions, or other content that relates directly to what the image represents.

<h2>Supporting Tomato Plants</h2>
<p>Tomato cages help keep growing stems and fruit off the ground.</p>

<figure>
  <img src="/img/images/tomato-cage.jpg" alt="Tomato plant growing inside a wire cage">
  <figcaption>A wire cage supporting a mature tomato plant.</figcaption>
</figure>

Search engines can use surrounding page content, captions, filenames, and alternative text together when interpreting an image. :contentReference[oaicite:5]{index=5}

Specify Image Dimensions

The width and height attributes can tell the browser the image's intrinsic dimensions before the image finishes loading.

<img src="/img/images/tomato-plant.jpg"
     alt="Tomato plant growing in a raised garden bed"
     width="800"
     height="533">

Providing dimensions helps the browser reserve the correct amount of space for the image and can reduce unexpected layout movement while the page loads. The displayed size can still be adjusted responsively with CSS.

The HTML Standard specifically allows image dimensions to be supplied with the width and height attributes so the browser can determine the space needed for the image. :contentReference[oaicite:6]{index=6}

Use Responsive Images

Responsive images allow the browser to select an appropriate image resource for different screen sizes or display conditions.

<img
  src="/img/images/tomato-plant-800.jpg"
  srcset="/img/images/tomato-plant-400.jpg 400w,
          /img/images/tomato-plant-800.jpg 800w,
          /img/images/tomato-plant-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Tomato plant growing in a raised garden bed"
  width="800"
  height="533">

The srcset attribute provides alternate image resources, while sizes provides information about the expected display size. Keep a normal src value as the fallback image URL. Google specifically recommends retaining a fallback src when responsive image markup is used. :contentReference[oaicite:7]{index=7}

Optimize Image Performance

Large image files can increase page loading time, especially on mobile devices or slower connections. Resize images appropriately and compress them without reducing visual quality more than necessary.

Choose an image format that suits the content and browser support required by the website. Common web formats include JPEG, PNG, WebP, SVG, and AVIF.

Google currently supports several common image formats in Search, including BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF, and recommends using a filename extension that matches the actual image type. :contentReference[oaicite:8]{index=8}

The objective is to provide an image that looks good while avoiding unnecessary file size.

Lazy Loading

The loading="lazy" attribute allows supporting browsers to delay loading an image until it is closer to the visible part of the page.

<img src="/img/images/garden-tools.jpg"
     alt="Hand trowel, pruning shears, and gardening gloves"
     width="800"
     height="533"
     loading="lazy">

Lazy loading can reduce the amount of image data initially downloaded on pages containing many images.

Images that are immediately visible near the top of a page may be more useful when loaded normally rather than delayed. Use lazy loading where it improves actual page performance instead of adding it automatically to every image.

Help Search Engines Discover Images

Images generally need to be accessible to search-engine crawlers before they can be considered for image search results. The webpage containing the image and the image resource itself should not be unintentionally blocked from crawling.

Using normal HTML image markup also helps crawlers locate image resources. For websites with large collections of images, an image sitemap can provide additional image URLs that search engines might otherwise have difficulty discovering. :contentReference[oaicite:9]{index=9}

An image sitemap is not necessary for every small website, but it can be useful for image-heavy sites, galleries, catalogs, and other collections where image discovery is especially important.

Linked Images

An image can be placed inside an <a> element to make the image a link. When an image is the only content of a link, its alternative text should communicate the purpose of that link.

<a href="/gardening/tomato-care.html">
  <img src="/img/images/tomato-plant.jpg" alt="Tomato care guide">
</a>

In this situation, the alternative text needs to function as meaningful link text for someone who cannot see the image. The HTML Standard requires the alternative text of image-only links to convey the purpose of the link. :contentReference[oaicite:10]{index=10}

Google can also use image alternative text as anchor text when an image functions as a link. :contentReference[oaicite:11]{index=11}

Common Image SEO Mistakes

Image SEO Example

The following example combines descriptive HTML content, a meaningful filename, alternative text, a caption, dimensions, and lazy loading.

<article>
  <h1>Growing Tomatoes in Containers</h1>

  <p>Tomato plants can grow successfully in large containers when they receive enough sunlight, water, and support.</p>

  <figure>
    <img src="/img/images/container-grown-tomato-plant.jpg"
         alt="Mature tomato plant growing in a large patio container"
         width="800"
         height="533"
         loading="lazy">
    <figcaption>A tomato plant growing in a large container with a support cage.</figcaption>
  </figure>

  <h2>Choosing a Container</h2>
  <p>Use a container large enough to support the plant's root system and provide adequate drainage.</p>
</article>

Experiment with the image markup and surrounding content. The visible result demonstrates how the image, caption, heading, and related text work together as part of the page.

Best Practices

• Use standard HTML image elements for meaningful webpage images.
• Choose short, descriptive filenames when practical.
• Write alternative text that communicates the image's purpose or information.
• Use an empty alt attribute for purely decorative images.
• Place images near content that relates to their subject.
• Use captions when they provide useful additional information.
• Provide image dimensions when possible to help stabilize page layout.
• Use responsive image techniques where different image sizes are useful.
• Resize and compress image files to balance quality and loading performance.
• Use lazy loading for appropriate off-screen images rather than automatically for every image.
• Make sure important images can be accessed by search-engine crawlers.
• Consider an image sitemap when image discovery is important on a large or image-heavy website.

Summary

Image SEO combines good HTML, accessibility, meaningful content, and efficient image delivery. Descriptive filenames, useful alternative text, relevant surrounding content, appropriate dimensions, responsive images, and optimized file sizes help visitors use images effectively and provide search engines with better information about them.

Image optimization should improve the webpage for people first rather than adding search terms mechanically. Next, we will look at canonical URLs and how they identify a preferred URL when similar or duplicate pages can be reached through multiple addresses.