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

The short answer

• JPG for photographs that you will share, upload or print. It is small and every program understands it.
• PNG for screenshots, logos, diagrams and anything that needs transparency or must not lose a single pixel.
• WebP for pictures on your own website when you want smaller files than JPG or PNG and your audience uses current browsers.

JPG (JPEG)

JPEG was designed in the early 1990s for photographs. It splits a picture into small blocks, keeps the broad patterns and throws away fine detail the eye is least sensitive to. The quality setting decides how much is discarded, which makes it easy to trade size for detail. Its strengths are small files, universal support and good results for photos. Its weaknesses are that it has no transparency, that it draws visible noise around sharp edges and text, and that each time you open and save a JPEG it loses a little more.

PNG

PNG stores every pixel exactly, so it never degrades, and it supports full transparency, including soft edges. That makes it the standard for screenshots, user interface graphics, logos and line art, where large areas of flat colour compress very well. For photographs it is a poor choice: the noise in a photo cannot be compressed losslessly, so a PNG photo is often five to ten times the size of the same picture as a JPEG.

WebP

WebP was created by Google for the web. It can compress lossily, like JPEG, or losslessly, like PNG, and both modes support transparency and, optionally, animation. According to Google’s documentation, lossy WebP files are 25–34% smaller than comparable JPEG files, and lossless WebP files are about 26% smaller than PNG. Every current major browser displays it. The catch is outside the browser: many upload forms, editors, print services and older systems still do not accept it, so it is best for pictures you control.

Side by side

How to choose

Using WebP on a website safely

The picture element lets a browser pick the first format it supports and falls back to the JPG for anything else:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Describe the picture" width="1200" height="800" loading="lazy">
</picture>

Always set width and height so the layout does not jump while the picture loads. You can make the WebP files with the JPG to WebP converter and the PNG to WebP converter.

Other formats you may meet

• HEIC/HEIF is the default photo format on recent iPhones. It is efficient but not accepted everywhere; in the iPhone camera settings you can choose the “Most Compatible” option to save JPEG instead.
• AVIF is a newer format that is often smaller than WebP. Browser support is good, but tools and forms support it even less than WebP.
• GIF supports short animations but only 256 colours, so videos and animated WebP or MP4 files are normally better today.
• SVG is a vector format for logos and icons that scales to any size without loss.

Frequently asked questions