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

The one-minute answer

Use JPG for photographs and anything that must open on any device. Use PNG for screenshots, diagrams, logos, and images with transparency. Use WebP for websites when you control the audience and want a smaller file. Those three rules cover most everyday decisions.

The longer answer is about what each format does with pixels. JPG throws information away to make the file smaller. PNG keeps every pixel but compresses the file losslessly. WebP can do either, and adds transparency and animation. None of them is universally better.

How JPG compression works

JPG divides the image into blocks, transforms them into frequency information, and discards the detail the eye is least likely to notice. Higher quality keeps more of that detail; lower quality throws more away. The result is a small file that looks good on a photo and bad on a screenshot.

Sharp edges are the weak point. Black text on a white background is exactly the kind of high-contrast detail the format struggles with, which is why a JPG screenshot often has coloured halos around letters. The format also has no alpha channel, so transparent pixels must be filled with a colour before export.

• Quality 85–92 is visually clean for most photographs.
• Below about 70, gradients and skin tones start to band and block.
• Each re-save adds another generation of loss; keep an untouched original.
• Chroma subsampling reduces colour detail before the main compression even starts.

How PNG compression works

PNG is lossless: the decoded image is exactly the encoded image. It compresses with a filter and DEFLATE, which works well on flat colours, repeated patterns, and text. That is why a screenshot of a document can be a few hundred kilobytes while a photograph of the same dimensions can be several megabytes.

PNG carries an alpha channel, so it is the default for logos and interface graphics that need to sit on an unknown background. The tradeoff is size. A 12 MP photo saved as PNG is often five to ten times larger than a high-quality JPG with no visible benefit for the viewer.

Where WebP fits

WebP was designed for the web. In lossy mode it typically produces a file 25–35 percent smaller than JPG at comparable visual quality. In lossless mode it usually beats PNG on graphics, and it supports transparency in both modes. Every current major browser can display it.

The catch is creation, not display. Safari can render WebP but cannot encode it from a canvas; asking for image/webp silently returns a PNG. That is why Cutmoor probes the encoder at runtime and hides WebP export where it is unavailable. Use JPG or PNG in Safari, or convert in Chrome, Edge, or Firefox.

• WebP is a good default for website images when your audience uses modern browsers.
• Some older desktop editors, print workflows, and upload forms still reject it.
• Converting WebP to JPG is easy; converting back cannot recover the original quality.
• A WebP file with a .jpg extension is still WebP. Check the actual format if an app refuses it.

Transparency, metadata, and colour

Transparency is the clearest dividing line. PNG and WebP support an alpha channel. JPG does not. If a logo with a transparent background is exported to JPG, the empty pixels become white or whatever colour the encoder chooses, and the result cannot be placed on a dark page without a visible box.

Metadata is the second difference. JPG files often carry EXIF data: camera model, exposure, capture time, and sometimes GPS coordinates. PNG carries less by default. WebP can carry metadata too. A canvas re-encode, as used by Cutmoor, strips most metadata and applies orientation to the pixels, which is good for privacy but removes copyright and colour-profile fields as well.

Colour profiles matter for print and for wide-gamut displays. A browser re-encode usually works in sRGB. If exact colour is critical, keep the original and use a colour-managed editor rather than a quick web conversion.

A practical decision tree

If you only remember one sequence, use this one.

• Is it a photograph? Choose JPG, or WebP if it is going on a website you control.
• Is it a screenshot, logo, chart, or image with transparency? Choose PNG, or lossless WebP for the web.
• Does an app or a person need to open it with zero friction? Choose JPG.
• Is the file too large? Reduce the dimensions before lowering quality.
• Are you converting an already-compressed photo? Accept that the next encode adds a small loss, and keep the original.

What conversion can and cannot fix

Converting a PNG to JPG removes transparency and may introduce artifacts, but it can turn a 6 MB screenshot into a 300 KB file. Converting a JPG to PNG does not improve quality; it preserves the current quality and usually makes the file larger. Converting a WebP to JPG improves compatibility at the cost of a second lossy encode.

If the goal is a smaller file, conversion is only half the job. Reducing the dimensions and choosing the right quality setting usually matters more than the container. A 4000 px JPG at quality 95 can be larger than a 1600 px JPG at quality 85, and the smaller one will look just as sharp on a phone.