Image SEO Best Practices: Alt Text, Formats, Speed (2026)

Image SEO best practices come down to two jobs. First, help Google find and understand your images: use real <img> elements, descriptive alt text and file names, and place images next to related text. Second, keep them fast: use modern formats, serve the right size, reserve space, and never lazy-load the main above-the-fold image.

Images matter in two ways. They can bring traffic of their own through Google Images and visual results. They are also often the heaviest thing on a page, so they decide whether your pages pass Core Web Vitals. This guide covers both sides, in the order most sites should fix them.

How does Google find and understand images?

Google finds images through the src attribute of HTML <img> elements and understands them through the text around them: alt text, file name, captions, nearby headings and the page itself. Images added only as CSS backgrounds are not indexed, so any image you want to rank must be a real <img> tag.

Google's image SEO best practices state it directly: Google can find images in the src attribute of the <img> element, but it doesn't index CSS images. This catches a lot of sites out. Hero banners, product photos in sliders and team photos are often set with background-image because it's easier to style. They look fine to visitors and are invisible to Google Images.

The same page tells you to place images near relevant text and on pages that are relevant to the image's subject. A photo of a walnut dining table on the dining table product page, under the heading and next to the description, has plenty of context. The same photo dropped into a generic "gallery" page with no text has almost none.

Two more discovery rules worth knowing:

• Use one URL per image. Google asks you to consistently reference an image with the same URL so it can cache and reuse it instead of fetching it many times. Cache-busting query strings that change on every deploy work against this.
• Don't hide images behind JavaScript Google can't run. If a gallery only injects images after a click or a script that fails to render, Google may never see them. Our guide to JavaScript rendering problems shows how to check what Googlebot actually renders.

How do you write alt text for SEO?

Good alt text describes what the image shows, in plain words, in the context of the page. Aim for a short phrase or sentence that would make sense read aloud to someone who can't see the image. Use a keyword only when it truly describes the picture, and never stuff a list of keywords into the attribute.

Google's guidance gives a clear example: "Dalmatian puppy playing fetch" is good alt text, while an empty attribute, a single word like "puppy", or a string of dog-related keywords is not. Alt text does two jobs at once. It's the main text signal Google uses to understand an image, and it's what screen readers announce, so writing for people also serves search.

Practical rules:

• Describe, don't label. "Oak dining table for six with black metal legs" beats "table" or "product image 3".
• Keep it short. One sentence is usually enough; long paragraphs belong in the caption or body text.
• Skip "image of" or "photo of". Screen readers already announce it as an image.
• Leave decorative images empty. Spacers, dividers and background patterns should use alt="" so they're ignored, not given invented descriptions.
• Don't duplicate the caption word for word. Use the caption for extra context and the alt for what's visible.
• Make linked images describe the destination. If an image is the only content of a link, its alt text acts as the link's anchor text.

Do image file names and formats matter?

Yes, both matter, though in different ways. A descriptive file name is a small relevance signal; the format mostly affects page speed. Rename camera files before upload, and serve images in a modern format such as WebP or AVIF with a sensible fallback.

Google recommends descriptive file names such as my-new-black-kitten.jpg rather than IMG00023.JPG. Use lowercase words separated by hyphens, describe the subject, and stop there. Renaming won't move rankings on its own, but it's free if you do it at upload time. Changing names on thousands of existing images is rarely worth it unless you're migrating anyway, since every renamed URL has to be re-crawled.

For formats, Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. Which one to use:

Quality still counts. Google notes that high-quality photos appeal to users more than blurry, unclear images. Compress, but stop before artifacts become visible, especially on product photos.

How do images affect page speed and Core Web Vitals?

On many pages the largest visible element is an image, so it often decides your Largest Contentful Paint (good is 2.5 seconds or less). Images without reserved space also cause layout shifts that hurt CLS (good is 0.1 or less). Oversized, unprioritized or wrongly lazy-loaded images are the most common cause of both.

Fix them in this order:

1. Serve the right size. Don't send a 4000-pixel photo into a 600-pixel slot. Resize on upload or use an image CDN, and offer several widths with srcset and sizes.
2. Always set width and height. web.dev's lazy-loading guide recommends adding width and height attributes to all <img> tags so the browser can reserve space and avoid layout shifts. CSS can still make the image responsive.
3. Never lazy-load the LCP image. The same guide says not to lazy-load images likely to be in the viewport when the page loads, especially LCP images, because the browser can't start loading them until it knows where they sit on the page.
4. Lazy-load everything below the fold with the native loading="lazy" attribute instead of a heavy script.
5. Prioritize the hero image. web.dev's Fetch Priority article explains that images normally start at low priority and that marking an important image with fetchpriority="high" lets it load at high priority straight away; its Google Flights example cut LCP from 2.6 s to 1.9 s. Treat it as a hint for one or two critical images, not every image.

