Image SEO: A Practical Guide to Discovery, Accessibility and Speed

Image SEO connects four jobs: the image must help the page, remain accessible when it cannot be seen, be discoverable by search systems and load at the right quality without delaying the experience. Alt text matters, but it cannot repair an irrelevant image, blocked file or oversized hero.

The quick answer: optimize in this order

Classify the image before writing alt text

Every <img> needs an alt attribute, but it does not always need words. Empty alt="" tells assistive technology to ignore a decorative or redundant image; omitting the attribute can cause a filename or URL to be announced.

Write alt text for this page and this use

Alt text is contextual. The same photo can require different text on a team page, a case study or a decorative banner. Describe what a person needs to understand or do—not the filename, a list of keywords or the phrase “image of”.

For an image link, alt text acts like anchor text. Describe where the link goes rather than repeating visual details. The title attribute is not a substitute for alt text.

Make the image discoverable in real HTML

Google says it can find images in the src attribute of a standard <img>, including an <img> inside <picture>. It does not index CSS images. Use CSS backgrounds for decoration; use normal image markup for content, evidence and likely representative images.

If a JavaScript gallery hides the real URLs in data-src until interaction, verify the rendered HTML and crawler access. Important images should not depend on a click, login or blocked script before they exist.

Use stable filenames and one consistent file URL

Google describes filenames as a light clue—not a place to repeat keywords. Use short, descriptive names when practical, and keep the extension consistent with the actual format. If the same image appears on several pages, consistently reference the same URL so crawlers and browsers can reuse it.

Avoid changing an already indexed image URL only to improve its filename. The migration cost may outweigh the small naming benefit. For new assets, a predictable naming system makes ownership and maintenance easier.

Choose format by visual job—not fashion

Google currently supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF in image src. Browser support, visual quality, editing workflow and fallback needs still matter. There is no universal “best” format or file-size target.

Modern formats can reduce transfer size, but compare the actual output. Text-heavy screenshots may need lossless or near-lossless settings, while photographs can usually tolerate perceptual compression.

Size images for the rendered slot

CSS can make a 4,000-pixel image look 700 pixels wide, but the browser may still download the larger file. Generate a small set of useful candidates around real layout widths and device pixel density instead of dozens of arbitrary variants.

srcset lists available sources; sizes describes the expected rendered width. The browser then chooses a candidate using its viewport, density and network information. Use <picture> when you need explicit format choice or a genuinely different crop—not simply because it looks more advanced.

Reserve space before the file arrives

Set intrinsic width and height attributes, or otherwise provide a reliable aspect ratio, so the browser can reserve layout space. Responsive CSS can still scale the image fluidly. The HTML dimensions describe the source ratio; they do not force a fixed visual size.

A reserved box does not solve every layout shift. Test captions, consent-controlled embeds, galleries, ads and font changes around the image as part of the full page.

Treat the LCP image differently from later images

A likely Largest Contentful Paint image should be discoverable in the initial HTML, must not be lazy-loaded and should begin loading early. If measurement confirms it is the LCP candidate, fetchpriority="high" can help the browser prioritize it. Do not assign high priority to every image.

Preload is useful for a truly critical image that the browser cannot otherwise discover early, such as some CSS background cases. An ordinary <img> already visible in initial HTML may not need both preload and extra complexity. Use the Core Web Vitals guide to diagnose TTFB, resource delay, transfer duration and render delay rather than assuming compression is the only problem.

Lazy-load by position, not by habit

Native loading="lazy" can reduce initial work for offscreen images. It is not a badge to add to every <img>. Images visible on load—especially the LCP candidate—should not wait for layout and proximity calculations.

Avoid JavaScript lazy-loading patterns that replace src with nonstandard attributes unless the platform has a crawlable fallback. Test fast and slow connections, keyboard navigation and disabled JavaScript when relevant.

Place images where their context explains them

Google uses captions, image titles and nearby page text to understand the subject. A relevant image on a relevant landing page is stronger than a generic stock photo repeated across unrelated articles. The page title, main heading and body still need to explain the topic in text.

Do not lock the only important answer inside a screenshot. Search systems and assistive technology need visible text, and users need information they can copy, translate and resize.

Choose a representative image deliberately

