Image SEO: How to Optimize Images for Search in 2026

Images are often the largest payload on a page and the most direct contributor to Core Web Vitals failures — yet image SEO is routinely neglected beyond adding an alt attribute. Done well, image optimisation simultaneously improves search rankings, Core Web Vitals scores, page load speed, and Google Image Search visibility.

Here is the complete image SEO checklist.

Alt text: the foundational image SEO signal

The alt attribute on an <img> tag tells both screen readers and search engine crawlers what the image depicts. It's the primary text signal Googlebot uses to understand image content. Without alt text, an image is invisible to Googlebot's content analysis.

What makes a good alt attribute:

• Descriptive of what the image actually shows: alt="Chocolate chip cookies cooling on a wire rack" rather than alt="cookies" or alt="image1"
• Includes relevant keywords naturally — not stuffed: alt="Next.js project folder structure screenshot" rather than alt="next js nextjs nextjs tutorial screenshot"
• Functional images (buttons, icons, logos) describe the function: a search icon alt="Search", not alt="magnifying glass"
• Decorative images that add no content should have an empty alt: alt="" — this tells screen readers to skip them and tells Googlebot not to waste crawl budget on them

What to avoid: keyword-stuffed alt text (alt="best seo tool seo audit seo checker seo site"), generic filler (alt="image", alt="photo", alt="banner"), and missing alt attributes altogether. All three are flagged by the DeepSEOAnalysis audit.

Descriptive file names

Googlebot reads image file names as a secondary signal for image content. blue-running-shoes-womens.webp tells Google far more than IMG_4821.jpg or product-image-3.png.

The convention: lowercase, hyphen-separated, descriptive keywords, the file extension matching the actual format. Apply this when saving images from a camera or design tool, and rename existing images when the opportunity arises (update src references when renaming).

Image formats: WebP and AVIF

Next-gen image formats reduce file sizes significantly compared to JPEG and PNG:

• WebP — typically 25–35% smaller than JPEG at equivalent visual quality. Supported by all modern browsers. The recommended default for photographic images.
• AVIF — typically 35–55% smaller than JPEG at equivalent quality. Better compression than WebP, particularly on photographic content. Browser support is now excellent (Chrome, Firefox, Safari).
• SVG — for vector images (icons, logos, illustrations) — infinitely scalable and typically much smaller than a rasterised PNG version of the same image.

Serving JPEG or PNG when WebP or AVIF is available is the single largest missed file-size reduction on most sites. Use the <picture> element to serve AVIF with WebP fallback:

<picture>
  <source type="image/avif" srcset="hero-image.avif">
  <source type="image/webp" srcset="hero-image.webp">
  <img src="hero-image.jpg" alt="Description of the hero image" width="1200" height="630">
</picture>

Responsive images with srcset

Serving a 1200px-wide image to a mobile device with a 390px viewport is wasteful — the browser downloads far more pixels than it displays, inflating page weight and worsening LCP on mobile.

The srcset and sizes attributes tell the browser which image variant to download based on the viewport width:

<img
  src="product-hero-800.webp"
  srcset="
    product-hero-400.webp 400w,
    product-hero-800.webp 800w,
    product-hero-1200.webp 1200w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="Blue leather running shoes, side view"
  width="800"
  height="600"
>

Frameworks handle this automatically: Next.js <Image> component generates srcset and serves WebP/AVIF by default; Nuxt <NuxtImg> does the same.

Width and height attributes: required for CLS

Every <img> tag should have explicit width and height attributes matching the intrinsic dimensions of the image. Without them, the browser doesn't know how much space to reserve while the image loads — the page layout shifts when the image arrives, causing Cumulative Layout Shift (CLS) failures.

<img src="article-thumbnail.webp" alt="..." width="600" height="400">

The width and height don't have to match the rendered CSS size — they just need to reflect the correct aspect ratio. The browser uses them to pre-allocate layout space.

Lazy loading vs fetchpriority

Lazy loading (loading="lazy") tells the browser to defer downloading an image until it's near the viewport. Use it for all below-the-fold images. It reduces initial page weight and speeds up page load for long pages.

