One Picture, Six Files: web image formats, explained

Q: Which format should I use for photos?

AVIF first, then WebP, with JPEG as the fallback. A element lets the browser take the first one it supports.

Q: Should images load lazily?

Images further down the page, yes: add loading="lazy". Keep the main image at the top loading straight away, and give it fetchpriority="high" so it shows first.

00

Why there is more than one format

Every format is a trade. It gives up something to be good at something else, and none of them wins at everything. Start with the biggest trade, then the four smaller ones.

00.1

See it: pixels against shapes

The same moon, stored two ways. Drag the slider to enlarge both.

Pixels Sharp at its real size

Shapes Sharp at any size

Zoom in 1×

Pixels: a fixed grid of dots

A photo has millions of blended colours, so it is saved as a grid of coloured squares. At its real size the squares are too small to see. Enlarge it and each one grows, so edges step and then turn into blocks.

JPEGPNGGIFWebPAVIF

Shapes: a recipe the browser redraws

A logo is a few flat shapes, so it can be saved as the shapes themselves: a circle here, a curve there. The browser redraws them at every size, so the edge stays clean at 1× and at 16×.

SVG

The catch

Shapes cannot hold a real photo, and pixels cannot grow without losing detail. That split is why both families exist.

00.2

Four more reasons formats differ

Inside the pixel family, each format picked a different balance of these.

Smaller files cost some detail
A smaller file loads faster. Lossy formats get there by dropping detail you rarely notice. Lossless formats keep every pixel and end up heavier.
JPEG lossyPNG losslessWebP bothAVIF both
Some pictures need a see-through background
An icon has to sit on any colour. JPEG always fills the background with a solid colour. GIF can hide a pixel fully but cannot fade an edge. The rest can fade edges smoothly.
PNGWebPAVIFSVGGIF, on or off only
Some pictures need to move
GIF made short loops possible in 1987, but the files are large. WebP and AVIF play the same loop at a fraction of the size.
GIFWebPAVIF
New formats wait for support
Each new format fixed a limit of the ones before it. A format only helps once browsers and apps can open it, so the older ones stay around as a safe fallback.
GIF 1987JPEG 1992PNG 1996SVG 2001WebP 2010AVIF 2019

01

Two ways to store a picture

Every format belongs to one of two families. Knowing which one you have explains most of what follows.

Raster: a grid of dots

The picture is saved as coloured pixels. Great for photos, but it blurs or turns blocky when you enlarge it.

JPEGPNGGIFWebPAVIF

Vector: a recipe of shapes

The picture is saved as lines, curves and fills. It stays crisp at any size, but cannot hold a real photo.

SVG

02

Lossy or lossless

Raster files are squeezed to save space. Some throw away detail you will rarely notice, others keep every pixel.

Original pictureEvery pixel, uncompressed

Lossy

Drops tiny details your eye skips. Much smaller.

small

Lossless

Packs everything and gets it back exactly.

large

03

Meet the six formats

One line on what each one is, what it can do, and where it fits best.

JPEG

.jpg .jpeg

1992

The classic photo format. Small files, but it smudges sharp edges and text.

LossyNo transparencyNo animation

Best for photos when you need to support everything.

PNG

.png

1996

Pixel perfect and lossless, with smooth transparency. Heavy for photos.

LosslessTransparencyAnimation via APNG

Best for screenshots, UI and images with text.

GIF

.gif

1987

The old animation format. Only 256 colours, so photos look grainy and files get big.

LosslessAnimationOn or off transparency

Best for tiny, simple loops where old apps must play them.

WebP

.webp

2010

Made for the web. Does what JPEG, PNG and GIF do, in smaller files.

Lossy or losslessTransparencyAnimation

Best as a safe, modern default for most web images.

AVIF

.avif

2019

The newest one. Smallest photo files and rich HDR colour, but slower to create.

Lossy or losslessTransparencyHDR

Best for large photos where every kilobyte counts.

SVG

.svg

2001

A picture written as code. Sharp at any size and easy to recolour with CSS.

VectorTransparencyAnimation

Best for logos, icons, charts and illustrations.

04

How heavy is the same picture?

One picture, saved six ways at similar quality. Switch between a photo and a flat logo to see how the winner changes.

