Image SEO

Concept

Images matter to search twice over. They can be found directly through image search, and they are usually the largest part of a page weight, which affects the performance signals that feed into ranking.

Everything that helps is markup you are already writing.

File names

Poor:  IMG_20260218_113045.jpg
       DSC0431.jpg
       image1.jpg
       Screenshot 2026-02-18 at 11.30.45.png

Good:  brass-table-lamp-workshop.jpg
       design-studio-drawing-boards.jpg
       riverside-college-main-gate.jpg

The file name is one of the signals used to understand what an image shows. Lower case, hyphen separated, descriptive, no spaces - a space becomes %20 and makes the URL unreadable.

Alt text

<!-- says nothing -->
<img src="lamp.jpg" alt="image">
<img src="lamp.jpg" alt="">                <!-- wrong here: this image is content -->

<!-- keyword stuffed, unusable when read aloud -->
<img src="lamp.jpg" alt="brass lamp buy brass lamp online cheap brass lamp india">

<!-- describes the image -->
<img src="brass-table-lamp-workshop.jpg"
     alt="A brass table lamp on a workbench beside hand tools"
     width="800" height="600">

Google guidance and accessibility guidance agree here: describe the image in natural language. Keyword stuffing is treated as spam and produces unusable speech output.

Decorative images still take alt="". An empty alt tells assistive technology to skip it; a missing attribute makes it read the file name.

Formats and compression

<picture>
  <source type="image/avif" srcset="/images/lamp.avif">
  <source type="image/webp" srcset="/images/lamp.webp">
  <img src="/images/lamp.jpg"
       alt="A brass table lamp on a workbench beside hand tools"
       width="1200" height="800" loading="lazy">
</picture>

Two habits do most of the work: export at roughly the size the image will be displayed, and compress. Eighty percent JPEG quality is usually indistinguishable from a hundred and about half the size.

Responsive images

<img src="/images/studio-800.jpg"
     srcset="/images/studio-400.jpg   400w,
             /images/studio-800.jpg   800w,
             /images/studio-1600.jpg 1600w"
     sizes="(max-width: 50rem) 100vw, 50vw"
     alt="Students working at drawing boards in the design studio"
     width="1600" height="900">

Sending a sixteen hundred pixel image to a three hundred and sixty pixel phone wastes most of the download on the connection least able to afford it, and directly damages the loading measurement.

Dimensions and layout shift

<img src="/images/hall.jpg" alt="An empty lecture hall" width="1600" height="900">

Without width and height, the browser reserves no space, and everything below jumps when the image arrives. Google measures this as Cumulative Layout Shift, which is a ranking input. Two attributes fix it entirely.

Lazy loading, correctly

<!-- hero: eager and high priority -->
<img src="/images/hero.jpg" alt="The main gate at sunrise"
     width="1600" height="900" fetchpriority="high">

<!-- everything below the fold -->
<img src="/images/gallery-1.jpg" alt="A stall selling brass lamps"
     width="800" height="600" loading="lazy">

Never lazy load the hero image. It is usually the Largest Contentful Paint element, and deferring it delays the exact thing being measured.

Context around the image

A search engine reads the text near an image to understand it. Surrounding prose, a caption and a nearby heading all contribute.

<figure>
  <img src="/images/design-studio-drawing-boards.jpg"
       alt="Students working at drawing boards in the design studio"
       width="1200" height="800" loading="lazy">
  <figcaption>
    The first year studio, where every student has a permanent drawing board.
  </figcaption>
</figure>

The figure and figcaption pairing makes the association explicit rather than leaving it to proximity.

An image sitemap

<url>
  <loc>https://example.edu/courses/design</loc>
  <image:image>
    <image:loc>https://example.edu/images/design-studio-drawing-boards.jpg</image:loc>
  </image:image>
</url>

Worth adding when images are loaded lazily or inserted by script, where discovery from the markup alone is unreliable.

Things that lose image traffic

• Images blocked in robots.txt. They cannot be indexed.
• Images only in CSS backgrounds. A background image has no alt text and is not indexed as content.
• Text inside images. Not searchable, not selectable, not translatable, and blurry when zoomed.
• Hotlinked images. They belong to someone else and can break without warning.
• Images behind a login. Not fetchable.

Structured data for images

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.edu/images/design-studio.jpg",
  "license": "https://example.edu/licence",
  "creditText": "Riverside College",
  "creator": { "@type": "Person", "name": "Meera Iyer" }
}
</script>

Licence metadata can produce a licensable badge in image search, which is worth having on original photography.

Important rules

• Every img needs an alt attribute; decorative ones take an empty value.
• File names are a signal. Name them descriptively.
• width and height prevent layout shift.
• Never lazy load the hero image.
• CSS background images are not indexed as content.
• Do not block image directories from crawling.

Common mistakes

• Camera default file names.
• Keyword stuffed alt text.
• Missing dimensions and a page that jumps as it loads.
• Lazy loading everything, including the hero.
• Four thousand pixel images displayed at eight hundred.
• Meaningful images used as CSS backgrounds.
• Text baked into images.

Best practices

• Rename files descriptively before uploading.
• Write alt text as a natural sentence.
• Serve AVIF or WebP with a JPEG fallback through picture.
• Use srcset and sizes for anything displayed at varying widths.
• Always set width and height.
• Lazy load below the fold, eager and high priority above it.
• Add captions and surrounding text that explain the image.

Practice

1. Rename ten images on a site from camera defaults to descriptive names.
2. Audit a page for missing alt attributes and missing dimensions.
3. Convert three images to WebP with a JPEG fallback and compare the transferred bytes.
4. Measure layout shift before and after adding image dimensions.