Web image formats

Two families

Before the format, one decision decides everything else: is the image made of pixels or of shapes?

Raster images are a grid of coloured pixels. Photographs are raster because reality does not come in shapes. Scaling a raster image up means inventing pixels that were never captured, which is why an enlarged photo goes soft. JPEG, PNG, GIF, WebP, and AVIF are all raster.

Vector images are instructions - a circle here, this line to that point, filled with this colour. They are drawn fresh at whatever size you ask for, so they are perfectly sharp at any scale and usually tiny. SVG is the only vector format the web uses.

The second decision applies only to raster: lossy or lossless. Lossy compression discards detail the eye is unlikely to miss and cannot get it back. Lossless compression writes the same pixels more compactly and reconstructs them exactly. Photographs want lossy; anything with text, hard edges, or flat colour wants lossless.

Those two questions - shapes or pixels, faithful or small - explain every format below.

JPEG

RasterLossy onlyNo transparencyNo animationUniversal support

Standardised in 1992 by the Joint Photographic Experts Group, and still the most widely supported image format in existence. It compresses photographs by throwing away the fine colour detail human vision is least sensitive to, and it does that well enough that thirty years of newer formats have only improved on it by a quarter or so.

Two things to know. First, JPEG cannot do transparency at all - not partial, not any. A JPEG logo on a coloured background will have a white box around it. Second, the loss compounds: every time you open a JPEG, edit it, and save it again, it is re-compressed and degrades a little further. Keep an original in a lossless format and export JPEGs from it, never from another JPEG.

There is also a progressive variant, which loads as a blurry whole image that sharpens, instead of top to bottom. It is slightly larger and usually feels faster.

Use it for: photographs, when you want the format that is guaranteed to work everywhere - in email, in old software, on anything. Otherwise a newer format does the same job smaller.

PNG

RasterLossless onlyFull transparencyNo animationUniversal support

Created in 1996 as a free replacement for GIF, whose compression was patent-encumbered at the time. PNG is lossless, so it reproduces every pixel exactly, and it supports a full alpha channel - transparency with 256 levels, so edges and shadows fade smoothly rather than jaggedly.

That combination made it the default for screenshots, logos, diagrams, and anything needing a transparent background. It is still the right answer for those. What it is not is a photo format: a lossless photograph is enormous, which is exactly the trap that produced the 1.9 MB hero image we wrote about in What is WebP?

Use it for: screenshots, UI images with text, flat-colour graphics, and anything where a pixel must survive intact. Not for: photographs.

GIF

Raster256 coloursOn/off transparencyAnimationUniversal support

From 1987, and the oldest format here by a decade. Its historical importance is animation: for most of the web's life, GIF was the only way to put a moving image on a page without a plugin.

Its limits are severe. A GIF holds at most 256 colours, so photographs turn blotchy and gradients band. Its transparency is one bit - a pixel is either fully transparent or fully opaque, with nothing in between, which produces the jagged halo you see around badly-made GIF logos. And it compresses poorly, so a few seconds of animation can weigh several megabytes.

Everything GIF does, something else now does better: WebP and AVIF animate in full colour at a fraction of the size, and for anything longer than a moment a real video file is smaller again and can be paused.

Use it for: almost nothing new. Only when a platform you are posting to demands the format.

SVG

VectorResolution independentFull transparencyAnimationUniversal support

The odd one out, and the most underused. An SVG is a text file describing shapes, so it is not really an image file at all until a browser draws it. Three consequences follow, and each is a genuine advantage:

• It is sharp at every size. One file serves a 16-pixel icon and a billboard. There is no such thing as a 2x version of an SVG.
• It is usually tiny. An icon is a few hundred bytes of geometry rather than a grid of pixels. The icons in this site's navigation are SVG for exactly this reason.
• It is part of the page. Inline an SVG and CSS can recolour it, JavaScript can animate it, and text inside it is real text - selectable, searchable, and readable by a screen reader.

Two cautions. It is useless for photographs, which have no shapes to describe. And because an SVG is code, it can contain scripts - never accept user-uploaded SVG without sanitising it.

Use it for: logos, icons, charts, diagrams, illustrations, anything drawn rather than photographed.

WebP and AVIF

The two modern formats work the same way: both borrow their compression from a video codec, and both do every job the older formats split between them - lossy and lossless, transparency, animation, in one format.

WebP

RasterLossy and losslessFull transparencyAnimationUniversal support

Published by Google in 2010 and built on the VP8 video codec. It covers what JPEG, PNG, and GIF do between them: lossy for photographs, lossless for flat art, transparency in either mode, and animation. On a photograph it comes out roughly a fifth smaller than a JPEG of the same visible quality. Every browser has supported it since 2020 and it encodes quickly, which is what makes it the safe default for anything photographic. Taken apart properly, with measured numbers, in What is WebP?

AVIF

RasterLossy and losslessFull transparencyAnimationModern browsers

Arrived around 2019 from the Alliance for Open Media, built on the newer AV1 codec, and compresses better still - the gap is widest on large photographic images at aggressive settings. It also handles things WebP cannot: high dynamic range, wider colour, and more than 8 bits per channel. The costs are real, though. Encoding is slow, noticeably so across a large batch, and browser support arrived later: Chrome from 2020, Firefox from 2021, Safari from 2022.

Use them for: essentially every photograph you ship. WebP is the safe modern default; AVIF is worth the extra encode time when the image is large, or when file size is the thing you are optimising hardest.

Favicons and ICO

Container formatMultiple sizes in one fileLegacyUniversal support

ICO is a Windows icon container from the 1990s that survives for one reason: every browser, with no instruction from you, will request /favicon.ico from the root of your site. Its trick is holding several resolutions in a single file so the system can pick the right one.

You do not have to use it. Modern browsers honour a favicon declared in the page head, and an SVG favicon is one file that is sharp at every size and can even respond to dark mode. The practical setup in 2026 is a small set: an SVG for modern browsers, a PNG or two for platforms that want a raster icon, and an ico at the root so the automatic request finds something instead of logging a 404.

Pick one

The whole article, compressed:

Two habits matter more than the choice itself. Keep the original in a lossless format and export from it, so you never re-compress an already-compressed file. And check the weight of what you ship: an article's text is around 30 KB, so a single unconsidered image can be the whole page. The Core Web Vitals that Google measures your page on are mostly a measure of how disciplined you were here.