Guide · formats · a decision, not a debate

Six formats, and only two decisions that matter.

Format arguments consume more engineering time than they are worth, because the answer is usually the same and the exceptions are easy to identify. Does the image need transparency? Does it need to be pixel-exact? Answer those two and the format picks itself.

the short version

Is it a photograph or illustration for the web?

WebP

Is it a very large hero and every kilobyte counts?

AVIF, with a WebP fallback

Must it be pixel-exact, or is it a screenshot or diagram?

PNG

Is it going somewhere old that you do not control?

JPEG

Is it an icon, logo or simple shape?

SVG — generate it as vector, do not convert

What each one is actually for

WebP

the default
Compression
Both
Alpha
Yes
Animation
Yes

Good for: Photographs, illustration, cutouts, almost everything on a web page.

Watch out: Nothing much. It is the safe choice.

AVIF

smallest files
Compression
Both
Alpha
Yes
Animation
Yes

Good for: Large heroes and full-bleed imagery where every kilobyte is felt.

Watch out: Slower to encode; worth a fallback for maximum reach.

PNG

lossless
Compression
Lossless
Alpha
Yes
Animation
No

Good for: Screenshots, UI assets, diagrams, cutouts you will edit again.

Watch out: Large for photographs. Do not ship a PNG photo.

JPEG

maximum reach
Compression
Lossy
Alpha
No
Animation
No

Good for: Photography going into systems you do not control.

Watch out: No transparency at all. Flattens alpha onto solid colour.

GIF

legacy
Compression
Lossless, 256 colours
Alpha
1-bit
Animation
Yes

Good for: Places that still accept nothing else.

Watch out: Huge, colour-limited, jagged edges. WebP does this better.

TIFF

archival
Compression
Usually lossless
Alpha
Yes
Animation
No

Good for: Print hand-offs and archival masters.

Watch out: Never serve it to a browser.

SVG is not on the same list

The five formats above are all raster: a grid of coloured pixels, differing only in how cleverly they are compressed. SVG is a different kind of thing entirely — a description of shapes, drawn fresh at whatever size it is rendered.

That is why an SVG is infinitely scalable, recolourable from CSS and often measured in hundreds of bytes. It is also why you cannot convert a photograph into one: there are no shapes in a photograph to recover. Tracing produces thousands of junk polygons that are bigger than the original and impossible to edit.

If you need vector artwork, generate it as vector from a description rather than converting pixels you already have.

Generate real SVG · 5 credits

Raster

Stores what each pixel looks like. Enlarging means inventing pixels that were never recorded.

Vector

Stores what shapes exist. Enlarging means drawing the same shapes bigger — nothing is invented and nothing is lost.

Turning the decision into a call

Once you know the target, two endpoints get you there — and they answer different questions.

compress_image

“It is too big”

Quality percentage plus a target of WebP, JPEG or PNG. The lever you pull when the file is the problem. 1 credit.

convert_format

“It is the wrong container”

Straight between PNG, JPG, WebP, GIF, TIFF and AVIF, no quality dial. 1 credit.

Format questions

What should I use for most images on a website?

WebP. It handles photographs and flat illustration well, carries an alpha channel, supports animation, and is supported by every current browser. It is the default for a reason and the right answer unless you have a specific reason to deviate.

Is AVIF worth the extra complexity?

For large hero images, often yes — it typically produces smaller files than WebP at comparable quality. The costs are slower encoding and a slightly narrower support story, so the usual pattern is AVIF with a WebP fallback for the few images big enough to justify the effort.

When should I still use PNG?

When the image must be pixel-exact or has hard edges and flat colour: screenshots, UI assets, diagrams, and cutouts you will edit again later. PNG is lossless, which is both why it looks perfect and why it is large.

Is JPEG obsolete?

Not obsolete, just narrower. It remains the safest format for photography going into systems you do not control — legacy CMSs, partner feeds, print workflows. Its one hard limitation is that it has no alpha channel at all.

Why can I not convert a photo to SVG?

SVG stores shapes, not pixels. A photograph has no shapes to recover, so tracing one produces thousands of meaningless polygons that are larger than the original and impossible to edit. If you need vector artwork, generate it as vector from a description.