Google Images Statistics:
📸 20%+ of all Google searches happen in Google Images
📸 Google Lens: 12 billion+ visual searches/month
📸 Images appear in 30%+ of search results (image pack)

Page Performance Impact:
⚡ Images = 60-65% of page weight
⚡ Unoptimized images = LCP failures
⚡ Missing dimensions = CLS issues
⚡ No lazy loading = slow initial load

Google's Image Understanding Signals:

1. TEXTUAL CONTEXT
   - Alt text (most important)
   - Filename
   - Surrounding text
   - Caption
   - Page title & content

2. VISUAL ANALYSIS
   - Google Cloud Vision AI
   - Object detection
   - Text in image (OCR)
   - Similar image matching

3. STRUCTURED DATA
   - ImageObject schema
   - Product schema images
   - Article schema images

4. PAGE SIGNALS
   - Page relevance
   - Page authority
   - Site authority
   - Mobile-friendliness

Priority Order:
Alt Text > Filename > Surrounding Context > Visual AI

For EVERY Image:
☐ Descriptive filename (before upload)
☐ Proper alt text
☐ Correct format (WebP/AVIF)
☐ Appropriate compression
☐ Responsive sizing
☐ Lazy loading (below fold)
☐ Width & height attributes
☐ Relevant to content

BEFORE Upload - Rename Files!

❌ BAD:
- IMG_20261227_143022.jpg
- DSC0001.jpg
- image1.png
- screenshot.png

✅ GOOD:
- blue-running-shoes-nike-pegasus.jpg
- chocolate-cake-recipe-step-3.jpg
- seo-audit-checklist-infographic.png
- tokyo-shibuya-crossing-night.jpg

Rules:
1. Use hyphens, not underscores (blue-shoes not blue_shoes)
2. Lowercase only
3. Descriptive keywords
4. No special characters
5. Keep reasonably short (3-5 words)

Format Comparison:

| Format | Best For | Compression | Browser Support |
|--------|----------|-------------|-----------------|
| WebP | Most images | Excellent | 97%+ |
| AVIF | Photos | Best | 92%+ |
| JPEG | Photos (fallback) | Good | 100% |
| PNG | Transparency | Poor | 100% |
| SVG | Icons, logos | N/A (vector) | 100% |
| GIF | Simple animation | Poor | 100% |

2026 Recommendation:
Primary: WebP (best balance)
Progressive: AVIF (when supported)
Fallback: JPEG/PNG

Is it a vector graphic (logo, icon)?
├── YES → Use SVG
└── NO
    ├── Does it need transparency?
    │   ├── YES → WebP or PNG (fallback)
    │   └── NO → Continue
    └── Is it a photo?
        ├── YES → AVIF > WebP > JPEG
        └── NO (illustration, screenshot)
            └── WebP > PNG

Compression Guidelines:

JPEG/WebP Quality Settings:
- Hero images: 80-85%
- Content images: 70-80%
- Thumbnails: 60-70%

Target File Sizes:
- Hero images: < 200KB
- Content images: < 100KB
- Thumbnails: < 30KB
- Icons: < 10KB

Tools for Compression:
- Squoosh (web): squoosh.app
- ImageOptim (Mac): imageoptim.com
- ShortPixel (WordPress): shortpixel.com
- TinyPNG (web): tinypng.com
- Sharp (Node.js): npm install sharp

Command Line (Sharp):
npx sharp-cli input.jpg -o output.webp --quality 80

<!-- Basic Responsive Image -->
<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
  alt="Description of image"
  width="1200"
  height="800"
  loading="lazy"
/>

<!-- With Modern Format Fallback -->
<picture>
  <source
    srcset="image-400.avif 400w, image-800.avif 800w, image-1200.avif 1200w"
    sizes="(max-width: 600px) 400px,
                 (max-width: 900px) 800px,
                 1200px"
    type="image/avif"
  />
  <source
    srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
    sizes="(max-width: 600px) 400px,
                 (max-width: 900px) 800px,
                 1200px"
    type="image/webp"
  />
  <img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
              (max-width: 900px) 800px,
              1200px"
    alt="Description"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

sizes="(max-width: 600px) 400px,
       (max-width: 900px) 800px,
       1200px"

Meaning:
- If viewport ≤ 600px → Display image at 400px width
- If viewport ≤ 900px → Display image at 800px width
- Otherwise → Display image at 1200px width

Browser then picks best srcset option
based on display size AND device pixel ratio

Alt Text Purpose:
1. Accessibility (screen readers)
2. SEO (Google understanding)
3. Context when image fails to load

Formula:
[Object/Subject] + [Action/State] + [Context if relevant]

Examples:

