Which image format should you actually use?

Images are usually the largest thing a page downloads, which makes format the highest-leverage performance decision most teams never revisit.

WebP is the sensible default

It beats both JPEG and PNG at equivalent visual quality, supports transparency and animation, and is supported by every browser that matters.

For most sites the correct policy is simple: serve WebP, keep an original, and stop thinking about it.

AVIF when the saving is worth the cost

AVIF compresses better than WebP, often substantially on photographic content. Two caveats keep it from being an automatic choice:

• Encoding is slow — noticeably so at build time across a large library.
• Support is good but not universal, so you need a fallback, which means generating two formats rather than one.

Worth it for a hero image on a high-traffic page. Rarely worth it for every thumbnail in a catalogue.

PNG only for lossless

PNG earns its place for screenshots with text, diagrams with sharp edges, and anything that will be edited again later. For photographs it produces files several times larger than necessary.

The common mistake is exporting photographs as PNG because it feels higher quality. It is lossless, which is not the same thing as better — the visible result is identical and the file is far heavier.

SVG for anything drawn

Logos, icons, diagrams and line art should be SVG. It scales to any size without blurring, is usually smaller than a raster equivalent, and can be styled with CSS.

If you only have a raster version of a logo, tracing it is usually worthwhile — our vectorizer does this in the browser.

Size matters more than format

A correctly sized JPEG beats an oversized WebP every time. Serving a 3000-pixel-wide image into a 600-pixel slot wastes roughly 96% of the bytes, and no format choice recovers that.

Resize first, then convert. Our image compressor does both in the browser, with nothing uploaded.

What quality setting should I use?

For photographs, 75 to 85 is the usual sweet spot: the file size drops sharply while the difference stays invisible at normal viewing sizes. Flat illustrations and screenshots tolerate lower values. PNG has no quality setting because it is lossless, so a quality slider on a PNG export is doing nothing.

Why did my transparent PNG turn black?

Because JPEG has no alpha channel, so transparency has to be flattened onto something, and an unflattened conversion defaults to black. A good converter paints white underneath instead. If you need to keep transparency, use WebP or PNG rather than JPEG.