Every Image Format Explained: JPEG, PNG, WebP, AVIF, HEIC, SVG and More

Why does the same picture look crisp as one file, blocky as another, and take forever to load as a third? Usually it comes down to three things: the format, the compression, and the settings inside the file.

This guide walks through every image format you’ll meet as a creator, in plain language. Facts were checked in October 2026 against official documentation where it exists (MDN Web Docs, Google’s WebP page, Apple Support and YouTube Help), with Wikipedia for history and specs. Where sources disagree, I say so.

Quick answer: which format for which job?

Job	Use
Photos for the web	JPEG, WebP or AVIF
Screenshots and logos	PNG
Icons and diagrams	SVG
Animation	APNG, animated WebP, or a video
Editing masters	TIFF, PNG or camera RAW
Camera originals	RAW or HEIC

The rest of this post explains why.

The big idea: pixels, vectors, lossy and lossless

Raster images are grids of pixels, and each pixel stores one value, usually a colour. Photos, screenshots and most graphics are raster images, and their size is set by width and height in pixels.

Vector images store drawing commands instead: shapes and lines described with maths. That’s why they scale to any size cleanly. SVG is the vector format of the web.

The catch with raster images is that you can’t enlarge them indefinitely. Scaling beyond the native resolution causes pixelation and blur, so start with enough pixels for the largest size you’ll need.

Compression comes in two kinds:

Lossless keeps every pixel exactly. It’s preferred for archives, technical drawings and clip art.
Lossy throws away a little detail for much smaller files. It suits photographs, but at low quality it creates visible compression artifacts.

One more thing: a file extension is just a label. A .heic file uses the HEVC codec inside the HEIF container, while .avif uses AV1 inside the same kind of container. The extension alone doesn’t tell the whole story.

JPEG and friends: the lossy classics

JPEG

JPEG is named after the Joint Photographic Experts Group. It was standardised in 1992 (ITU-T T.81) and 1994 (ISO/IEC 10918-1), and MDN calls it the most widely used lossy format for still images. It typically compresses about 10:1.

How it shrinks a picture:

It splits the image into 8×8 pixel blocks and applies the discrete cosine transform.
It quantises the results. This is where detail is thrown away.
It packs what’s left with entropy coding.

It also stores colour at lower detail than brightness, because our eyes notice brightness more. This is called chroma subsampling: 4:4:4 keeps everything, 4:2:2 halves horizontal colour detail, and 4:2:0, the most common in JPEGs, halves it in both directions.

On disk you’ll see .jpg, .jpeg and sometimes .jfif. Cameras usually save JPEG with Exif data, which stores camera information alongside the picture.

Best at: photographs. Weak at: diagrams, charts and text, which MDN warns can look poor after lossy compression. JPEG also has no transparency and no animation.

Three JPEG problems to know

Compression artifacts: push quality too low and you get blocky patches and smudged edges, often following the 8×8 grid. The fix is a higher quality setting, or a lossless original.
Generation loss: every re-save compresses the image again. If you’ll edit, keep the working file lossless and export to JPEG once, at the end.
Progressive JPEG is the good news: it loads in passes, showing a rough preview first on slow connections.

JPEG 2000

A different codec from the same committee, developed 1997–2000. It uses wavelets instead of the discrete cosine transform and supports lossy and lossless modes. It’s used in digital cinema, medical imaging and archives, but it’s generally not supported in web browsers.

The lossless classics: PNG, GIF, BMP and TIFF

PNG

PNG (Portable Network Graphics) was created to replace GIF after Unisys announced in December 1994 that the LZW algorithm GIF used would need royalties. The W3C approved PNG on 1 October 1996.

It filters each row of pixels with one of five predictive filters, then compresses with the patent-free DEFLATE algorithm. It handles palette, greyscale and full RGB or RGBA colour at 8 or 16 bits per channel, but not CMYK.

PNG’s big feature is full alpha transparency, including partial transparency. GIF only has on/off transparency, and JPEG has none. That’s why logos and cut-outs are usually PNG.