Photo of product:
❌ "shoes"
❌ "blue shoes image"
✅ "Blue Nike Pegasus running shoes on white background"

Infographic:
❌ "infographic"
✅ "SEO audit checklist infographic showing 10 steps"

Screenshot:
❌ "screenshot"
✅ "Google Search Console performance report dashboard"

Person/Portrait:
❌ "person"
✅ "Dr. Sarah Johnson, cardiologist, in her clinic office"

DO:
✅ Be specific and descriptive
✅ Include relevant keywords naturally
✅ Keep under 125 characters (screen reader limit)
✅ Describe what's IN the image
✅ Consider user intent

DON'T:
❌ Start with "Image of" or "Picture of"
❌ Keyword stuff
❌ Use filename as alt text
❌ Leave alt empty (unless decorative)
❌ Be vague ("nice view")

Special Cases:

Decorative Images:
<img src="divider.png" alt="" role="presentation">

Complex Infographics:
<img src="chart.png"
     alt="Sales growth chart"
     aria-describedby="chart-description">
<p id="chart-description">
  Detailed description of chart data...
</p>

Linked Images:
<a href="/products/shoes">
  <img src="shoes.jpg" alt="Shop running shoes collection">
</a>
(Alt describes link destination)

E-commerce Product:
"[Brand] [Product Name] in [Color] - [Key Feature]"
Example: "Nike Air Max 270 in Black - Cushioned running shoe"

Recipe Images:
"[Dish Name] - [State/Stage]"
Example: "Chocolate lava cake with molten center on white plate"

How-to/Tutorial:
"Step [#]: [Action being performed]"
Example: "Step 3: Applying primer coat to wooden surface"

Travel/Location:
"[Landmark/Location] in [City/Country] - [Time/Season if relevant]"
Example: "Eiffel Tower in Paris illuminated at night"

Charts/Graphs:
"[Chart type] showing [what data represents]"
Example: "Bar chart showing monthly website traffic growth from Jan-Dec 2026"

Portraits/People:
"[Name], [Title/Role] - [Context]"
Example: "John Smith, CEO of Tech Corp, speaking at conference"

<!-- Native Browser Lazy Loading (Recommended) -->
<img
  src="image.jpg"
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
/>

<!-- For iframes too -->
<iframe src="video.html" loading="lazy" width="560" height="315"> </iframe>

Browser Support: 95%+ (2026) When to Use: ✅ All images below the fold ✅ Images
in long-form content ✅ Gallery/grid images When NOT to Use: ❌ Above-the-fold
images (LCP candidates) ❌ Hero images ❌ First viewport content

<!-- Hero/LCP Image - Load Eagerly -->
<img
  src="hero.webp"
  alt="Hero image description"
  loading="eager"
  fetchpriority="high"
  width="1200"
  height="600"
/>

<!-- Preload for Critical Images -->
<head>
  <link
    rel="preload"
    as="image"
    href="hero.webp"
    imagesrcset="hero-400.webp 400w,
                     hero-800.webp 800w,
                     hero-1200.webp 1200w"
    imagesizes="100vw"
  />
</head>

LCP Optimization Checklist: ☐ Identify LCP element (usually hero image) ☐ Set
loading="eager" (or don't set loading) ☐ Set fetchpriority="high" ☐ Preload in
<head>
  ☐ Optimize file size ☐ Use CDN for fast delivery ☐ Avoid client-side rendering
  of LCP
</head>

<!-- For older browser support or advanced features -->
<img
  class="lazy"
  data-src="image.jpg"
  alt="Description"
  width="800"
  height="600"
/>

<script>
  // Intersection Observer approach
  const lazyImages = document.querySelectorAll(".lazy");

  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        imageObserver.unobserve(img);
      }
    });
  });

  lazyImages.forEach((img) => imageObserver.observe(img));
</script>

Libraries: - lazysizes.js (most popular) - lozad.js (lightweight) -
vanilla-lazyload (modern)

<!-- ALWAYS specify dimensions -->
<img src="image.jpg" alt="Description" width="800" height="600" />

Why This Matters: - Browser reserves space before image loads - Prevents content
jumping (CLS) - Core Web Vitals metric CSS Aspect Ratio (Modern):
<style>
  img {
    aspect-ratio: attr(width) / attr(height);
    width: 100%;
    height: auto;
  }
</style>

Or Explicit: .hero-image { aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
}

<!-- Padding-bottom technique -->
<div class="image-wrapper" style="padding-bottom: 56.25%;">
  <img src="image.jpg" alt="Description" loading="lazy" />
</div>

<style>
  .image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
  }

  .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

