Images are usually the heaviest thing on a web page, so the format you choose has a real effect on how fast your site loads. Three names come up: JPEG, WebP and AVIF. Here is what each is good for, and a simple rule for picking one.
JPEG: the old reliable
JPEG has been around for decades and every device on earth can open it. It is fine for photos, but by modern standards the files are large. Its strength is universal support; its weakness is size.
WebP: smaller, very widely supported
WebP, from Google, typically produces files around 25 to 35% smaller than JPEG at similar quality, and it supports transparency (like PNG) and animation. Support is now effectively universal across modern browsers. For most websites, WebP is the safe, big win over JPEG.
AVIF: smallest, newer
AVIF is the newest of the three and usually the smallest, often noticeably smaller than WebP for photos while keeping good quality. Browser support is now broad but not quite as universal as WebP, and encoding can be slower. It is the best choice for raw file size when you can use it.
A simple rule
- Serve AVIF first for the smallest files.
- Fall back to WebP for anything that cannot take AVIF.
- Keep a JPEG as the final fallback for very old clients.
This sounds complicated, but the HTML picture element does it automatically. You list the formats best-first, and the browser picks the first one it understands, so each visitor gets the smallest image their device can handle with no effort on their part.
Do it without the hassle
You do not need command-line tools for this. The image optimiser converts an image to AVIF, WebP, JPEG and PNG at once, shows you the size of each so you can see the saving, and gives you the picture-element HTML to drop straight into your page. Convert once, compare, and use the smallest format your audience can open.