Images and media
Choose an image format
Choose between JPEG, PNG, WebP, AVIF, SVG, and video based on the kind of image, transparency, animation, and file size.
The browser can display several image formats. Your HTML stays the same no matter which one you pick:
<img src="harbor.webp" alt="Boats in Copenhagen harbor">The format affects file size, quality, and what the image can represent. Here is a practical starting point:
| Content | Start with | Why |
|---|---|---|
| A photo | WebP, AVIF, or JPEG | Good compression for detailed images |
| A screenshot | PNG or WebP | Keeps text and sharp edges clear |
| An image with transparency | PNG or WebP | Supports transparent pixels |
| A logo or diagram | SVG | Scales without becoming blurry |
| A long animation | Video | Better controls and compression than GIF |
JPEG is still a solid choice for photographs. It does not support transparency, so do not use it for logos on varied backgrounds.
PNG keeps exact pixel detail and supports transparency. A large photograph saved as PNG is often much heavier than it needs to be.
WebP and AVIF can produce smaller files at similar visual quality. Most image editors and build tools can export them today.
SVG is a vector format. The browser draws shapes from instructions instead of displaying a fixed grid of pixels:
<img src="route-map.svg" alt="Cycle route through the city center">SVG works well for logos, icons, and diagrams. It is not a good format for a normal photograph.
Export one photo as JPEG, WebP, and AVIF at the size it will appear on your page. Compare two things: can you see a meaningful quality difference, and how large is each file? Pick the smallest version that still looks good. A fashionable format is useless if your export looks worse than a plain JPEG.
Lesson completed