Image File Formats Explained: JPEG, PNG, WebP, AVIF and More

By Andrew Butson · July 2, 2026 · 8 min read

An image file is either a grid of pixels (raster) or a set of mathematical shapes (vector), and that one distinction explains almost everything about why JPEG, PNG, WebP, AVIF, HEIC, GIF and SVG all exist side by side instead of one format winning outright. Raster formats then split again by how they compress: throw away detail the eye is unlikely to miss (lossy), or keep every pixel exactly as it was (lossless).

This guide covers the working set you'll actually meet day to day (those seven formats plus TIFF for scanning and archiving): how each one compresses, where it earns its keep, where it falls apart, and a decision framework for picking the right one without guessing.

Raster vs vector: the fork in the road

Every format below except SVG is raster: the image is stored as a fixed grid of pixels, each with its own colour. Zoom in far enough and you see the grid. A photo, a screenshot, a scan are all raster by nature, because a camera or scanner captures a fixed number of samples. Raster files scale down cleanly and scale up badly: stretch one past its native resolution and it blurs or blocks up.

SVG is different in kind, not just in compression: it stores shapes, paths, text and colours as instructions, and something — a browser, usually — draws the pixels fresh every time at whatever size is needed. That's why a vector logo looks identical on a phone icon and a billboard. The trade-off is that SVG can only describe what's practical to draw as shapes; a photograph, with its continuous, irregular tonal variation, would need millions of shapes to reproduce and is always raster instead.

JPEG — the universal photo format

JPEG throws away the image detail your eye is least likely to notice, using an encoder built around how human vision actually works (the mechanics are covered in our lossy vs lossless guide). It's lossy, it has no transparency, and it can't animate, but it's opened by every phone, browser, printer and photo app in existence, which is why it remains the default for photographs nearly thirty years after it became the web's standard.

It wins on ordinary photos: continuous tone, no hard edges, nothing that needs pixel-perfect reproduction. It fails on anything with sharp contrast, such as screenshots, text, line art, and flat-colour logos, where its block-based compression shows up as blur around edges and blocky halos the moment you push the quality down to save space.

PNG — lossless and exact

PNG compresses the way a zip archive does: losslessly, by finding and packing away repeated patterns, so it reproduces every pixel of the original exactly, with no artifacts at any setting, because there's no quality setting to begin with. It also supports a full alpha channel for transparency, which JPEG cannot do at all.

That makes it the right choice for screenshots, UI mockups, diagrams, logos and anything with flat colour or transparency. It's the wrong choice for photographs: because a real photo has almost no exact repetition for the compressor to exploit, a PNG photo routinely runs several times larger than the same shot as a well-encoded JPEG or WebP, for no visible gain.

WebP — Google's do-everything replacement

WebP was built to replace JPEG, PNG and GIF at once. It can encode lossy (like JPEG) or lossless (like PNG), it supports a full alpha channel, and it supports animation. In lossy mode it typically comes out 25 to 35 percent smaller than a JPEG or PNG at comparable quality, and every current browser displays it natively.

The catch is mostly historical: a handful of older desktop image editors and some enterprise software still don't open it, so if a file needs to survive outside a browser context, keep a JPEG or PNG on hand as well. For anything destined for the web, WebP is very hard to beat.

AVIF — the newest and most efficient

AVIF reuses the AV1 video codec's frame compression for still images, which gives it the best compression of any format in mainstream use, often smaller than an equivalent WebP, with support for transparency and a wider colour range that WebP lacks. Every major browser now displays it.

The trade-off is encode time and tooling maturity: AVIF encoders are slower than JPEG's, and a smaller slice of older software and print workflows recognise it. For a new web image where file size matters most, it's the current best pick; for anything that might be opened outside a browser, pair it with a JPEG or WebP fallback.

HEIC — Apple's compatibility trap

HEIC has been the default photo format on iPhones and iPads since iOS 11 in 2017, because it fits roughly the same quality into about half the file size of JPEG. Inside Apple's own ecosystem (Photos, Messages, AirDrop), that's invisible and free. Step outside it and it isn't: plenty of websites reject a HEIC upload outright, most photo editors don't recognise it, and Windows needs an extra codec from the Microsoft Store before Explorer will even show a thumbnail.