Common Aspect Ratios: - 16:9 = 56.25% padding - 4:3 = 75% padding - 1:1 = 100%
padding - 3:2 = 66.67% padding

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/photos/photo.jpg",
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "acquireLicensePage": "https://example.com/license",
  "creditText": "Photographer Name",
  "creator": {
    "@type": "Person",
    "name": "Photographer Name"
  },
  "copyrightNotice": "© 2026 Photographer Name"
}

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Running Shoes Nike Pegasus",
  "image": [
    "https://example.com/photos/shoes-front.jpg",
    "https://example.com/photos/shoes-side.jpg",
    "https://example.com/photos/shoes-back.jpg"
  ],
  "description": "Nike Pegasus running shoes...",
  "brand": {
    "@type": "Brand",
    "name": "Nike"
  }
}

Best Practice for Products:
- Include multiple images (different angles)
- High resolution (min 800x800)
- White background for main image
- Lifestyle images as secondary

{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Chocolate Cake",
  "image": [
    "https://example.com/cake-1x1.jpg",
    "https://example.com/cake-4x3.jpg",
    "https://example.com/cake-16x9.jpg"
  ]
}

Google's Recipe Image Requirements:
- Multiple aspect ratios recommended
- Minimum 1200px width
- Show finished dish
- Well-lit, appetizing

<?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/images/photo1.jpg</image:loc>
      <image:title>Photo Title</image:title>
      <image:caption>Photo caption describing the image</image:caption>
    </image:image>
    <image:image>
      <image:loc>https://example.com/images/photo2.jpg</image:loc>
      <image:title>Second Photo Title</image:title>
    </image:image>
  </url>
</urlset>

Tags Available:
- image:loc (required) - Image URL
- image:title (optional) - Image title
- image:caption (optional) - Image caption
- image:geo_location (optional) - Geographic location
- image:license (optional) - License URL

Recommended For:
✅ Large image galleries
✅ E-commerce product images
✅ Photography portfolios
✅ News/media sites
✅ Images loaded via JavaScript

Not Necessary For:
- Small sites with few images
- Images already in HTML
- Sites with good internal linking
- Decorative images

What Image CDN Does:
1. Automatic format conversion (WebP/AVIF)
2. On-the-fly resizing
3. Quality optimization
4. Global edge delivery
5. Caching

Popular Image CDNs:
- Cloudflare Images
- Cloudinary
- imgix
- ImageKit
- Bunny CDN

Example URL Transformation:
Original: /images/photo.jpg
CDN: cdn.example.com/photo.jpg?w=800&q=80&f=webp

Parameters:
- w=800 (width)
- h=600 (height)
- q=80 (quality)
- f=webp (format)

<!-- Cloudinary Example -->
<img
  src="https://res.cloudinary.com/demo/image/upload/
          w_800,q_auto,f_auto/sample.jpg"
  alt="Description"
  loading="lazy"
/>

Parameters: - w_800: Width 800px - q_auto: Automatic quality - f_auto: Automatic
format (WebP/AVIF if supported)

<!-- imgix Example -->
<img
  src="https://example.imgix.net/image.jpg?
          w=800&auto=format,compress"
  alt="Description"
/>

Benefits: ✅ No manual image processing ✅ Always optimal format ✅ Automatic
responsive images ✅ Fast global delivery

1. RELEVANCE
   - Alt text matches search query
   - Surrounding text relevance
   - Page topic alignment
   - Filename keywords

2. QUALITY
   - Image resolution (higher better)
   - Original content (not stock)
   - Professional appearance
   - Appropriate for query

3. PAGE AUTHORITY
   - Domain authority
   - Page authority
   - Backlinks to page
   - Overall site quality

4. FRESHNESS
   - Recently published/updated
   - Current information
   - Not outdated visuals

5. USER ENGAGEMENT
   - Click-through rate from Images
   - Time on page after click
   - Bounce rate

Content Strategy:
1. Create original images
2. Use unique photos (not overused stock)
3. Make images shareable
4. Create infographics for complex topics
5. Include images in comprehensive guides

Technical Optimization:
1. Descriptive alt text with keywords
2. Relevant filenames
3. Fast loading (optimized size)
4. Mobile-friendly display
5. Proper structured data

Page Optimization:
1. Images near relevant text
2. Descriptive captions
3. High-quality surrounding content
4. Internal links to image-rich pages

Main Product Image:
- White/neutral background
- High resolution (min 1000x1000)
- Show entire product
- Consistent styling across catalog
- Multiple angles in gallery

Image Requirements:
☐ Main image (front view)
☐ Back view
☐ Side view(s)
☐ Detail/close-up shots
☐ Scale reference
☐ In-use/lifestyle image
☐ 360° view (if possible)

