What is AVIF, WebP & Responsive Images?
Modern image formats and sizes served to match each device: AVIF or WebP instead of heavier legacy formats, with responsive variants so phones never download desktop-sized heroes. Smaller files mean faster largest-paint moments.
Example
A landing hero ships as AVIF for modern browsers with WebP fallback plus small, medium, and large widths, so a phone on mobile data downloads a fraction of what a desktop fetches.
What people get wrong
Uploading one giant PNG and letting CSS shrink it wastes every visitor’s bandwidth. Resize at build time, serve modern formats first, and reserve legacy formats for fallback only.
Frequently asked questions
Should every image be AVIF?
Serve AVIF first with WebP and legacy fallbacks behind it. Encoding costs rise with newer formats, so generate variants once at build time rather than converting on every request.
Related terms
Lazy Loading
Deferring below-the-fold images, video, and iframes until near the viewport. It trims initial page weight, the strongest lever on Core Web Vitals pass rates after server response.
Largest Contentful Paint (LCP)
The Core Web Vital measuring when the main content element finishes rendering, ideally under 2.5 seconds. Hero images, web fonts, and slow server responses are the usual culprits.
Preload & Prefetch
Resource hints that load critical files early or fetch likely-next files during idle time. Preload prioritizes fonts and hero assets for the current page, while prefetch warms the cache for routes the visitor may open next.
SSR Per Request
Fresh HTML rendered on the server for every request, used for personalized or frequently changing pages. Server rendering guarantees complete markup on first paint but costs compute per visit, so reserve it for dynamic routes.
CSR Shell
A minimal HTML shell that renders content in the browser after JavaScript loads. Client rendering suits authenticated dashboards behind login, where SEO matters less and interactivity starts only after scripts execute.
Hydration Cost
The JavaScript work that turns server-rendered HTML into an interactive app. Hydration replays component logic in the browser, so oversized bundles delay input readiness even when paint looks instant.