Picking the right image format is the easiest performance win on the web. The wrong choice can make a page several times heavier than it needs to be; the right one makes it load faster with no visible difference.
JPG: the reliable photo format
JPG uses lossy compression tuned for photographs. It’s supported everywhere and produces small files for images with lots of colour and detail. It doesn’t support transparency, and repeated saving slowly degrades quality.
PNG: sharp edges and transparency
PNG is lossless, so text, logos, icons and screenshots stay crisp. It supports full transparency — but for photos, PNG files are usually far larger than JPG.
WebP: the modern all-rounder
WebP supports both lossy and lossless compression plus transparency, and is typically noticeably smaller than an equivalent JPG or PNG. All major modern browsers support it.
AVIF: smallest files, newest format
AVIF often beats WebP on file size at the same visual quality, especially for photos. Encoding is slower and support in older software is thinner, so keep a fallback for critical images.
Quick summary
| Use case | Best pick | Fallback |
|---|---|---|
| Photos on a website | AVIF / WebP | JPG |
| Logos & icons | SVG / PNG | WebP |
| Screenshots | PNG / WebP | JPG |
| Email & sharing | JPG | PNG |