Image SEO: formats, alt text, and speed

Why it matters

Images can appear in Google Images, in text results, and in Discover, and Google says the general recommendations for getting them there are the same. They also carry more of a page's weight than almost anything else, so image choices affect speed and Core Web Vitals.

Alt text serves people first. It lets screen reader users know what a picture shows, and Google says it uses alt text along with computer vision and page content to understand an image's subject.

Key takeaways

• Put important images in img elements. Google says it does not index CSS images.
• Write alt text that describes the image for someone who cannot see it, without stuffing keywords.
• Use short descriptive filenames, a supported format, and the smallest size that still looks sharp.
• Keep the image next to relevant text, and do not lazy-load images that show on first view.

Step by step

1. Use img elements for content images

   Embed photos and diagrams with a standard img element, or a picture element with an img fallback. Google can find images in the src attribute, including inside a picture element. Keep CSS backgrounds for decoration only.

2. Write useful alt text

   Describe what the image shows and why it is on the page, in a short phrase. Google's example moves from a bare alt of puppy to the better Dalmatian puppy playing fetch. Avoid stuffing keywords, which Google says is a poor user experience and may look like spam. Leave alt empty for purely decorative images so screen readers skip them.

3. Name files clearly

   Rename files before upload, so my-new-black-kitten.jpg replaces IMG00023.JPG. Google says filenames give light clues about the subject. Reuse the same URL for the same image across pages so it can be cached.

4. Choose a supported format and size

   Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF in the src attribute. Resize images to the largest size they display at, compress them, and use srcset or picture to serve smaller files to smaller screens. Always include a src fallback.

5. Set dimensions and load order

   Add width and height to every image so the layout does not shift as it loads. Lazy-load images below the first screen with the browser's built-in loading attribute. Do not lazy-load the main image visible on arrival, since Google says that makes content take longer to appear.

6. Place images near relevant text

   Google extracts information about an image from the content around it, including captions and titles. Put the image next to the paragraph it supports and add a caption when it helps a reader. Choose a representative image for the page and avoid logos or images with text as the preview image.

7. Submit an image sitemap if needed

   If images load through JavaScript or Google may not find them, list them in an image sitemap or add image tags to your regular sitemap. Image URLs can sit on a CDN domain, as long as you verify that domain in Search Console and robots.txt does not block it.

Example image markup

<picture>
  <source type="image/webp" srcset="/images/hartford-boiler-install.webp" />
  <img
    src="/images/hartford-boiler-install.jpg"
    alt="Technician installing a new boiler in a Hartford basement"
    width="800"
    height="533"
    loading="lazy"
  />
</picture>

Questions