Image Optimization Formats

AVIF, WebP, JPEG, PNG: choose formats, quality, and tooling so LCP images stay sharp and small.

beginner3 min readUpdated Aug 4, 2026

performance
images
avif
webp
lcp

Images often dominate page weight and LCP. Format choice (AVIF/WebP/JPEG/PNG), dimensions, and compression quality beat micro-optimizing JS while shipping a 4MB hero.

Docs: web.dev image optimization, MDN picture, LCP tactics.

Format cheat sheet

Format	Best for	Notes
AVIF	Photos, high compression	Excellent ratio; encode CPU higher
WebP	Photos/graphics	Wide support; safe default modern
JPEG	Photos fallback	Universal
PNG	Lossless UI, transparency	Heavy for photos
SVG	Icons, logos	Vectors; don’t embed huge rasters
GIF	Avoid for video	Use muted video/WebM

picture + type selection

<picture>
  <source type="image/avif" srcset="/hero.avif" />
  <source type="image/webp" srcset="/hero.webp" />
  <img
    src="/hero.jpg"
    width="1200"
    height="630"
    alt=""
    fetchpriority="high"
    decoding="async"
  />
</picture>

Browser picks first supported type. Always include dimensions to prevent CLS.

Right-size pixels

Don’t ship 4000px into a 400px CSS slot. Generate multiple widths — responsive images.

<img
  srcset="/img-400.webp 400w, /img-800.webp 800w, /img-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  src="/img-800.webp"
  width="800"
  height="500"
  alt=""
/>

Quality knobs

Visual QA at 1x/2x. Many photos are fine at lower quality than designers export from Figma. Automate with squoosh, Sharp, or CDN image products (?w=800&q=70&fm=avif).

LCP-specific

Discover hero in HTML (not lazy client fetch).
No loading="lazy" on LCP image.
fetchpriority="high" on the single LCP candidate.
Preconnect CDN origin if cross-origin.

SVG care

SVGs with embedded bitmaps or excessive nodes are still heavy. Optimize with SVGO; prefer icon sprites or inline small icons.

Interview out-loud

“I serve AVIF/WebP with JPEG fallback via picture, generate correct widths, set dimensions, and treat the LCP image as high priority never lazy-loaded. Format + dimensions beat random quality 100 exports.”

How this shows up in interviews

Be ready to define the metric or technique in one sentence, name one measurement approach (DevTools panel, web-vitals, or headers), and cite a concrete fix you would try first. Walk through a before/after: what the waterfall or flame chart showed, what you changed, and which percentile moved. Mention a tradeoff (complexity, caching correctness, or third-party business constraints) so the answer doesn’t sound like a blog checklist.

Production guardrails

Ship behind a flag when the change is risky, watch field p75 for the affected template for at least a few days, and keep a rollback path. Pair lab verification (throttled Performance/Network) with RUM so you don’t celebrate a Lighthouse-only win. Document the owner of any ongoing budget or third-party exception.

Further depth

Teams often under-invest in this topic until an incident or CWV regression. Schedule a one-hour drill: reproduce the failure mode in DevTools, list the top three mitigations for your stack, and file tickets with owners. Revisit after the next major feature that touches networking, rendering, auth, or third parties — those are the moments regressions land. Keep primary documentation links in the runbook so on-call is not searching chat history at 2am.

Concrete artifacts to leave behind: a short architecture note, a CI assertion or header snapshot, and a dashboard panel (lab or field) that would have caught the last bug. Teaching the rest of the team the mental model matters as much as the one-line fix.