Google selects previews automatically, but you can indicate a preferred image using relevant structured data such as primaryImageOfPage or an Article image, and with og:image. The image should be relevant, high quality and available on the visible page where appropriate.

Avoid using the same generic logo, an unrelated stock photo or an extreme aspect ratio as every page preview. Keep structured data consistent with visible reality through the structured data workflow, and review stale visuals through the content refresh workflow.

Use Image Sitemaps and CDN controls for discovery gaps

An Image Sitemap can expose image URLs that Google might not otherwise discover. It does not make an irrelevant image rank and it does not replace normal HTML. Include useful image URLs on canonical pages; keep generated, placeholder and private assets out.

Image Sitemaps can reference CDN domains. Google recommends verifying CDN ownership in Search Console so crawl issues can be reported. If a CDN changes URLs on every transformation or blocks bots, fix the delivery system before adding more Sitemap entries.

Track ownership, permission and licensing

SEO visibility does not grant permission to reuse an image. Record whether the file is original, client-provided, licensed stock, commissioned, public-domain or generated, along with the usage terms and source evidence.

For licensors and publishers, Google supports image rights information through structured data or IPTC photo metadata. Useful fields can include creator, credit, copyright notice, license and an acquire-license page. Retain critical rights metadata where required; stripping metadata for a few bytes can create legal and attribution problems.

Audit from template to individual asset

Measure image outcomes separately

In Search Console, the Image search type represents results from the Google Images tab. Segment by page, query, country, device and date; do not assume it measures every image shown inside standard web results or Discover.

Pair search data with real-user performance and business outcomes. An image can succeed by explaining a process, reducing support questions or improving conversion even when it earns no Image Search click.

Common image SEO mistakes

• Adding keywords to every alt attribute.
• Writing words for decorative images instead of using empty alt.
• Leaving informative images with no alt attribute.
• Using CSS backgrounds for key editorial images.
• Lazy-loading the LCP hero.
• Serving the original camera file in a small card.
• Using one desktop crop everywhere without checking mobile meaning.
• Preloading or assigning high priority to many images.
• Replacing every article preview with the same generic logo.
• Assuming an Image Sitemap can fix blocked or irrelevant images.
• Deleting rights metadata without checking legal and attribution needs.
• Measuring only file size and ignoring usefulness, accessibility and conversions.

Frequently asked questions

Does every image need written alt text?

Every <img> needs an alt attribute, but decorative and fully redundant images usually need empty alt="". Informative and functional images need a useful equivalent.

How long should alt text be?

There is no SEO character quota. Make it concise enough to understand the meaning or action in context; move complex detail into nearby visible text.

Should alt text include a keyword?

Use the natural words needed to describe the image. If the topic is genuinely part of the image, it may appear naturally; do not force or repeat keywords.

Are WebP and AVIF always better?

They often compress well, but the best output depends on the image, quality setting, browser support and production workflow. Test the actual visual and transfer.

What image size should I target?

There is no universal KB target. Set a performance budget based on the rendered slot, visual detail, number of images and real-user conditions.

Should the hero image be lazy-loaded?

Not when it is visible on load or likely to be LCP. Make it discoverable early and measure whether high fetch priority helps.

Does Google index CSS background images?

Google states that it does not index CSS images. Use standard HTML image elements for meaningful images you want discovered.

Do I need an Image Sitemap?

Use one when important images are difficult to discover or the site is image-heavy. It supplements, but does not replace, crawlable HTML and useful landing pages.

Can I use stock or AI-generated images?

Only when you have the right to use them and they genuinely help the page. Keep provenance and licensing records, and do not present generated evidence as a real customer, result or event.

How do I measure Image SEO?

Filter Search Console to Image search, then pair page and query data with field performance, accessibility review and the landing page’s business outcome.

Official references

• Google Search Central: Google Images best practices
• Google Search Essentials
• Google Search Central: Image license metadata
• web.dev: Responsive images
• web.dev: Image performance
• web.dev: Optimize Largest Contentful Paint
• web.dev: Browser-level image lazy loading
• W3C WAI: Alt decision tree
• MDN: The img element
• Ahrefs: Image SEO best practices
• Google Search Console API: Search Analytics query