Image file formats: 9 types and when to use each

Image file formats such as JPEG, PNG and WebP are named by the extension at the end of a file name, for example .jpg, .png or .webp. The right one depends on what the picture shows and on whether it needs transparency or animation, because formats differ in how they compress and in what they can hold.

Image file extensions for nine formats in one table

Two files ending in .jpg and .jpeg hold the same JPEG data, because some formats use more than one extension. Lossless files reproduce the original exactly, while lossy files discard image data to get much smaller sizes. The table lists nine formats with their extensions.

MDN lists JPEG, PNG, GIF, WebP, AVIF and SVG as the formats most commonly used on the web, and it puts TIFF and BMP among the formats to avoid for web content. HEIF is in the table because iPhones can save photos in it and Windows needs an extra package to open it.

JPEG and PNG have a head-to-head test in JPEG vs PNG: which to use, tested on real images. WebP has its own write-up in What Is the WebP Format? Size, Support, Limits.

Raster vs vector, lossy vs lossless: how formats differ

A photo and a logo are stored in different ways, which is why no single recommendation fits every picture. A raster image is made of pixels, so it holds exactly the detail that was captured and nothing more. A vector image is drawn from shapes, so it stays accurate at any size.

Photos are raster, and SVG is the vector format in the table. The second split is about what happens to the data when the file is saved. Lossless compression keeps every bit of the original, and lossy compression throws some away to shrink the file.

Throwing data away costs little on a photograph, because the discarded detail is hard to see. It costs a lot on text and sharp edges, where blurring shows at once. Each format recommendation rests on these two splits.

Match the image file format to what the picture shows

Content settles the choice: photos tolerate lossy compression, and text and sharp edges do not. MDN sorts its advice for web pages into three groups, which are photos, screenshots and line art, and icons and charts. Photos taken on an iPhone are a fourth case, because a camera setting picks the type before anything is saved.

Photos: WebP or AVIF, with JPEG as the fallback

MDN prefers WebP or AVIF for raster images, because both generally compress better than PNG, JPEG and GIF. JPEG remains a good fallback for photographs. A web page can offer it through the <picture> element, so a browser without WebP or AVIF loads the JPEG instead.

AVIF compresses slightly better than WebP, but it is not quite as well supported in browsers and has no progressive rendering. A page that serves AVIF needs a fallback format with better support.

Screenshots and line art stay sharp in lossless PNG or WebP

Text and sharp edges need a lossless encoding, so screenshots, diagrams, logos and line art keep their detail. Lossy compression leaves blurring and colored fringes around text and sharp edges, and on these pictures the damage is very visible. PNG is lossless, and WebP and AVIF can be lossless too when that setting is chosen at encoding time.

Use SVG for icons and charts, or WebP when no vector exists

SVG fits any picture that must stay accurate when it is scaled up or down, such as charts and diagrams. Most icons also exist as vector files, and MDN says to use the SVG version whenever possible. An icon that exists only as pixels goes into WebP, with a fallback as for any other raster image.

On an iPhone, the Formats setting picks HEIF or JPEG

The Formats setting inside the iPhone Camera settings has two choices. High Efficiency saves new photos as HEIF, which takes less space, and Most Compatible saves them as JPEG. Apple says HEIF uses less storage than JPEG while preserving the same visual quality.

A photo that goes to someone whose app cannot open HEIC should be saved as JPEG first. For what a HEIC file is and when conversion matters, see What is a HEIC file? How it compares with JPG.

Need transparency or animation? Use PNG, GIF, WebP or AVIF

A logo with a see-through background or a small moving sticker rules out some formats at once. JPEG has no alpha channel, the data that records transparency, so it cannot keep a transparent background. PNG has full alpha transparency, and MDN names it as the fallback for any image that needs transparency.

GIF has no true color pixels, and its palette holds at most 256 colors. MDN warns that converting a full color image to GIF can give unsatisfactory dithering, so GIF suits simple pictures only.

WebP and AVIF handle transparency and animation together. For lossless animation MDN also names APNG as a good choice, since GIF is less performant. An AVIF file still needs a fallback format, which the <picture> element can supply.

JPG vs JPEG, HEIC vs HEIF and AVIF vs WebP: confusing pairs

Three pairs of names cause most of the mix-ups, and in each pair the two names overlap instead of competing. One is a spelling matter, one is a file type and its extension, and one is a trade-off between two good formats.

JPG and JPEG are the same format

MDN lists both .jpg and .jpeg as extensions of JPEG. Nothing differs in the file itself, so either one opens in the same apps.

HEIC is one extension of HEIF

Microsoft names three endings for these files, and all three need the same Windows package. HEIF is the format, and .heic, .hif and .heif are its extensions, so an iPhone photo ending in .heic is a HEIF file.

AVIF compresses better, WebP is better supported

MDN lists Chrome, Edge, Firefox, Opera and Safari as supporting each of the two. AVIF gives slightly better compression, while WebP has the wider support, so WebP is the safer single choice and AVIF needs a fallback.

Change a file format by re-saving the image in a converter

A conversion is a fresh save: the tool reads the picture and writes it out in the type that the destination accepts. Going from PNG to JPEG loses transparency, because JPEG has no alpha channel, so a logo with a see-through background should stay PNG. For converting WebP in particular, see Convert WebP to JPG or PNG, and JPG or PNG to WebP.

A folder of pictures that has to change type at once, such as PNG screenshots that must become JPEG, converts in one pass with the sakuttoAI Bulk Image Converter. The result is the same picture saved again in the new type.

Open .heic photos on Windows with HEVC Video Extensions

A HEIF file stays unreadable until two Microsoft packages are installed. The HEIF Image Extension and the HEVC Video Extensions package together show files ending in .heic, .hif or .heif. Microsoft says .avif files need the AV1 Video Extension package instead.

Converting the photo to JPEG with the sakuttoAI HEIC to JPG converter avoids the extensions altogether. For the missing codec itself, see Open HEIC files on Windows: the missing codec.

Summary: pick the format by what the image shows

Four rules settle most choices without saving a picture in every type to compare. The extension only names the type, so what the picture shows and what it has to do decide the rest.

• Photos go in WebP or AVIF, with JPEG as the fallback.
• Screenshots and line art stay lossless in PNG or WebP, and icons and charts go in SVG.
• A picture that needs transparency goes in PNG, WebP or AVIF, and one that moves goes in GIF, WebP, AVIF or APNG.
• A picture that does not fit its destination is re-saved in a converter, and Windows needs the HEIF Image Extension and HEVC Video Extensions to open .heic files.