MDN recommends PNG for screenshots, diagrams, logos and line art. For photos, PNG files are usually much larger than JPEG.

APNG (animated PNG) was introduced by Mozilla and is now part of the PNG specification (3rd edition, a W3C Recommendation from 24 June 2025). MDN suggests it for lossless animation.

GIF

CompuServe released GIF on 15 June 1987. Each image can use up to 256 colours, with lossless LZW compression. The 89a version (1989) added animation and transparency, and the LZW patents have since expired.

With only 256 colours, photos need dithering: a noise pattern that fakes extra colours and reduces banding, but is often visible.

Today, MDN says modern content should use PNG for stills and consider APNG for lossless animation, and MP4 video often replaces animated GIFs. (Both “hard G” and “soft G” pronunciations are common.)

BMP

Microsoft’s bitmap format from 1987. It’s usually uncompressed, so files are large, and MDN says to typically avoid it for websites.

TIFF

Developed by Aldus, now part of Adobe. One TIFF can hold several images or layers, uncompressed or compressed with LZW, PackBits, Deflate or even JPEG. It’s common in scanning, publishing and photography.

Standard TIFF tops out around 4 GiB (BigTIFF goes further). Browsers don’t display it except Safari, so it’s best as a download for printing or precision editing.

Modern formats: WebP, AVIF, HEIC and JPEG XL

These newer formats compress better than the classics. Each has a catch, usually around support.

Format	From	Compression	Alpha	Animation	Main catch
WebP	Google, 2010	Lossy + lossless	Yes	Yes	Lossy mode is 8-bit; max 16,383 px per side
AVIF	AV1 in HEIF, 2019	Lossy + lossless	Yes	Yes	No progressive rendering; needs a fallback
HEIC	HEVC in HEIF	Lossy	Yes	Sequences	Uneven support outside Apple; patent licensing
JPEG XL	ISO/IEC 18181	Lossy + lossless	Yes	Yes	Browser support keeps changing

WebP

Google announced WebP on 30 September 2010. It supports lossy and lossless compression, transparency and animation, so it can replace JPEG, PNG and GIF. Google claims lossless WebP is about 26% smaller than PNG, and lossy WebP 25–34% smaller than comparable JPEGs. A 2013 Mozilla study couldn’t confirm a significant advantage over JPEG, though, so results vary by image.

Every major browser supports it now (Safari since September 2020), and it was published as RFC 9649 in November 2024.

AVIF

AVIF stores images compressed with the royalty-free AV1 video codec. It supports 8, 10 and 12-bit colour, HDR, transparency and animation. By 2024 over 93% of users could view it, but MDN notes it doesn’t render progressively and recommends a WebP, JPEG or PNG fallback.

Coming soon: a full WebP vs AVIF vs JPEG comparison for websites.

HEIF and HEIC

HEIF is a container (ISO/IEC 23008-12, 2015) built on the same base as MP4. When it holds HEVC images, the files are called HEIC. A HEIC photo takes about half the space of an equivalent JPEG. Apple made it the iPhone default in iOS 11 (2017).

On iPhone, the High Efficiency camera setting saves HEIF photos and HEVC video, while Most Compatible switches photos to JPEG. The catch is uneven support on other platforms and websites. In 2020, for example, some AP exam takers had problems because the College Board’s site couldn’t process HEIC photos.

JPEG XL

A royalty-free format whose party trick is re-compressing existing JPEGs about 20% smaller, losslessly and reversibly. It also supports HDR, animation, layers and progressive decoding. Browser support has changed several times (Safari added it in version 17, Chrome removed it in 110 with later reversals), so MDN advises providing an alternative format.

So which modern format?

MDN’s general advice is to prefer WebP or AVIF for raster images on the web, with a JPEG or PNG fallback using the HTML <picture> element.

Vector and raw: SVG, ICO and camera raw

SVG is an XML-based, open W3C standard (since 1999) that describes images as drawing commands. Files are text, so they can be edited, searched, styled with CSS and animated with JavaScript. Gzipped .svgz files are typically 20–50% of the original size. MDN says SVG is best for diagrams and icons, not photos.

