PNG vs JPG vs WebP: which picture format should you use?

PNG, JPG and WebP are the three picture files you meet every day, and the usual advice ("JPG for photos, PNG for graphics") is right but vague. This guide gives you the reasons behind it, and real numbers: we took three test pictures, saved each in every format with our own image converter, and wrote down the file sizes. Where a fact is about the formats in general rather than our test, it comes from MDN's guide to image file types.

The three formats side by side

On Safari for a Mac, WebP needs Safari 14 or later and macOS Big Sur (11) or newer, according to MDN. Everywhere else a current browser has it.

What we measured

We used three pictures of our own: a 1024 × 768 photograph, a 1024 × 768 screenshot-style picture (flat colors, a menu bar, lines of text) and a 600 × 400 orange logo with a transparent background. Each started as a PNG made by a standard encoder, and each was converted by our page. Sizes are in kilobytes.

Three things stand out.

• The photo shrank a lot. At quality 92 the JPG is about one eighth of the PNG (153 KB against 1,263 KB). That is the reason photos are JPGs.
• The screenshot and the logo did not. As a JPG at quality 92 the screenshot is 123 KB, which is more than the 93 KB PNG, and the logo went from 13 KB to 17 KB. You only get a smaller file by dropping the quality to around 80 or below, and that is where the damage starts to show.
• WebP was the smallest in every row. The quality numbers of the two formats are not the same scale, so do not read the table as "WebP 80 beats JPG 80". Compare by eye, at the size the picture will be shown.

Why a screenshot gets bigger as a JPG

JPEG compresses a picture in small blocks and keeps the smooth changes that photographs are full of, while it discards fine, sudden changes. A screenshot is the opposite: large areas of one flat color, and hard edges around letters. PNG stores flat areas very cheaply and keeps every edge exact. JPG has to spend extra data to describe the sharp edges, and it still blurs them: the faint "mosquito" speckles you see around text in a JPG screenshot are a side effect of that. MDN says the same in its own words: lossy compression on content that needs sharpness, such as diagrams or charts, can produce unsatisfactory results, and it recommends lossless formats for screenshots, diagrams, logos and line art.

So if a PNG is a screenshot or a logo, leave it as a PNG. Convert to JPG only when the picture is really a photograph, which is when the saving is large. Our PNG to JPG page shows the old and new size on every row, so you can see right away which files got smaller.

What the JPG quality number does

The quality slider (0 to 100 in most tools) trades size against faithfulness. On our photo, going from 100 to 92 cut the file from 358 KB to 153 KB, which is less than half, and 80 brought it to 115 KB. We also compared the JPGs with the original PNG pixel by pixel. At quality 92 the score was 44.6 dB (PSNR, a standard measure where higher is closer to the original), and the worst single pixel was off by 30 levels out of 255. At quality 80 the score was 39.7 dB and the worst pixel was off by 44 levels. Those numbers are for one photo, but they show the pattern: the average error stays small, while a few pixels, usually on edges, move more. We use 92 as the default in our converter because it keeps most of the saving without the obvious loss, and we would not go below about 80 for pictures you care about.

Re-saving, and why PNG is the safe format to edit in

Every time a JPG is opened, changed and saved again, it is compressed again, and the small errors add up. This "generation loss" is why a picture passed through a messaging app several times looks worse each time. A PNG has no such problem: save it a hundred times and it is still the same pixels. If you plan to edit a picture many times, work in PNG and make the JPG at the very end.

Turning a JPG into a PNG does not bring back the detail the JPG already lost: the PNG is a perfect copy of the damaged picture, and it is much bigger (our 155 KB test JPG became a 1.2 MB PNG). It only stops further loss. The JPG to PNG page explains when that is worth doing.

WebP: smaller, with a compatibility catch

MDN reports that lossy WebP files are on average 25 to 35 percent smaller than JPEGs of visually similar quality, and that lossless WebP is typically 26 percent smaller than the same picture as a PNG. Our test agrees with the direction. The catch is compatibility. Every current browser opens WebP, but some older programs, office tools, print services and upload forms do not, and many websites now serve WebP to browsers that accept it, so a picture saved from a page often arrives as a .webp file that you cannot use elsewhere. In that case the WebP to JPG converter fixes it in one step. For your own web pages, MDN's advice is to prefer WebP or AVIF and to offer a JPEG or PNG as a fallback.

Transparency and animation

• Transparency. Only PNG and WebP can be see-through. When you save a JPG, the transparent areas have to be filled with a color, and soft edges blend into it. Our converters let you pick white, black or any color, so choose the color of the page the picture will sit on.
• Animation. WebP, GIF and APNG can move; JPG cannot. Our converters read only the first frame of an animated picture, so an animated WebP, GIF or PNG becomes a still picture. We tested animated WebP and PNG: the result is the first frame.
• Color depth. A 16-bit PNG is saved by our converters at 8 bits per channel, which is what JPG and ordinary screens use.

What stays inside the file

Camera JPGs carry details such as the date, the camera and sometimes the GPS location, and pictures from image generators often carry their prompt in hidden text. Our converters draw a fresh picture and do not copy any of that, which is good for privacy and bad if you need the information. See our guides on EXIF data and on reading the prompt stored in a picture, and use the metadata viewer first if you want to see what a file holds.

Which one should you choose?

Converting between them

We built a page for each common conversion, all on the same code and all showing the old and new size of every file: PNG to JPG, WebP to JPG, JPG to PNG, HEIC to JPG and HEIC to PNG. The general image converter also writes WebP, and the image compressor and image resizer help when the file is still too big. Keep your originals: a lossy conversion cannot be undone.