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
01Why there is more than one
Every format is a trade
Each format 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.
Think of vehicles on the road
A scooter slips through traffic but cannot carry a family. An SUV carries the family but costs more to run. A truck carries goods but will not park in a lane. Nobody asks which one is best, only which one fits the trip.
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
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.
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
02Raster, vector, lossy and lossless
Dots or recipes
Every format belongs to one of two families, and raster files are squeezed in one of two ways. Knowing which you have explains most of what follows.
Think of a mosaic and a recipe
A mosaic is a wall of small tiles: it looks right from across the room and shows its tiles up close. A cake recipe holds no cake at all, but you can bake it at any size. Raster files are mosaics, and vector files are recipes.
Two ways to store a picture
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
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
03Meet the six formats
Six files, six jobs
One line on what each one is, what it can do, and where it fits best.
Think of the pans in a kitchen
A pressure cooker does dal fast, a tawa makes rotis, a kadhai fries. You would not make rotis in a pressure cooker. Each format is the same: very good at one job, awkward at the rest.
One card per format
JPEG
.jpg .jpegThe 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
.pngPixel perfect and lossless, with smooth transparency. Heavy for photos.
LosslessTransparencyAnimation via APNG
Best for screenshots, UI and images with text.
GIF
.gifThe 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
.webpMade for the web. Does what JPEG, PNG and GIF do, in smaller files.
Lossy or losslessTransparencyAnimation
Best for a safe, modern default for most web images.
AVIF
.avifThe 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
.svgA picture written as code. Sharp at any size and easy to recolour with CSS.
VectorTransparencyAnimation
Best for logos, icons, charts and illustrations.
04File sizes
Same picture, new weight
One picture, saved six ways at similar quality. Switch between a photo and a flat logo to see how the winner changes.
Think of packing a suitcase
The same clothes take very different space folded, rolled or in a vacuum bag. Nothing is missing either way, and some methods crease a little. Formats pack the same picture into very different sizes in the same way.
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.
05Side by side
Three ways to compare
The same six formats seen three ways: what each can do, how it does on size and speed, and what it improved over the ones before it.
Think of a phone comparison card
A shop lists camera, battery and price for three phones in one table, so the trades show at a glance. The tables below do the same for the six formats.
| 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 | Flat graphic 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 |
06Which one should I use
Stop at the first yes
Ask these questions in order and stop at the first yes. Then let the browser pick the best file it can open.
Think of sorting the post
Is it a bill? Into the bills tray. If not, is it a letter? Into the letters tray. You stop at the first tray that fits, and you never need to ask the rest.
Four questions, in order
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
Ship all three, let the browser choose
<!-- 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>07Questions and checklist
Before images go live
Short answers to what comes up when you put images on a real site, then a checklist for your next release.
Questions people ask
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.
Never serve an uploaded SVG as it came in
An SVG is code, and it can carry scripts. Clean every SVG a user uploads before it reaches another reader's browser.
Before you ship images
Clears the ticks above and every module you marked done.