JPG vs PNG: which image format should you use?

JPG and PNG get compared as if one were better. They are built on opposite assumptions. JPEG assumes it may throw detail away to save space; PNG assumes it may not. Everything else follows from that.

(JPG and JPEG are the same format — the three-letter spelling is a leftover from when file extensions could only be three characters.)

The difference in one table

Choose JPG when the image is a photograph

Photographs are made of gradual tonal change and fine texture — exactly what JPEG's model was designed for. At quality 80 a photograph is usually a small fraction of the equivalent PNG, and at normal viewing size the difference is not visible.

Use JPG for camera and phone photos, product shots without transparency, blog header images, email attachments, and anything going to someone whose software you cannot predict. Nothing in the last thirty years fails to open a JPEG.

Choose PNG when edges have to stay sharp

PNG stores exact pixels, so a black line on white stays a black line on white. Screenshots, UI captures, charts, diagrams, logos, icons and pixel art all belong here. So does anything with transparency, because JPEG simply has no way to store it.

The cost is size. A full-screen photograph saved as PNG can easily be several times its JPEG equivalent, with no visible benefit, because losslessly encoding millions of slightly different pixel values is hard work.

A rule that covers almost everything

1. Does the image need transparency? PNG.
2. Is it mostly text, flat colour or sharp lines? PNG.
3. Otherwise — it is a photograph. JPG.
4. Is it going on a website you control? Consider WebP instead of either: WebP vs JPG vs PNG explains when it is worth it.

What each one costs in practice

Exact numbers depend on the picture, but the pattern is consistent enough to plan around. Take a 1600px-wide image:

• A photograph — JPEG at quality 80 lands in the low hundreds of kilobytes. The same image as PNG is typically several times larger.
• A screenshot of a settings panel — PNG is often smaller than a high-quality JPEG and looks better, because large areas of identical colour compress extremely well losslessly.
• A logo on transparency — PNG is the only one of the two that can do it at all.

If you want the real figures for your own files rather than a rule of thumb, the Image Analyzer reports dimensions, colour depth, transparency and file size, and the Image Converter will show you what each output weighs before you download it.

Converting between them

Open the Image Converter, drop in one file or a folder, pick the output format and download. Two things are worth knowing before you do:

• PNG → JPG flattens transparency. Transparent pixels are painted onto a solid colour — white unless you choose otherwise. Set that background colour to match where the image is going.
• JPG → PNG cannot undo compression. The result is a lossless copy of an image that already lost detail, and it will usually be larger than the JPEG. There are good reasons to do it anyway — converting JPG to PNG covers them.

Common mistakes

• Saving screenshots as JPEG because "JPEG is smaller". For screenshots it frequently is not, and it always looks worse.
• Using PNG for photographs on a website. This is one of the most common causes of a slow page.
• Expecting a PNG copy to repair a blurry JPEG. Lost detail does not come back.
• Converting a transparent logo to JPEG and being surprised by the white box.
• Ignoring WebP, which does the job of both formats for web use.