A 1600 × 1067 photo

Shorter bar means a faster page

Rough, illustrative figures. Real sizes depend on the picture, the encoder and the quality you pick.

05

Side by side

The same six formats seen three ways. Switch the view to compare what each can do, how it does on size and speed, and what it improved over the ones before it.

What each one can do

Functionality

Format	Type	Compression	Transparency	Animation	Colours	Browsers
JPEG.jpg	Raster	Lossy	No	No	16.7 million	All
PNG.png	Raster	Lossless	Full	APNG only	Up to billions	All
GIF.gif	Raster	Lossless	On or off	Yes	256 per frame	All
WebP.webp	Raster	Both	Full	Yes	16.7 million	Modern
AVIF.avif	Raster	Both	Full	Yes	Billions, HDR	Modern
SVG.svg	Vector	None needed	Full	CSS or SMIL	Any	All

Format	Photo size vs JPEG	Photo compression	Saving speed	Loading speed
JPEG	Baseline		Fast	Fast
PNG	Often 5 to 10 times bigger		Fast	Fast
GIF	Bigger, and grainy		Fast	Fast
WebP	About 25 to 35% smaller		Moderate	Fast
AVIF	Often about half the size		Slow	Moderate
SVG	Not for photos	n/a	Instant	Depends on detail

Format	Arrived	Improved on	What got better	What it still lacks
GIF	1987	Nothing, it came first	Shared pictures and short loops online	Only 256 colours, hard-edged transparency
JPEG	1992	GIF for photos	Full colour photos at a fraction of the size	No transparency, fuzzy edges on text
PNG	1996	GIF for still images	Millions of colours, soft transparency, no quality loss	Large files for photos
SVG	2001	Raster logos and icons	Sharp at any size, tiny files, styleable with CSS	Cannot store photos; clean uploaded files, since they can carry scripts
WebP	2010	JPEG, PNG and GIF	One format for photos, transparency and animation, in smaller files	8-bit colour only, no HDR
AVIF	2019	WebP and JPEG	Even smaller photos, 10 and 12-bit colour, HDR	Slow to save, heavier to decode on old phones

06

Which one should I use?

Ask these questions in order and stop at the first yes.

Is it made of simple shapes?A logo, icon, chart or flat drawing.

SVG

Does it move?A short loop or sticker. For long clips, a real video is lighter.

WebPAVIFGIF as a fallback

Must every pixel stay exact?A screenshot, a diagram with text, pixel art.

PNGLossless WebP

Is it a photo?People, places, products.

AVIFWebPJPEG as a fallback

hero.htmlHTML

<!-- The browser picks the first format it understands -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Team at the office" width="1600" height="1067" loading="lazy">
</picture>

Why this matters: you ship the smallest file to new browsers and a JPEG to old ones, without writing any script.

07

Questions people ask

Short answers to what comes up when you put images on a real site.

Which format should I use for photos?

AVIF first, then WebP, with JPEG as the fallback. A <picture> element lets the browser take the first one it supports.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="…" width="1600" height="1067">
</picture>

When is PNG still the right choice?

For screenshots, interface images and anything with small text, where every pixel has to stay exact. Lossless WebP does the same job in a smaller file.

Should logos and icons be SVG?

Yes. They stay sharp at any size and are usually the smallest option. Clean any SVG a user uploads, since it can carry scripts.

Is GIF still worth using?

Rarely. Animated WebP and AVIF are far lighter. For anything longer than a few seconds, a short MP4 or WebM video beats all three.

Do all browsers support AVIF and WebP?

Every current browser opens WebP, and all current major browsers open AVIF. Older phones and apps may not, so keep a JPEG or PNG fallback.

Does the image size matter as much as the format?

Often more. Serve each image at the size it is shown, using srcset and sizes, so a phone never downloads a desktop-sized file. Set width and height so the page does not jump while it loads.

Should images load lazily?

Images further down the page, yes: add loading="lazy". Keep the main image at the top loading straight away, and give it fetchpriority="high" so it shows first.

Can I convert an image again and again?

Keep the original file and export every format from it. Re-saving a lossy file loses a little more detail each time.

One Picture, Six Files