Image SEO: Complete Guide to Optimizing Images for Google (2026)

1. File Size and Core Web Vitals

Image file size is the single largest factor in page load speed for most websites. Google's Core Web Vitals — specifically LCP (Largest Contentful Paint) and INP — are direct ranking factors. If your hero image is a 2 MB JPEG, it is almost certainly causing your LCP to fail.

Google's target is LCP under 2.5 seconds on a mobile connection. For a typical hero image, this means the image itself must be under 150–300 KB, depending on your server response time and other page resources.

Compress images for free — reduces JPEG, PNG, and WebP to the target ranges above with a quality slider.

2. Alt Text — What Google Actually Reads

Alt text (the alt attribute on <img> tags) is the primary signal Google uses to understand image content. It is also read by screen readers for visually impaired users.

3. File Names — How to Name Image Files for SEO

Google reads file names as a secondary signal about image content. A file named DSC_4521.jpg tells Google nothing. white-leather-sneakers-side-view.jpg is descriptive and keyword-relevant.

4. Image Dimensions and Responsive Images

Serving images at the correct display size is critical for performance. If your page displays a thumbnail at 300px wide but you serve a 2000px image, the browser downloads 40× more data than needed.

The srcset attribute lets you serve different image sizes based on the viewport and screen density:

<img
  src="product-400.jpg"
  srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Product description"
  width="800"
  height="600"
/>

Always include explicit width and height attributes to prevent Cumulative Layout Shift (CLS) — a Core Web Vital Google uses directly in rankings.

5. Next-Gen Formats: WebP and AVIF

Google PageSpeed Insights flags JPEG and PNG files with the warning "Serve images in next-gen formats." This is a direct instruction to convert to WebP or AVIF.

6. Lazy Loading

Adding loading="lazy" to below-the-fold images tells the browser not to load them until the user scrolls near them. This reduces initial page weight and improves LCP for the images that matter most.

<!-- Hero image — do NOT lazy load (it's the LCP element) -->
<img src="hero.webp" alt="..." width="1200" height="600" />

<!-- Below-fold images — do lazy load -->
<img src="feature.webp" alt="..." width="800" height="500" loading="lazy" />

Never lazy-load the LCP image (usually the hero or above-fold image). Lazy loading the LCP image delays its rendering and hurts your LCP score.

7. Preloading the LCP Image

If your hero image is loaded via CSS background or a JavaScript framework, the browser discovers it late — hurting LCP. Add a preload hint to tell the browser to start fetching the LCP image immediately:

<link
  rel="preload"
  as="image"
  href="/hero.webp"
  type="image/webp"
/>

This is one of the highest-impact changes for LCP on image-heavy pages. Adding a preload for the LCP image typically improves LCP by 0.3–1.0 seconds on mobile.

8. Structured Data for Images

Schema.org structured data helps Google understand images in context and surface them in rich results like Google Images and knowledge panels.

9. Image Sitemap

Adding images to your sitemap helps Google discover images it might otherwise miss — especially images loaded by JavaScript or CSS. Use the image:image sitemap extension:

<url>
  <loc>https://example.com/products/red-sneakers</loc>
  <image:image>
    <image:loc>https://example.com/images/red-sneakers.webp</image:loc>
    <image:title>Red leather sneakers</image:title>
    <image:caption>Red leather running sneakers, side view</image:caption>
  </image:image>
</url>

Related Tools

• Compress image — reduce file size for better LCP
• JPG to WebP — convert to next-gen format
• PNG to WebP — convert PNG to smaller WebP
• Resize image — serve images at correct display dimensions
• Batch compress — optimize multiple images at once

Frequently Asked Questions