Responsive Images — Live Demo

The same photo in three formats — at equal quality

Drag the quality slider to see how file sizes change across formats. AVIF stays smallest at every quality level. Sizes shown for a typical 1600×900 photo.

Quality: 75

JPEG

420 KB

Baseline · universal

legacy fallback

WebP

290 KB

~31% smaller

fallback

AVIF

205 KB

~51% smaller

✓ serve first

<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero" width="1600" height="900"> </picture>

--:--:--Drag the quality slider to compare format sizes

How the browser picks a format from <picture>

Pick a browser profile below. Watch which <source> it chooses — the first one whose type it supports. Order matters: best format first.

<img src="hero.jpg"> (fallback)

The <img> carries everything

The <picture> and <source> are invisible wrappers. The <img> is the real element — it holds alt, width, height, loading, and CSS targets it.

        img.currentSrc → "hero.avif"
      

--:--:--Change the browser profile to see format selection

The sizes accuracy problem — wasted bandwidth calculator

Set the real layout (how wide the image actually renders) and the sizes value you wrote. See how much bandwidth a wrong sizes wastes.

Viewport width: 1440px

Device pixel ratio (DPR): 2×

Image's REAL rendered width

The sizes value you WROTE

✓ sizes is accurate

--:--:--Set a mismatched real width vs written sizes to see wasted bytes

srcset + sizes validator

Type or pick a srcset + sizes combination. The validator checks the rules browsers enforce: descriptor consistency, sizes presence, and decimal-width errors.

srcset

sizes

Try:

--:--:--Click Validate or try a preset to check the rules

Hero image loading: lazy vs fetchpriority

Compare how the hero (LCP) image loads under two strategies. The cyan line marks when LCP fires — earlier is better.

CSS / fonts

CSS

JS bundles

JS

Hero image

hero

❌ <img src="hero.jpg" loading="lazy"> // delays LCP — never on hero ✅ <img src="hero.jpg" fetchpriority="high"> // prioritized fetch // Advanced: preload the LCP image in <head> <link rel="preload" as="image" imagesrcset="hero-800.avif 800w, hero-1600.avif 1600w" imagesizes="100vw" type="image/avif">