What is Image Optimization?

Image optimization: right bytes, right place, right time

Images often account for 50–70% of page weight on content-heavy sites. Image optimization is not a single slider in Photoshop—it is a system: pick efficient codecs, export correct dimensions, compress intelligently, mark up responsive delivery, cache at the edge, and describe content with alt text so Google Images and screen readers understand what you shipped.

For Technical SEO, optimized images attack Largest Contentful Paint (hero graphics), Cumulative Layout Shift (missing dimensions), and crawl bandwidth (faster fetches on image-rich templates).

The optimization stack

Skip any layer and you leave performance on the table.

Format selection guide

Use <picture> for progressive enhancement:

<picture>
  <source type="image/avif" srcset="/hero-800.avif 800w, /hero-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 1200px">
  <source type="image/webp" srcset="/hero-800.webp 800w, /hero-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 1200px">
  <img src="/hero-1200.jpg" alt="Analyst reviewing crawl coverage dashboard" width="1200" height="630" fetchpriority="high">
</picture>

Crawlers read alt and src on the <img> fallback—never omit them.

Responsive images: stop shipping desktop wallpapers to phones

Without srcset, a 3000×2000 master loads on every device—wasting mobile bandwidth and slowing render for crawlers using smartphone contexts.

<img
  src="/product-800.jpg"
  srcset="/product-400.jpg 400w, /product-800.jpg 800w, /product-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Stainless steel water bottle, 32oz"
  width="800"
  height="800"
>

sizes tells the browser which width slot applies at each breakpoint—critical for correct file pick.

Compression without visible damage

Lossy compression removes imperceptible detail:

• JPEG/WebP quality ~80 is a common starting point for photos.
• AVIF often beats WebP at same visual quality—test per asset class.
• Lossless PNG only when alpha quality demands it; consider WebP lossless.

Automate in CI: reject commits adding images over 200 KB without justification.

Dimensions and CLS

Always specify width and height (or aspect-ratio CSS) so layout reserves space before decode. CLS regressions hurt page experience rankings and user trust.

<img src="/chart.png" alt="Organic traffic trend Q1–Q3" width="640" height="360">

Filenames and structured data

SEO-adjacent optimizations:

• Descriptive filenames: crawl-budget-dashboard.webp not IMG_8842.webp.
• ImageObject in JSON-LD for articles and products.
• Open Graph og:image at least 1200×630 for share previews.

Optimization reduces og:image bytes too—faster social scrapes.

CDN and on-the-fly transformation

Image CDNs (Cloudinary, imgix, Cloudflare Images) resize by URL parameters:

https://cdn.example.com/photo.jpg?width=800&format=auto

Benefits: one master upload, infinite variants. Risks: uncached transforms cost money; set Cache-Control on transformed URLs.

Image optimization vs HTTP compression

Gzip and Brotli compress text responses—they do not replace image codecs. A Brotli-compressed JPEG is still a JPEG. Apply both layers: codec compression inside the file, transport compression for SVG and HTML.

Common mistakes

Measuring image optimization wins

• Lighthouse “Properly size images” and “Next-gen formats” audits.
• CrUX LCP field data before/after AVIF rollout.
• Total image bytes per URL in WebPageTest waterfall.
• Image search impressions in Search Console.

Set budgets: e.g., homepage total images < 500 KB transferred on 4G.

Crawl and index considerations

Image-heavy pages that load fast get crawled more completely within crawl budget limits. Alt text and surrounding copy help image understanding—optimization without semantics is half a job.

Googlebot smartphone rendering uses mobile viewport widths—your sizes attribute must reflect mobile layouts, not desktop-only CSS assumptions.

Workflow for content teams

1. Define per-template max widths (hero 1200px, card 400px).
2. Build script generating AVIF/WebP/JPEG sets.
3. Enforce alt text in CMS required fields.
4. Block publish if hero missing dimensions.
5. Quarterly audit top 100 landing pages for byte regression.

How Crawlox helps with image optimization

Crawlox reports image URLs, alt attributes, and missing dimensions discovered during site crawls—surfacing templates where unoptimized masters or empty alt text cluster. Prioritize those URLs for format migration and responsive markup before they dominate LCP regressions across thousands of product pages.