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

Images come in several formats, and choosing the wrong one gives you files that are too big, pictures that look blurry or a logo with an ugly black background. This guide explains how the common formats differ, when each is best and how to convert between them without wasting quality.

The one-minute answer

• Photographs: JPG, or WebP if it is for a website.
• Logos, icons and screenshots with text: PNG (or SVG for vector logos).
• Images that need transparency: PNG or WebP.
• Smallest files on modern websites: WebP, or AVIF where supported.
• Maximum compatibility, such as forms and email: JPG.

JPG (JPEG)

JPG uses lossy compression: it discards detail that the human eye is unlikely to notice, which gives small files for photographs. You control the trade-off with a quality setting. At around 85 percent, a photo usually looks identical to the original at normal size and is a fraction of the size. Below about 60 percent, blocky patches and blurred edges appear.

Weaknesses: no transparency, and artefacts around sharp edges and text. Every time you edit and save a JPG, more detail is lost, so keep an original.

PNG

PNG is lossless. It stores every pixel exactly and supports full transparency, so it is the standard for logos, icons, diagrams and screenshots. Flat colours and sharp edges compress very well. Photographs do not: the same photo can be five to ten times bigger as PNG than as JPG.

Use PNG when precision matters, when the image will be edited again, or when you need see-through areas.

WebP

WebP was developed by Google to replace both JPG and PNG on the web. It supports lossy and lossless compression and transparency, and files are typically 25 to 35 percent smaller than JPG at similar visual quality. All current browsers support it. Its weakness is that some older software and some upload forms still do not accept it.

For website images WebP is usually the best choice. For files you send to other people, JPG is safer.

AVIF

AVIF is newer still and often gives even smaller files than WebP, with good handling of gradients and transparency. Support is good in current browsers, but it is slower to encode and some tools cannot open it. It is worth considering for websites where every kilobyte counts, with a WebP or JPG fallback.

Comparing what matters

• Photo of a landscape, 4,000 by 3,000 pixels: JPG at 85 percent is often 2 to 4 MB; the same photo as PNG can exceed 15 MB; WebP is usually 25 to 35 percent smaller than the JPG.
• Screenshot of a spreadsheet: PNG is usually smaller and sharper than JPG, because the flat colours compress well and JPG smears the text.
• Logo with a transparent background: PNG or WebP. JPG cannot store the transparency, and will show a solid box.

Transparency and JPG

When a transparent PNG is converted to JPG, the transparent areas must be filled with something. Many tools use black, which ruins logos. Choose a fill colour that matches where the picture will be used, usually white. The PNG to JPG converter lets you pick it.

Converting without losing quality

Lossy formats lose a little each time. Convert from your original file wherever possible, and avoid the chain JPG to WebP to JPG. Converting a JPG to PNG makes the file bigger without restoring anything. Resize before you compress: a large photo reduced to the size you need will be smaller than any quality setting can achieve. Tools you can use include the Image Converter, Image Compressor and Image Resizer.

Choosing by use

1. Blog post or website image: resize to the display width (twice that for high-resolution screens), then save as WebP or JPG at 75 to 85 percent.
2. Product photo: JPG or WebP, with a white or transparent background if needed.
3. Logo: SVG if possible; otherwise PNG at a suitable size. Turn SVG into PNG with SVG to PNG.
4. Email attachment: JPG at a moderate size.
5. Document scans: JPG for photographs of pages, then combine into a PDF with JPG to PDF.
6. iPhone photos: convert HEIC to JPG for sharing, see how to convert HEIC to JPG.