Image SEO

Image SEO lets an image be found and lets it help the page. On one image, set:

• A descriptive file name, like pricing-chart.png, not IMG_1234.png.
• An alt attribute that describes the image, accessibility first: alt="Line chart of Pro vs Team usage".
• Width and height attributes so the layout does not shift.
• A modern format: AVIF or WebP, with a JPEG or PNG fallback only if needed.
• A size that fits the viewport and device. Serve the smallest that looks clean.
• Lazy loading below the fold, and do not lazy load images above the fold. Give the first image priority.
• Structured data that includes the image property on the thing the page is about.
• For large libraries, an image sitemap or images listed in your XML sitemaps.
• A caption or clear surrounding text that says what the image shows.

On a page like /guides/getting-started, that means the hero image loads fast, has width and height, and the alt says what is shown, not why it exists.

Images often decide your Core Web Vitals. The largest image is often the LCP element. Aim for LCP under 2.5 seconds, CLS under 0.1, INP under 200 ms.

• Compress AVIF or WebP until artifacts show, then back off one step.
• Export multiple widths and use srcset and sizes so the browser picks the smallest fit.
• Inline or preload only the single above the fold hero if it is your LCP image. Do not overuse it.
• Set width and height on every img to prevent layout shift.
• Do not ship text as an image. Use real text for headings and buttons.

A fixed /pricing will load its plan grid screenshots as 800w WebP on mobile and 1600w on desktop, with CLS steady at 0.0 because sizes are set.

• In Search Console, Performance, switch Search type to Image to see queries and clicks from Google Images.
• Still in Performance, on Web type, sort queries that include words like "diagram", "logo", "screenshot", to spot image-driven intent.
• Open a page in PageSpeed Insights. Check LCP element type. If it is an image, fix format, size, and priority first.
• Track Core Web Vitals over 28 days. Watch the LCP trend after you change hero images.
• Crawl a sample page in your browser DevTools, Network tab. Confirm the chosen srcset candidate size and format match the device.

Expect Google Images to send traffic to some pages and almost none to others. The speed gains matter to all pages either way.

Google Images can send discovery traffic on visual queries. Product photos, diagrams and step by step shots do well. Stock-looking art rarely does.

• Use unique visuals. A labelled diagram on /product/architecture beats a generic illustration.
• Put the image near the relevant heading and paragraph. The text tells Google what it shows.
• Use structured data with the image property on Product, Article or SoftwareApplication as fits the page.
• Use a clean, readable image URL. Place product photos under /images/products/ where you can.

• Shipping only PNGs or JPEGs when AVIF or WebP would cut size a lot.
• Lazy loading the hero image, which delays LCP.
• Missing width and height, which causes layout shift and hurts CLS.
• Serving a 3000px wide image into a 360px viewport.
• Relying on captions alone. The paragraph above or below should also say what is shown.