Why this matters
Responsive modern formats cut bytes and improve LCP while preserving quality.
Provide AVIF/WebP fallbacks via <img srcset> with width/height attributes, meaningful sizes, and "loading=lazy" plus "decoding=async". Avoid shipping oversized PNG/JPEG when AVIF/WebP is supported.
Responsive modern formats cut bytes and improve LCP while preserving quality.
Side-by-side examples engineers can pattern-match during review.
<img src="/img/hero.png"><img src="/img/hero.avif" srcset="/img/hero.avif 1x, /img/hero@2x.avif 2x" width="1200" height="600" loading="lazy" decoding="async" alt="">loading="lazy" decoding="async"<img src="/img/hero.png">From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.
Serve text-based assets (JS, CSS, JSON, SVG) with Brotli (br) when the client sends "Accept-Encoding: br" and fallback to gzip. Always set "Vary: Accept-Encoding" and do NOT compress already-compressed formats (e.g., .png, .jpg, .woff2).