Image formats compared: JPEG, PNG, WebP, AVIF, GIF, SVG and HEIC

The table covers structural facts rather than opinions. These are the properties that hold whatever settings you choose, and they decide whether a format is eligible for a job at all. No quality slider gives JPEG an alpha channel.

The size column compares each format against a JPEG of the same photograph at matching visual quality, which is a slippery comparison. Published figures move around depending on the encoder, the settings and the quality metric somebody optimised for, so read it as a direction of travel.

JPEG is from the early nineties and lossy only. It splits the picture into eight by eight blocks, describes each block as a set of frequency coefficients, then rounds those off against a table scaled by the quality setting. What goes missing is the finest variation inside each block, the part your eye checks last on a photograph and notices immediately on text.

It has no alpha channel, and that is the format rather than the encoder. Save a logo with a transparent background as JPEG and that area gets filled in, usually with black or white, permanently. Every JPEG save also starts from scratch, and the new encoder cannot tell the old one's block edges and ringing apart from real detail, so it spends bytes preserving them and adds its own on top. A few rounds of that and there are visible blocks in the sky.

PNG is the opposite. It is lossless, so what comes out is bit for bit what went in, and it compresses by finding repetition - a run of identical pixels written down in a handful of bytes, a row nearly the same as the one above stored as the difference. Screenshots, charts and line art are made of exactly that, which is why a screenshot is often smaller as PNG than as a quality-80 JPEG.

Photographs contain no exact repetition, so PNG ends up storing nearly all of it. A twelve megapixel photo can run past 20 MB, ten to thirty times a good JPEG of the same shot. PNG also has a palette mode capped at 256 colours, sometimes called PNG-8, which on icons and flat graphics often halves the file at no visible cost.

WebP does both jobs. It has a lossy mode derived from video keyframe coding and a proper lossless mode, it carries a real alpha channel in both, and it animates. On a photograph at comparable visual quality it lands roughly 25 to 35 percent below JPEG, and every current browser renders it.

The wall it hits is not the browser but the upload form. Plenty of portals still validate by checking the extension against a list somebody wrote before 2015, so a WebP gets rejected even though the same site would display it fine. Desktop software is patchy the same way. WebP is a good format for images you serve and a poor one for images you hand to a stranger.

AVIF comes out of AV1 video coding and is smaller again, with the gap widest at low bitrates and on gradients and flat colour, narrowest on noisy detailed photographs. It also handles 10 and 12-bit colour, so skies band less. Current browsers are fine with it. Older software, desktop editors and upload validators are thinner on it than on WebP.

The cost is encoding time. AVIF encoding is heavy, and one large image can take seconds where JPEG takes a fraction of one - noticeable in a batch, very noticeable in a tab on a phone. Decoding is fast, so it suits assets you encode once and serve a million times.

GIF is from 1987 and every property it has follows from that. A maximum of 256 colours per frame, so photographs come out dithered and blotchy. One bit of transparency, meaning a pixel is either fully opaque or fully clear, which is why old cut-out GIF logos show jagged fringed edges against any background but the one they were made on.

For animation, the only reason anyone still reaches for it, animated WebP compresses far better and keeps full colour. Past a couple of seconds a muted looping MP4 or WebM is smaller again, which is what most sites now serve where a GIF used to sit. Use GIF when the other end genuinely cannot take anything else.

SVG is a different kind of object. It is not a grid of pixels but an XML document describing shapes: this path, that fill, this stroke width. There is no resolution in it, so it is sharp at sixteen pixels and sharp on a billboard, and a logo is often two or three kilobytes. Text inside stays real text, selectable and searchable.

It is the wrong answer for photographs, and the failure is total rather than a matter of degree. There is no way to describe a photograph as a few hundred shapes. Tools offering to convert a photo to SVG either trace it into something resembling a screen print, or quietly embed the original JPEG inside an SVG wrapper.

HEIC is what an iPhone camera has produced by default since 2017. It stores a picture in roughly half the space of a JPEG at comparable quality, holds ten bits per colour channel, supports transparency, and can carry a depth map and a burst of frames in one file.

It also fails to open on a large share of the machines you might send it to. Safari renders it, Chrome and Firefox do not, and Windows needs a codec that is not always installed. So HEIC is not a format you choose. It is one you are handed, and what to do about it has its own guide, linked below.

None of the decisions below are really about the image. They are about the destination. The same photograph is correctly saved in three different formats depending on who opens it next.