A hero image that follows all five rules looks like this:

<img
  src="/img/oak-dining-table-800.webp"
  srcset="/img/oak-dining-table-400.webp 400w,
          /img/oak-dining-table-800.webp 800w,
          /img/oak-dining-table-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="533"
  alt="Oak dining table for six with black metal legs"
  fetchpriority="high">

Note the src fallback. Google's guidance asks you to always specify a fallback URL in src when you use srcset or <picture>, so every crawler and browser can load something.

Mobile matters most here, because Google indexes the mobile version of your pages. If your mobile template swaps images out or hides them, see our mobile-first indexing checklist.

Do you need an image sitemap?

An image sitemap is optional. It helps when Google might not find images through normal crawling, for example when they load through JavaScript or live on a CDN domain. For most sites with plain <img> tags in HTML, a regular XML sitemap plus crawlable pages is enough.

If you do use one, keep it simple. Google's image sitemap documentation now supports only two tags: <image:image> and <image:loc>. The old <image:caption>, <image:title>, <image:geo_location> and <image:license> tags are deprecated, so adding them does nothing. Images may be hosted on another domain such as a CDN, as long as you verify both domains in Search Console.

You can add image entries to your existing page sitemap rather than creating a separate file. Our XML sitemap guide covers what else belongs in it.

Which structured data and meta tags help images?

Structured data and Open Graph tags tell Google which image best represents a page. That image can then appear in rich results, Discover and social shares. For product, recipe and article pages, the image property is often required for rich result features, so missing it can cost you visibility.

Google's image guidance mentions the schema.org primaryImageOfPage property and the og:image meta tag as ways to state your preferred image, and notes that the image attribute is a required field for rich result badges. In practice:

• Product, Article, Recipe markup: include image with full, crawlable URLs, ideally in several aspect ratios.
• og:image: set it on every important page; it's used by social platforms and can guide Google's thumbnail choice.
• Discover: Google's Discover documentation recommends large images at least 1200 px wide, with more than 300,000 total pixels, enabled by the max-image-preview:large robots setting (or AMP). Without that setting, your articles may only get a small thumbnail.

Check that the robots meta tag on your pages doesn't restrict image previews by accident. A max-image-preview:none or noimageindex left over from a staging template will quietly remove your images from results. Also make sure robots.txt doesn't block your image folder or CDN; our robots.txt guide shows how to test that.

How do you find image SEO problems on your site?

Combine a crawler with Lighthouse and Search Console. The crawler finds missing alt text, broken image URLs, CSS-only images and oversized files across every page. Lighthouse shows which image is the LCP element and whether it's lazy-loaded or oversized. Search Console shows Image search traffic and Core Web Vitals by page group.

A quick audit routine:

1. Search Console → Performance → Search type: Image. See which pages already earn image clicks, and which important pages earn none.
2. Crawl the site and export images with empty or missing alt, very large file sizes, broken (4xx/5xx) image URLs and images without width/height.
3. Run Lighthouse on key templates (home, category, product, article). Look for "Largest Contentful Paint image was lazily loaded", "Properly size images" and "Serve images in next-gen formats".
4. Check rendered HTML on JavaScript-heavy templates to confirm images appear as <img> elements after rendering.
5. Validate structured data on product and article pages to confirm image is present and the URL loads.

If you'd rather not stitch these tools together, a free SEORecheck audit crawls your pages, flags missing alt text and broken images, and uses Lighthouse in a real browser to show which images slow your LCP, with example URLs from your own site. You can see what that looks like in the sample report.

What should you fix first?

Fix what blocks visibility and speed on your most valuable pages first, then work through site-wide hygiene. A lazy-loaded hero image on your top product template costs more than a thousand blog images with imperfect file names.

For a wider method of ranking fixes by impact and effort, see how to prioritize SEO fixes.

Key takeaways

• Use real <img> elements; Google doesn't index CSS background images.
• Write short, descriptive alt text for people first; use alt="" for decorative images.
• Name files descriptively at upload and prefer WebP or AVIF, with a src fallback for srcset.
• Set width and height on every image, lazy-load below the fold, and never lazy-load the LCP image.
• Image sitemaps only need <image:loc>; the caption, title, geo and license tags are deprecated.
• Add image to structured data and og:image, and allow max-image-preview:large for Discover.
• Start with the templates that drive revenue, not with renaming old files.