Describe and optimize images

Name and describe each image, then ship it small and lazy.

From seo-audit, Image Optimization checks.

Turn the images off

Press Images off, then rewrite the last alt.

No altBad
<img src="IMG_4832.jpg">

Screen reader "IMG underscore 4832 dot jpg, image"

Generic altBad
alt="image"

Screen reader "image, image"

Describes itGood

Screen reader 

<img src="/img/revenue-chart-2025.webp"
     alt="Bar chart of monthly revenue rising from $12k in January to $40k in June"
     width="1200" height="800">
<img src="/img/divider-wave.svg" alt="">

Name it, then compress it

Rename it, pick format and width, then Load both.

As exportedBad
IMG_4832.jpg
Format
JPEG, quality 95
Pixels
2400 × 1600
Size
1.8 MB
camera name · full-resolution JPEG
As shippedGood
Format
WebP, quality 80
Pixels
1200 × 800
Size
144 KB
    IMG_4832.jpg 9.4 s
    revenue-chart-2025.webp 0.7 s 

    cwebp -q 80 -resize 1200 0 IMG_4832.jpg -o revenue-chart-2025.webp
avifenc --min 20 --max 40 IMG_4832.jpg revenue-chart-2025.avif

    Lazy-load below the fold

    Scroll each feed and compare the request logs.

    EagerBad

      loading="lazy"Good

        <!-- LCP image: never lazy -->
<img src="harbor-at-dawn.webp" alt="…" width="1200" height="800" fetchpriority="high">
<img src="market-stalls.webp" alt="…" width="1200" height="800" loading="lazy" decoding="async">

        Why it matters, pros and cons

        Why it matters

        Alt text is the image for screen readers, crawlers and failed loads.

        Pros

        • Accessible and indexable in image search.
        • WebP is often 5-10× smaller.
        • Initial requests shrink to what is visible.

        Cons

        • Decorative images get alt="", not a description.
        • Never lazy-load the hero or LCP image.
        • Set width/height or lazy images shift layout.