Image formats explained

JPEG is a lossy format built for continuous-tone images, which is a precise way of saying photographs. It handles soft gradients, skin tones and natural texture extremely well.

It cannot store transparency, and it blurs hard edges and text badly. A screenshot saved as JPEG looks visibly worse than the same screenshot as PNG, at a similar file size.

Use it for: photographs, especially anything leaving your site. Avoid for: logos, screenshots, text, anything needing transparency.

PNG is lossless with full alpha transparency. Every pixel survives exactly, which is what you want for a logo that must sit cleanly over any background.

The cost is size. A photograph saved as PNG is routinely five to ten times larger than a good JPEG of the same image with no visible benefit, because it is faithfully storing sensor noise nobody can perceive.

Use it for: logos, icons, screenshots, diagrams, anything with transparency or sharp edges. Avoid for: photographs.

WebP does both lossy and lossless, supports transparency, and supports animation. It is 25–35% smaller than JPEG for photographs and often 50% smaller than PNG for graphics.

It is, in short, better than both at almost everything, and supported everywhere that matters.

Use it for: essentially everything on your own website. Avoid for: files leaving your site to a destination you cannot verify.

AVIF compresses better than WebP again — roughly half the size of JPEG. It is slower to encode and slower to decode, and support, while broad, is not universal. Worth it for large hero images; rarely worth it for thumbnails.

GIF is obsolete for almost every purpose. It is limited to 256 colours and produces enormous files. Animated GIFs should be short videos (MP4 or WebM), which are dramatically smaller and look better. The only real reason to use GIF is a platform that accepts nothing else.

SVG is not a pixel format at all — it is a set of drawing instructions. It scales to any size with no quality loss and is usually tiny. For logos, icons and simple illustrations it beats every other option outright. It cannot represent a photograph.

• Is it a logo or icon made of shapes? → SVG
• Does it need transparency or contain text? → WebP, or PNG if the destination demands it
• Is it a photograph for your own site? → WebP
• Is it a photograph going elsewhere? → JPG
• Is it animated? → MP4 or WebM, not GIF