Skip to content
All guides
Phase 4: AI search SEO

Images and visual content for search

Seoga guide · Last reviewed · 7 min readImages and visual content for search

How to make pictures and videos easy for Google, AI tools and visitors to understand: descriptions, file names, sizes, formats, sitemaps and markup.

Why pictures matter for search

Pictures do three jobs for search. They can be found on their own, in Google Images, Google Lens and the image rows inside normal results. They help Google and AI tools understand the page they sit on. And they decide much of how fast a page loads, because they are usually the heaviest part of it.

Google can’t see a picture the way you do. It reads the words around it, the description you give it, its file name, and any markup. A product photo with no description, a meaningless file name and no text near it is close to invisible. The same photo, described well and placed next to the words it illustrates, is easy to understand and easy to find.

FoundCan Google reach it?A real <img> element, not a CSSbackground. Listed in the sitemap ifpictures matter to you.UnderstoodDoes Google know what it shows?A short description (alt text), a clearfile name, and related words close by.FastDoes it load quickly?The right size, a modern format, a fixedwidth and height, lazy-loading furtherdown.UsefulIs it worth showing?Your own photos of real products, placesand work, rather than stock pictureseveryone uses.FoundCan Google reach it?A real <img> element, not a CSSbackground. Listed in the sitemap ifpictures matter to you.UnderstoodDoes Google know what it shows?A short description (alt text), a clearfile name, and related words close by.FastDoes it load quickly?The right size, a modern format, afixed width and height, lazy-loadingfurther down.UsefulIs it worth showing?Your own photos of real products,places and work, rather than stockpictures everyone uses.
Check every important picture against these four questions. Most image problems are one of them.

Where to start

Most sites have hundreds of pictures, and you don’t need to fix them all at once. Start with the pictures on your most visited pages and your product or service pages, where a picture helps people decide. Crawl the site, or use your site builder’s media library, and list each picture with its page, its description and its file size. Sort the list by page importance, then by file size. The heavy pictures on busy pages and the products with no description are your first work. Decorative pictures and old blog images can wait for a later round.

Step 1: describe each picture

Alt text is a short description of a picture, written in the alt attribute of the image. Screen readers read it aloud to people who can’t see the picture, and search engines use it to understand what it shows. Write it for the person who can’t see the image:

Weak and better alt text for the same pictures
PictureWeakBetter
A product photoalt="IMG_1234.jpg"alt="Blue waterproof trail running shoe, side view"
A team photoalt="photo"alt="Our four fitters outside the shop on Market Street"
A chartalt="chart"alt="Sales rose from 120 to 310 orders between March and June"
A decorative line(a long description)alt="" (empty, so screen readers skip it)
  • Keep it short: one plain sentence or less. Very long descriptions are tiring to listen to.
  • Describe what is in the picture, not what you would like to rank for. A list of keywords is not a description.
  • Pictures that only decorate get an empty alt="". Pictures that carry meaning, such as products, people, charts and diagrams, need a real one.

In Seoga’s scan these show up as “pictures have no description”, “pictures’ descriptions are just their file names” and “pictures have vague descriptions”.

Step 2: name files well and place pictures near their words

Before uploading, rename the file to say what it shows: blue-trail-shoe-side.jpg rather than DSC0042.jpg. It is a small signal, but it is free. Then put the picture near the text it belongs to, with a caption if it helps people. A picture of a product sitting next to that product’s name and description is understood far better than the same picture in a gallery with no words.

Use a normal <img> element for pictures you want found. Pictures added as a CSS background are part of the design, and Google doesn’t index them as images.

Step 3: make pictures light

Heavy pictures are the most common reason pages load slowly, especially on phones. These steps also help your Core Web Vitals:

  1. Resize to the size shown. A photo shown 800 pixels wide does not need a 4,000-pixel file. In a Seoga scan: “pictures are shown much smaller than their files”.
  2. Compress, and use a modern format. WebP and AVIF are usually much smaller than JPEG or PNG at the same quality. Most site builders and image plugins can make them for you.
  3. Offer several sizes. With srcset, phones download a small copy and large screens a larger one.
  4. Set width and height. Give every image its width and height so the browser keeps space for it, and the page doesn’t jump as pictures arrive.
  5. Lazy-load pictures further down. Add loading="lazy" to pictures below the first screen, so they load only when the visitor scrolls. Never lazy-load the main picture at the top: it should load first.
A light, well-described picture
<img src="/img/blue-trail-shoe-800.webp"
     srcset="/img/blue-trail-shoe-400.webp 400w,
             /img/blue-trail-shoe-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     width="800" height="600" loading="lazy"
     alt="Blue waterproof trail running shoe, side view">

Step 4: show your own pictures

Stock photos appear on thousands of sites, so they tell Google and visitors nothing about you. Your own photos of your products, your premises, your staff and your finished work show that you are real and that you have done the thing you describe. They also give image search something only you have. This links closely to our guide on first-hand experience.

For diagrams and charts, add the main point in words too, in the caption or the text beside it. AI tools and screen readers read the words far more reliably than the picture.

Step 5: image sitemaps and markup

  • Image sitemap. If pictures matter to your business, as they do for shops, photographers and portfolios, list them in your sitemap so Google finds them even when they load in ways it can miss. Our guide to fixing robots.txt and the sitemap covers sitemaps in general.
  • Product markup. On product pages, the image field in Product markup tells Google which picture shows the product. See structured data.
  • Licence details. If you license your photos, Google can show a “Licensable” label when your image markup or the photo’s own data says where the licence is.

Videos

Videos follow the same rules. Give each important video its own page where it is the main thing, with a title and a written description, and ideally a transcript. Add VideoObject markup with the name, description, thumbnail and upload date. A video that sits only inside a social platform can still be found there, but a video on your own page, described in words, helps that page too.

Check what Google sees

In Search Console, URL Inspection shows the page as Google rendered it. If a picture is missing there, Google is missing it too, often because it loads only after a scroll or a click that Google doesn’t make.

Read next

See how your website doesA free check for Google and AI answers, in about a minute.
Check my site free