JPG vs PNG vs WebP: Which Image Format Should You Use?

Most questions about image formats come down to three choices. JPG, PNG and WebP can all show the same picture, but they store it in different ways, and each one is good at something the others are not. Picking the right one takes about ten seconds once you know two things: what is in the picture, and where the file is going.

The three formats in short

JPG, also written JPEG, was designed for photographs. It makes files small by discarding fine detail that the eye barely notices. That is called lossy compression, and how much is discarded depends on the quality setting used when saving. JPG cannot store transparency, and it leaves visible marks around sharp edges such as text.

PNG is lossless: it stores every pixel exactly. It supports transparency, and it is very efficient for pictures with large areas of a single colour, such as logos, diagrams and screenshots of software. For photographs it produces very large files, because exact storage of all that fine detail is expensive.

WebP is the youngest of the three and was made for the web. It can work in a lossy way like JPG or in a lossless way like PNG, it supports transparency in both, and its files are usually smaller than the JPG or PNG of the same picture. Its weak point is support outside browsers: some editors, office programs and upload forms do not accept it.

A quick way to choose

• A photograph to send, print or upload to a form: JPG.
• A logo, an icon, a diagram or a screenshot with text: PNG.
• Anything that needs a transparent background and has to open everywhere: PNG.
• Any picture that will be shown on a website: WebP, with the original kept as a backup.
• A picture you will edit several times: work in PNG, or in the own format of your editor, and export at the end.

Worked example: one picture, three destinations

You took a photo of a product on a white table, and you need it in three places.

1. For the online shop, export it from your editor and convert it to WebP at a quality around 80. The page loads faster, and browsers display it without trouble.
2. For a brochure that a print shop will produce, send a JPG at high quality, or whatever the print shop asks for. Do not send WebP unless they say they accept it.
3. For a presentation where the product should float on a coloured slide, cut out the background in an editor and save a PNG, because only PNG and WebP can be transparent and presentation software is more certain to accept PNG.

Notice that all three files should be made from the same original, and not from each other. Each lossy conversion costs a little quality, so a chain such as JPG to WebP to JPG ends up worse than either file had to be.

Common mistakes

• Saving photos as PNG. The picture is no better than a high quality JPG, and the file can be several times larger.
• Saving screenshots of text as low quality JPG. The letters pick up a grey haze. PNG keeps them clean.
• Converting JPG to PNG to improve it. The PNG stores the same pixels, flaws included, in a larger file.
• Sending WebP files to people. Not everyone can open them. For email and chat, JPG and PNG are the safe formats.
• Deleting originals after converting. Keep the best version of every picture. You can always make a smaller copy later, but never a better one.

What about AVIF, GIF and the rest?

AVIF is a newer format than WebP, and it often gives even smaller files, but it takes longer to create and fewer programs open it. It is worth considering for websites and little else for now. GIF is an old format limited to 256 colours. It survives mainly for short animations. ICO is a special container for program icons and website favicons. HEIC is what iPhones use for their own photos, and it usually has to be converted to JPG before other systems accept it.

Checklist

• I know whether my picture is a photo or a graphic.
• I know where the file is going and which formats are accepted there.
• I need transparency, or I am sure I do not.
• I am converting from the original and not from an earlier conversion.
• I kept the original file.