How to Optimize Images for SEO — Google's Own Recommendations

1. Use descriptive file names

Google uses image file names as a signal for what the image is about. A file named IMG_4892.jpg tells Google nothing. blue-ceramic-coffee-mug.jpg tells Google exactly what the image is and matches search queries.

According to Google's Image SEO documentation:

"The filename can give Google clues about the subject matter of the image. For example, my-new-black-kitten.jpg is better than IMG00023.JPG."

Use hyphens to separate words (not underscores — Google treats underscores as word joiners). Keep it descriptive but short.

2. Write meaningful alt text

Alt text serves two purposes: it describes the image to screen readers (accessibility), and it is read by Googlebot as a text description of the image. Google's recommendation:

• Describe the image in plain language, as you would to someone who can't see it
• Include your primary keyword naturally — don't stuff it
• Don't start with "Image of..." or "Photo of..." — the <img> tag already signals it's an image
• Decorative images (dividers, icons) should have empty alt text (alt=""), not missing alt text

<!-- Bad -->
<img src="IMG_4892.jpg" alt="image" />
<img src="mug.jpg" alt="mug mug coffee mug best coffee mug" />

<!-- Good -->
<img src="blue-ceramic-coffee-mug.jpg" alt="Blue ceramic coffee mug with wooden handle" />

3. Use the right format

Google explicitly recommends modern formats in their performance guidance. The hierarchy for most use cases:

• AVIF — best compression and quality, but slow to encode. Use for large hero images if build time allows.
• WebP — 25–35% smaller than JPEG at equivalent quality. Supported in all modern browsers. The practical default for almost everything.
• JPEG — fallback for older browsers. Still fine for photography.
• PNG — only when you need lossless quality or a transparent background that WebP can't serve (rare in 2026).
• SVG — for icons, logos, and illustrations. Scales perfectly, tiny file size, infinitely scalable.

4. Compress before you publish

Page speed is a confirmed Google ranking factor. LCP (Largest Contentful Paint) — how long it takes for the biggest visible element (usually an image) to render — is one of the Core Web Vitals metrics Google uses in rankings. An uncompressed 4MB hero image will tank your LCP score.

Target file sizes:

• Hero images: under 200KB (ideally under 100KB for mobile)
• Thumbnail / card images: under 50KB
• Full-width blog images: under 300KB

5. Add width and height attributes

Not just for SEO — this prevents Cumulative Layout Shift (CLS), another Core Web Vitals metric. When you don't specify dimensions, the browser doesn't know how much space to reserve while the image loads. The page jumps around as images appear, which is penalised.

<!-- Browser can reserve exactly 800×600px before image loads -->
<img 
  src="product.webp" 
  alt="Blue ceramic mug" 
  width="800" 
  height="600"
  loading="lazy"
/>

6. Use lazy loading for below-fold images

Native lazy loading (loading="lazy") is now supported in all modern browsers. It tells the browser to skip downloading images that aren't visible in the viewport yet. This speeds up initial page load — which improves LCP — without any JavaScript.

Only skip it for your LCP image (the hero/banner). Mark that one with fetchpriority="high" instead so the browser downloads it immediately.

7. Use structured data for product and recipe images

If your page is a product listing or a recipe, adding image to your JSON-LD schema enables your images to appear in rich results in Google Search — not just in Google Images. This is significantly higher CTR territory.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Blue Ceramic Mug",
  "image": [
    "https://example.com/mug-front.webp",
    "https://example.com/mug-side.webp"
  ],
  "description": "Handmade blue ceramic coffee mug with wooden handle."
}
</script>

8. Submit an image sitemap

Google can discover images embedded in HTML, but images loaded via JavaScript or CSS background-image are often missed. An image sitemap guarantees discovery. You can extend your existing XML sitemap:

<url>
  <loc>https://example.com/blue-mug</loc>
  <image:image>
    <image:loc>https://example.com/mug-front.webp</image:loc>
    <image:title>Blue Ceramic Mug — Front View</image:title>
    <image:caption>Handmade blue ceramic mug with wooden handle</image:caption>
  </image:image>
</url>

References: Google — Image SEO best practices · web.dev — Core Web Vitals · Google — Image sitemaps