The practical fix isn't to change your camera settings: Settings → Camera → Formats → "Most Compatible" does that, but it also enlarges every photo you take from then on. It's to convert on the way out: turn the HEIC into a JPEG the moment it needs to leave Apple's world.

GIF — a 256-colour hangover

GIF dates to 1987 and stores every frame with an indexed palette capped at 256 colours: fine for simple graphics, visibly banded on a photo or a smooth gradient. It survives today almost entirely for one job: short, looping animations without sound, because it's the one animated format every chat app, forum and CMS is guaranteed to render inline.

For a still image, GIF loses to PNG and WebP on every axis: larger files, worse colour, no real reason to pick it. If you need looping motion and can use a real video element instead, an MP4 or WebM loop is smaller and sharper than a GIF of the same clip. GIF is really the fallback for places that only accept a static image tag.

SVG — sharp at any size, wrong for photos

As the vector exception to everything above, SVG is the right call whenever the source material is genuinely made of shapes: logos, icons, illustrations, charts, UI graphics. It stays crisp on a retina phone screen and a printed banner from the same file, and because it's plain text under the hood, it's tiny and easy to tweak by hand.

It cannot usefully hold a photograph, and most places that ask for 'an image' actually want a raster file: social platforms, marketplaces, older CMSes and image editors will often reject an SVG upload outright. Converting an SVG to PNG rasterizes it once at a chosen resolution; pick that resolution generously for the largest size you'll display it at, because enlarging the raster afterwards softens it the way any raster does.

TIFF — the archival workhorse

TIFF is PNG's counterpart for professional and archival work: lossless, capable of very high bit depths and multiple pages, and the standard hand-off format between scanners, printers and prepress tools. It's rarely seen on the web because the files are large and no browser needs to display one: it's a working format, not a delivery format.

Keep TIFF for scans you intend to archive or print, and convert to JPEG, PNG or WebP the moment the image needs to go on a screen or leave a print workflow.

A decision framework, not a rule of thumb

Match the image to the job, not the other way round:

• Photo to share online → JPEG for maximum compatibility, WebP or AVIF if you control the destination and want a smaller file.
• Screenshot, diagram or UI mockup → PNG.
• Logo, icon or illustration made of flat shapes → SVG if you have or can recreate the vector, PNG if you only have a raster copy.
• Photo needing the smallest possible web file → AVIF, with a JPEG or WebP fallback for older software.
• iPhone photo that needs to leave Apple's apps → convert HEIC to JPEG first.
• Short looping clip for a chat, forum or older CMS → GIF, or an MP4/WebM loop if a real video tag is allowed.
• Scan headed for print, prepress or long-term archive → TIFF.

What to stop using

BMP has no real reason to exist any more: it stores pixels completely uncompressed, so files are needlessly large, and PNG matches its lossless exactness at a fraction of the size. GIF for anything that isn't a short animation is the same story: PNG or WebP beat it on size and colour every time. And treating HEIC as something you hand to other people, rather than convert before sending, just moves the compatibility problem onto whoever you sent it to.

Frequently asked questions

What's the best image format for the web?

For photos, WebP or AVIF with a JPEG fallback. For anything with flat colour, transparency or text (logos, screenshots, icons), PNG, or SVG if it's genuinely vector artwork. There's no single best format, only the best format for what the image actually contains.

Why won't my iPhone photos open on my PC or on some websites?

They're almost certainly HEIC, the format iPhones save to by default since iOS 11. It's efficient but only lightly supported outside Apple's own apps: convert HEIC to JPEG and it will open anywhere.

Does converting a JPEG to PNG bring back lost quality?

No. Converting only repackages whichever pixels currently exist; it can't restore detail the JPEG's lossy compression already discarded. You end up with a PNG that's a larger, but not better, copy of the JPEG.

Which formats support a transparent background?

PNG, WebP, AVIF, GIF and TIFF all support transparency, and SVG does too, since anything you don't draw is simply see-through. JPEG cannot store transparency at all.