image-optimization

$27

Identify:

• Context: Hero, content page, product, trust badge, social preview

• Above vs below fold: LCP candidate (hero) vs lazy-loadable

• Image count: Single hero vs gallery, programmatic pages

1. Discovery & Indexing

Use HTML Image Elements

Google finds images in the src attribute of <img> (including inside <picture>). CSS background images are not indexed.

Do

Don't

<img src="puppy.jpg" alt="Golden retriever puppy" />

<div style="background-image:url(puppy.jpg)">

Image Sitemap

Submit an image sitemap to help Google discover images it might otherwise miss. Image sitemaps can include URLs from CDNs (other domains); verify CDN domain in Search Console for crawl error reporting.

Structure (from Google):

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

  <url>

    <loc>https://example.com/page</loc>

    <image:image>

      <image:loc>https://example.com/image.jpg</image:loc>

    </image:image>

  </url>

</urlset>

See xml-sitemap for sitemap index and submission. Image sitemap is an extension; can be standalone or combined with page sitemap.

2. Format & Performance

Supported Formats

Google supports: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF. Match filename extension to format.

Format

Best for

Notes

WebP

Photos, graphics

Smaller files, faster load; lossy + lossless; transparency, animation

AVIF

Modern browsers

Even smaller than WebP; check support

JPEG

Standard photos

Fallback; widely supported

PNG

Transparency, detail

Larger; use when needed

SVG

Icons, logos

Scalable; use <title> for inline SVG alt

GIF

Simple animation

First frame only for preview

Responsive Images

Use <picture> or srcset for different screen sizes. **Always provide fallback src**—some crawlers don't understand srcset.

<img

  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"

  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"

  src="image-800w.jpg"

  alt="Descriptive alt text">

Picture element (format fallback, e.g. WebP → PNG):

<picture>

  <source type="image/webp" srcset="image.webp">

  <img src="image.png" alt="Descriptive alt text">

</picture>

Data URI (Inline Images)

Base64 data URIs (data:image/...;base64,...) reduce HTTP requests but increase HTML size. Use sparingly for small icons; avoid for large images. See web.dev.

Resize & Compress

• Max width: Generally ≤2,500px; match container max-width

• Compression: WebP preferred; quality 75–85 for lossy; 72dpi for web

• LCP: Hero/above-fold images are LCP candidates; optimize aggressively

Lazy Loading

Use loading="lazy" only for below-fold images. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.

<img src="hero.jpg" alt="..." loading="eager">

<img src="below-fold.jpg" alt="..." loading="lazy">

3. Alt Text

Alt text improves accessibility (screen readers, low bandwidth) and SEO (Google uses it with computer vision to understand images). It also serves as anchor text if the image is a link.

Best Practices

Do

Don't

Useful, information-rich description

Keyword stuffing

Context of page content

"image of" or "photo of" (redundant)

Max ~125 characters (some assistive tech truncates)

Empty alt on meaningful images

Descriptive for functional images

Alt on purely decorative images (use alt="")

Examples (from Google):

• ❌ Missing: <img src="puppy.jpg"/>

• ❌ Stuffing: alt="puppy dog baby dog pup pups puppies..."

• ✅ Better: alt="puppy"

• ✅ Best: alt="Dalmatian puppy playing fetch"

Captions

Google extracts image context from captions and nearby text. Use <figcaption> or descriptive text near the image.

Use

Purpose

Topic relevance

Caption describes image subject; supports indexing

Featured Snippets

Images near answers with captions can capture thumbnail slots; see featured-snippet

Image Pack

Alt + caption + file name help Image Pack display; see serp-features

Inline SVG

Use <title> inside SVG for accessibility:

<svg aria-labelledby="svgtitle1">

  <title id="svgtitle1">Descriptive text for the SVG</title>

</svg>

4. File Names

Descriptive filenames give Google light clues about subject matter.

Do

Don't

apple-iphone-15-pink-side-view.jpg

IMG00353.jpg

Short, hyphen-separated

Generic: image1.jpg, pic.gif

Localize filenames for translated pages

Overly long filenames

5. Preferred Image (SERP Thumbnail & Discover)

When users search for keywords, optimized images can appear as thumbnails next to the page title and description in search results—enhancing visibility and CTR. Google also uses these images for Google Discover. Search Engine Land

Google selects thumbnails automatically from multiple sources. Influence selection via:

Schema: primaryImageOfPage

{

  "@context": "https://schema.org",

  "@type": "WebPage",

  "url": "https://example.com/page",

  "primaryImageOfPage": "https://example.com/images/cat.png"

}

Or attach image to main entity (e.g. BlogPosting, Article) via mainEntity or mainEntityOfPage.

Open Graph

<meta property="og:image" content="https://example.com/images/cat.png">

Preferred image rules: Relevant, representative; avoid generic (e.g. logo) or text-heavy images; avoid extreme aspect ratios; high resolution. See open-graph, twitter-cards for social specs.

Google Discover (if targeting Discover): ≥1200px wide; ≥300KB; 16:9 aspect ratio preferred; important content visible in landscape crop.

6. Page Context

• Title & meta description: Google uses page title and meta for image result snippets. See title-tag, meta-description.

• Placement: Put images near relevant text; page subject matter influences image indexing.

• Same URL: Reference the same image with the same URL across pages for cache efficiency and crawl budget.

7. Structured Data

Add structured data for rich results in Google Images (badges, extra info). Image attribute is required for eligibility. See schema-markup for ImageObject, Article, Product, Recipe, etc.

8. Specs by Context

Context

Priority

Notes

Hero

LCP, alt, no lazy

See hero-generator; above-fold, fast load

Article / Blog hero

1200–1600px wide; proportional height; 1200×630 for og:image

Same image for Schema, Open Graph, Twitter Cards; under 200 KB; WebP preferred; descriptive alt; set width/height to prevent CLS; use srcset/sizes for responsive; articles with relevant images get ~94% more views

Trust badges

Alt text

See trust-badges-generator; e.g. "Norton Secured"

Landing page

All above

See landing-page-generator Pre-Delivery Checklist

OG / Twitter

1200×630, 1200×675

See open-graph, twitter-cards

Platforms

Per-platform

X, LinkedIn, Pinterest—see platform skills

9. Opt-Out & SafeSearch

• Inline linking opt-out: Prevent full-sized image display in Google Images via HTTP referrer check (200 or 204). See Google docs.

• SafeSearch: Label pages for explicit content if applicable.

Output Format

• Alt text suggestions per image

• Captions (if applicable; snippet/Image Pack context)

• File name recommendations

• Format (WebP, fallback)

• Responsive (srcset/sizes or picture)

• Lazy loading (above-fold vs below-fold)

• Image sitemap (if many images)

• Preferred image (schema, og:image) for key pages

Related Skills

• core-web-vitals: LCP, INP, CLS; image optimization supports LCP

• xml-sitemap: Sitemap structure; image sitemap extension

• open-graph, twitter-cards: og:image, twitter:image; social preview

• schema-markup: ImageObject, Article/Product image

• content-optimization: Multimedia in content; defers image SEO to this skill

• featured-snippet: Images near answers + captions; snippet thumbnail

• serp-features: Image Pack; alt, captions, file names

• visual-content: Visual content for social, infographics; website images use this skill