Images and media
A proper img, srcset and sizes, picture and formats, SVG, video.
Updated
What media means in HTML
Images, videos and icons are usually the biggest part of a page's weight. How you put them in HTML decides how fast the page loads, whether the layout "jumps" and whether they're accessible.
img — the attributes that matter
<img src="/team.avif" alt="The team at the office" width="1200" height="600" loading="lazy" decoding="async" />| Attribute | Role |
|---|---|
alt |
the alternative text — required; alt="" for decorative images (Accessibility) |
width / height |
the intrinsic dimensions — the browser reserves the space before the image loads (no CLS) |
loading="lazy" |
loads only when it gets close to the screen — for images below the fold |
fetchpriority="high" |
top priority — for the main image (LCP) |
decoding="async" |
decoding doesn't block the rest of the page |
With width and height set, the CSS img { max-width: 100%; height: auto } keeps the aspect ratio on small screens too.
Responsive images: srcset and sizes
A phone doesn't need the 2400px image meant for a monitor. You give the browser variants and let it choose:
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="..."
/>| Attribute | Tells the browser |
|---|---|
srcset |
which files exist and how wide each one is (400w) |
sizes |
how wide the image will be on screen in each situation |
The browser combines this with the screen density and downloads the smallest variant that's good enough. next/image generates the srcset automatically.
picture — formats and art direction
<picture>
<source type="image/avif" srcset="/hero.avif" />
<source type="image/webp" srcset="/hero.webp" />
<img src="/hero.jpg" alt="..." width="1200" height="600" />
</picture>You use <picture> for |
Example |
|---|---|
| modern formats with a fallback | AVIF → WebP → JPEG |
| art direction — a different crop on mobile | <source media="(max-width: 40rem)" srcset="/hero-portrait.jpg"> |
The <img> inside is required — it's what actually displays and where you put the alt.
Formats — which and when
| Format | For | Note |
|---|---|---|
| AVIF | photos | the smallest, widely supported today |
| WebP | photos, illustrations | a good fallback |
| JPEG | photos | the universal fallback |
| PNG | images with transparency, screenshots | large for photos |
| SVG | icons, logos, vector illustrations | scales perfectly, styled with CSS (currentColor) |
Inline SVG vs a file
Inline <svg> |
<img src="icon.svg"> |
|
|---|---|---|
Color from CSS (currentColor, hover) |
yes | no |
| Separate cache | no | yes |
| When | UI icons | large illustrations |
Decorative icons get aria-hidden="true"; meaningful ones get role="img" + aria-label (or visible text next to them).
Video and audio
<video src="/demo.mp4" controls muted playsinline preload="metadata" poster="/demo.jpg" width="1280" height="720">
<track kind="captions" src="/demo.en.vtt" srclang="en" label="English" />
</video>autoplay only works with muted; poster shows an image until playback starts; <track> adds captions (accessibility).
Summary
img:alt,width/height,lazybelow the fold,fetchpriority="high"for the main image.srcset+sizesfor sizes,<picture>for formats and art direction.- AVIF/WebP for photos, SVG for icons; video with
controls,poster, captions.