Technical Specs:
- Format: WebP with JPEG fallback
- Size: 1000-2000px on longest side
- Quality: 80-85%
- File size: < 200KB each
- Aspect ratio: Consistent (usually 1:1)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Blue Running Shoes",
  "image": [
    "https://example.com/shoes-front-1000x1000.jpg",
    "https://example.com/shoes-side-1000x1000.jpg",
    "https://example.com/shoes-back-1000x1000.jpg",
    "https://example.com/shoes-detail-1000x1000.jpg",
    "https://example.com/shoes-lifestyle-1000x1000.jpg"
  ],
  "description": "Comfortable blue running shoes...",
  "sku": "SHOE-BLUE-001",
  "brand": {
    "@type": "Brand",
    "name": "Nike"
  },
  "offers": {
    "@type": "Offer",
    "price": "129.99",
    "priceCurrency": "USD"
  }
}

File Optimization:
☐ All images in modern format (WebP/AVIF)
☐ Images properly compressed
☐ No oversized images (check file sizes)
☐ Appropriate dimensions for display
☐ Descriptive filenames

Alt Text:
☐ All images have alt text
☐ Alt text is descriptive, not generic
☐ No keyword stuffing
☐ Decorative images have empty alt
☐ Alt matches image content

Loading Performance:
☐ Lazy loading implemented below fold
☐ Above-fold images load eagerly
☐ LCP image optimized
☐ Width/height attributes present
☐ No CLS from images

Technical:
☐ Images in sitemap (if applicable)
☐ No broken image links
☐ Images crawlable (not blocked)
☐ Responsive images implemented
☐ CDN configured (if applicable)

Recommendation:
1. Primary: WebP (97%+ browser support)
2. Progressive: AVIF (better compression, 92% support)
3. Fallback: JPEG/PNG (100% support)

Implementation:
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Why WebP First:
- Excellent compression (25-35% smaller than JPEG)
- Supports transparency
- Near-universal support
- Widely tooling support

Why Consider AVIF:
- Even better compression (50% smaller than JPEG)
- Excellent quality at low file sizes
- Growing support

Guidelines:
- Minimum: 5-10 words yang bermakna
- Ideal: 10-20 words
- Maximum: 125 characters (screen reader limit)

Examples:
Too Short: "shoes" ❌
Good: "Blue Nike Pegasus running shoes on white background" ✅
Too Long: "This is a beautiful pair of blue colored Nike brand
          Pegasus model running shoes designed for marathon
          runners and joggers placed on a clean white
          background for product photography..." ❌

Rule: Describe what's important, skip the fluff

Google's Statement:
"We support lazy loading... we can see lazy-loaded images"

Requirements for SEO-Safe Lazy Loading:
1. Use native loading="lazy" (best)
2. Images must be in HTML (not only JavaScript)
3. Proper <noscript> fallback for JS-based
4. Don't lazy load above-fold content
5. Ensure images are in sitemap or linked

Best Practice:
- Above fold: loading="eager" or no attribute
- Below fold: loading="lazy"
- LCP image: Never lazy load

Google renders JavaScript, but native lazy loading
is most reliable for indexing.

Google Discover Image Requirements:
- Minimum: 1200px wide
- Recommended: 1200px or larger
- Enable large image previews in robots.txt
- High-quality, engaging visuals
- Original images preferred

Robots.txt Setting:
User-agent: Googlebot
Allow: /

# Enable large image previews for Discover
# Don't use: nosnippet, max-image-preview:none

Meta Tag (Optional):
<meta name="robots" content="max-image-preview:large">

Content Tips:
- Use compelling hero images
- Original photography > stock photos
- Visually interesting compositions
- Relevant to article content

When Image Sitemap Helps:
✅ Large image galleries (photography, portfolio)
✅ E-commerce with many product images
✅ Images loaded via JavaScript
✅ Sites with image-focused content
✅ News/media sites

When Not Necessary:
- Small sites (< 100 pages)
- Images already in HTML and well-linked
- Standard blog with few images per post
- Images not a traffic goal

Alternative:
If images are in HTML with good alt text
and the pages are in your regular sitemap,
Google will find them through normal crawling.

Priority Order:
1. Proper alt text (most important)
2. Images in HTML
3. Good internal linking
4. Image sitemap (bonus for large catalogs)

Today:
☐ Check current image formats (convert to WebP)
☐ Audit alt text on top 10 pages
☐ Add width/height to images missing dimensions

This Week:
☐ Implement responsive images for key templates
☐ Set up lazy loading properly
☐ Optimize LCP images on homepage

This Month:
☐ Full image audit (all pages)
☐ Create image optimization workflow
☐ Consider image CDN if high traffic

Ongoing:
☐ Optimize images before upload
☐ Write alt text at content creation
☐ Monitor Core Web Vitals