Critical: never use loading="lazy" on above-the-fold images. Lazy loading the LCP image is one of the most common causes of poor LCP scores — the browser doesn't start downloading the image until it's needed, adding hundreds of milliseconds to LCP.

fetchpriority="high" tells the browser to download an image with high priority, starting the download earlier in the page loading waterfall. Use it on the LCP image (typically the hero or above-the-fold product image). It's the simplest single fix for LCP:

<!-- Hero image / LCP candidate -->
<img
  src="hero.webp"
  alt="..."
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="630"
>

<!-- Below-the-fold images -->
<img src="section-image.webp" alt="..." loading="lazy" width="800" height="400">

ImageObject structured data

ImageObject JSON-LD provides machine-readable metadata about images — improving Google Image Search eligibility and AI Overview image citations. The most impactful implementation is including ImageObject as the image property within Article and Product JSON-LD, rather than using a bare URL string:

{
  "@type": "Article",
  "headline": "Article Title",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/article-image.webp",
    "width": 1200,
    "height": 630,
    "description": "Screenshot showing the SEO audit dashboard with scores for LCP and CLS",
    "creditText": "DeepSEOAnalysis",
    "license": "https://creativecommons.org/licenses/by/4.0/"
  }
}

The creditText and license fields tell Google whether the image is freely usable — affecting its appearance in filtered Image Search results and AI Overview image citations.

Image SEO checklist

1. All <img> elements have descriptive, non-keyword-stuffed alt attributes
2. Decorative images have alt=""
3. Image file names are descriptive and hyphen-separated
4. All images served in WebP or AVIF format (JPEG/PNG only as fallback)
5. srcset and sizes attributes serve appropriately sized images per viewport
6. All images have width and height attributes matching their aspect ratio
7. Above-the-fold / LCP image has fetchpriority="high" and loading="eager"
8. All below-the-fold images have loading="lazy"
9. ImageObject schema used as the image property in Article/Product JSON-LD
10. Total image payload under 500KB for above-the-fold content

Run the DeepSEOAnalysis free audit to check alt text coverage, fetchpriority on the LCP element, width/height attribute presence for CLS prevention, image format usage, and ImageObject schema completeness — with specific fix recommendations for each.

---

Frequently asked questions

Does Google use alt text as a ranking factor?

Alt text is a direct ranking signal for image search — it's the primary text signal Googlebot uses to understand what an image shows and to decide which image queries it's relevant for. For web search (page rankings), alt text contributes to the overall topical relevance of the page — a page with images alt-describing the topic reinforces the keyword signal of the text content. Missing alt text is primarily an accessibility issue and a Google Image Search visibility issue; it has a smaller but real impact on web search relevance.

What is the difference between lazy loading and fetchpriority?

loading="lazy" defers image download until the image is near the viewport — use it on all below-the-fold images to reduce initial page weight. fetchpriority="high" signals that the browser should start downloading the image earlier, with higher priority — use it only on the LCP image (above-the-fold). These are complementary: lazy load everything below the fold, high-priority the LCP image above the fold. Never use loading="lazy" on the LCP image.

Should I use WebP or AVIF?

AVIF offers better compression than WebP (typically 35–55% vs 25–35% smaller than JPEG), but the most important step is moving off JPEG/PNG to either next-gen format. Use AVIF as the first <source> type in a <picture> element with WebP as fallback. Both are supported in all modern browsers. If your image CDN or hosting platform doesn't yet support AVIF, WebP alone is sufficient — the step from JPEG to WebP is the largest size reduction.

How does image SEO affect Core Web Vitals?

Images are the most common LCP element — the single largest above-the-fold element on most pages is a hero image or product photo. Optimising that image (format conversion to WebP/AVIF, fetchpriority="high", preload link in <head>, responsive srcset for mobile) is the most impactful LCP improvement for image-heavy pages. Images without width/height attributes cause CLS. Large image payloads slow the overall page and contribute to INP indirectly by occupying network bandwidth needed for other resources.