JPG, PNG, WebP, AVIF or HEIC: which image format to use, and when

Photo, screenshot or logo? The content picks the format

The job portal rejects your iPhone photo because it ends in .heic. The spreadsheet screenshot you dropped into a team chat arrives with fuzzy digits. The logo you placed on a dark slide shows up inside a white box. Three complaints, one cause: the format did not match the content, or the destination.

Start with how the file is compressed. Lossy compression throws data away to shrink the file, and MDN, Mozilla's developer documentation, is blunt about it: the process is irreversible. Lossless compression lets the original be rebuilt exactly. JPG is always lossy. PNG and GIF are lossless. WebP and AVIF can do either, depending on the setting chosen when the file is written.

Then look at the content. Photographs are made of smooth transitions and tolerate losses the eye never registers. Screenshots, diagrams, logos and text are made of hard edges, and for those MDN recommends lossless encoding, because smeared edges and color halos around letters stand out at once. Artwork built from shapes is a separate case: SVG stores drawing instructions rather than pixels, so it stays sharp at any size.

I have X and need Y: which format to use

JPG has no alpha channel: when a transparent PNG becomes a JPG, the empty area is filled with a solid color (white in LivreImage) and there is no undo. Keep the original PNG.

What each format can store

Color depth is the number of bits per channel: more bits give more in-between tones and less banding in gradients. Partial transparency needs an alpha channel, which JPG lacks.

Do WebP, AVIF and HEIC open in every browser?

According to MDN, JPG, PNG, GIF, SVG, BMP and ICO open in every version of Chrome, Edge, Firefox, Opera and Safari. The three newer formats depend on the version:

How many people can open it

Add up the browsers that qualify and Can I use arrives at about 97% of global usage for WebP and 95% for AVIF. HEIC sits below 15%: only Safari displays it. Internet Explorer opens none of the three.

Outside the browser

Apple devices read HEIC from iOS 11 and macOS High Sierra on. Android decodes HEIF from version 8.0. On Windows 10, Microsoft asks for two Microsoft Store extensions, HEIF Image Extensions (free) and HEVC Video Extensions (listed at $0.99), even when photos are all you want to open. For an upload form or an unfamiliar computer, converting HEIC to JPG removes the question.

Why are WebP and AVIF smaller than JPEG?

The JPEG standard dates from 1992. It cuts the picture into blocks of 8 by 8 pixels, turns each block into frequencies (the discrete cosine transform) and drops fine detail. Because it works in blocks, the seams between them start to show when compression is pushed too far.

Lossy WebP adds a step before that: prediction. The encoder guesses each block from neighboring blocks it has already processed and stores only the difference between the guess and the real thing, which typically holds many zeros and compresses better. It also swaps JPEG's Huffman coding for arithmetic coding, which is more efficient. AVIF applies the same idea with the tools of AV1, a newer video codec, and inherits the recent advances in video compression.

How much does that buy? In Google's study, WebP files came out 25% to 34% smaller than JPEGs with the same SSIM score, a measure of similarity to the original; for lossless mode the company reports files 26% smaller than PNG. For AVIF, the authors of the guide on web.dev, a Google site, report files more than 50% smaller than JPEG, cautioning that the gain varies with the content, the encoder settings and the quality you aim for.

These are figures from the people who build the formats. The comparison slider in JPG to WebP shows the real gain on your own image.

Four mistakes that cost quality or megabytes

Saving a photo as PNG

PNG stores every pixel exactly, and a photograph offers almost no repetition for it to exploit. The Library of Congress puts typical JPEG settings at a 10:1 to 20:1 reduction. A 12-megapixel photo takes 36 MB uncompressed (3 bytes per pixel); at those ratios a JPEG lands between 1.8 and 3.6 MB.

Saving a screenshot or text as JPG

The documentation of libjpeg-turbo, inherited from the Independent JPEG Group, advises against feeding it line art or pictures with only a handful of colors, and MDN describes the result: smeared edges and color halos around the text. It may not even save space: according to Google, a PNG with few colors converted to a lossy format can come out larger.

Re-saving the same JPG over and over

Every edit saved as JPG is another lossy pass. The libjpeg-turbo documentation says the damage adds up, and that after about ten rounds a picture can look visibly worse than after the first. Edit a lossless file and produce the JPG once, at the end.

Converting JPG to PNG to get quality back

The PNG preserves, perfectly, the artifacts the JPG already had. What lossy compression discarded does not come back, and Google's WebP documentation adds that turning a lossy original such as a JPEG into lossless WebP or PNG usually produces a bigger file. JPG to PNG makes sense only when the destination demands PNG.

GIF, BMP and ICO: when the old formats still make sense

GIF dates from 1987 and holds at most 256 colors per palette; each pixel is either fully opaque or fully transparent, so soft edges are out. The GIF89a specification itself cautions that GIF was never meant as an animation platform, merely capable of it within limits. For still images MDN points to PNG; for animation, to WebP, AVIF or APNG.

The common BMP compresses nothing: 3 bytes per pixel, which is why MDN tells web authors to steer clear of it. It survives to feed older software that accepts only .bmp.

ICO is a Windows container that can hold several icons, each one a BMP or a PNG, at no more than 256 × 256 pixels. On websites, MDN notes, ICO favicons are giving way to PNG.