The browser can display several image formats. The HTML stays the same:

<img src="harbor.webp" alt="Boats in Copenhagen harbor">

The format affects file size, quality, and what the image can contain.

Use this as a 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 useful for photographs. It does not support transparency.

PNG keeps exact pixel detail and supports transparency. Large photographs saved as PNG are usually much heavier than they need to be.

WebP and AVIF can create smaller files at similar visual quality. Your image editor or build tool can generate them.

SVG is a vector format. The browser draws shapes from instructions instead of displaying a fixed grid of pixels. It works well for logos, icons, and diagrams.

<img src="route-map.svg" alt="Cycle route through the city center">

SVG is not a good format for a normal photograph.

Compare the result

Export one photo as JPEG, WebP, and AVIF. Open each file at the size it will appear on the page.

Compare two things:

can you see a meaningful quality difference?
how large is each file?

Choose the smallest version that still looks good. A fashionable format is not useful if your export looks worse.