Safety note: because SVG can contain JavaScript, a malicious file disguised as an image could run code in a browser (cross-site scripting). Don’t open or upload SVGs from untrusted sources.

ICO is Microsoft’s Windows icon format, long used for favicons. MDN now says to use a PNG favicon instead.

Camera raw files hold unprocessed sensor data, more like a digital negative. A raw converter has to “develop” them (demosaicing, white balance, colour). They usually store 12 or 14 bits per channel, versus 8 for JPEG. Each brand has its own format: Canon CR2/CR3, Nikon NEF, Sony ARW, Fujifilm RAF. Adobe’s DNG (2004) is an openly documented alternative.

My advice: shoot raw when you’ll edit heavily, since raw files are often 2–6 times larger than JPEGs and need special software. JPEG is fine for quick sharing.

Settings inside the file

Pixel dimensions (for example 1920 × 1080) are what matter on screens. More pixels means more detail and bigger files.
PPI and DPI: PPI describes pixel density, and DPI mostly refers to printers. The density value in an image file only affects printed size, and browsers ignore it. A full PPI vs DPI guide is coming soon.
Colour depth: 8 bits per channel gives 256 levels per colour (about 16.7 million colours). 10-bit gives 1,024 levels (over a billion colours). Even 8-bit can show banding in smooth gradients.
Alpha adds an extra channel for transparency, for example turning a 24-bit pixel into a 32-bit one. PNG, TIFF, WebP, AVIF, APNG and SVG can carry it. JPEG can’t.
Exif metadata stores camera settings, capture date and time, and sometimes GPS location. A photo can reveal exactly where it was taken. Some sites strip it on upload and others don’t, so remove it yourself before publishing personal photos.

Colour spaces: sRGB, Display P3 and Adobe RGB

Colour space	What it is	When to use
sRGB	The standard for monitors and the web (HP and Microsoft, 1996; IEC 1999). Assumed when an image has no profile.	Default for anything on the web
Display P3	Apple’s version of the cinema P3 gamut, about 25% larger than sRGB in area	Apple-device workflows with colour management
Adobe RGB	1998; covers most colours CMYK printers can reach, mainly extra cyan-greens	Print workflows with colour management

An ICC profile embedded in the file tells software which colour space the pixels use. JPEG, PNG and TIFF can all carry one. AVIF and JPEG XL can also store HDR images, but support varies, so test where your viewers will see them.

My advice: export web images in sRGB. Use wider spaces only when your whole workflow, from editing to display, is colour-managed.

Thumbnails and a good workflow

YouTube thumbnails: at the time of the video, YouTube Help recommended 3840 × 2160 for videos (minimum width 640), 16:9, as JPG or PNG, up to 2 MB on mobile and 50 MB on desktop. Other versions of the same page have listed 1280 × 720 and allowed GIF, so check YouTube’s live help page before relying on any number. Custom thumbnails also need a verified account and must follow the Community Guidelines.

Two workflow rules:

Converting can’t restore detail. Saving a JPEG as PNG just makes a bigger file with the same artifacts. Always convert from the original.
For animation, choose APNG, animated WebP or AVIF, or simply a video. In Google’s 2011 tests, lossy WebP animations were 64% smaller than GIFs.

A simple workflow: keep the original (raw or full quality), edit from a lossless copy, then export once for each destination (JPEG or WebP for photos, PNG for graphics). Keep exports separate from your masters.

Common problems and quick fixes

Problem	Likely cause
Picture looks blocky	Over-compressed lossy file
White box behind a logo	Format has no alpha (for example JPEG)
File is huge	BMP, TIFF or PNG used for a photo
Colours look dull	Wrong colour space or missing profile

Five mistakes to avoid

Re-saving a JPEG again and again.
Using JPEG for logos and text.
Enlarging a small raster image.
Posting photos with location data still inside.
Trusting a file extension without checking what’s inside.

Try it: open one of your images in a free tool like ExifTool, or your system’s file info panel, and check its real format, size and metadata.