WebP vs PNG vs JPG: Choosing the Right Image Format
JPG is for photos that must open anywhere, PNG is for exact pixels, and WebP does both jobs in smaller files on the web.
Picking an image format comes down to three questions: may the encoder throw away detail, does the image need transparent areas, and where will the file be opened? JPG, PNG and WebP each answer those differently. WebP is usually the best choice for images on a website, but PNG and JPG still win in some places, and knowing which saves you from blurry logos, white boxes around cut-outs and upload forms that reject your file.
The formats side by side
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy | Lossless | Lossy or lossless |
| Transparency | No | Yes, full alpha channel | Yes, in both modes |
| Animation | No | Through APNG | Yes |
| Colour depth | 8 bits per channel in practice | Up to 16 bits per channel | 8 bits per channel |
| Maximum size | 65,535 × 65,535 pixels | Over 2 billion pixels per side | 16,383 × 16,383 pixels |
| Opens in | Practically everything | Practically everything | All current major browsers; not every app or upload form |
| Best for | Photos that must work everywhere | Screenshots, UI, graphics with sharp edges | Most images on a website |
Lossy and lossless: the real difference
Lossy compression discards detail the eye is unlikely to notice, and a quality setting decides how much. It suits photographs, where noise and gradients hide small changes. It hurts text, thin lines and flat areas of colour, which pick up soft edges and faint blotches. Every re-save loses a little more, so always convert from the original rather than from an earlier JPG.
Lossless compression keeps every pixel exactly. It is the right choice for screenshots, diagrams, pixel art and anything you will edit again. For a photograph it produces a much larger file, because camera noise is expensive to store exactly.
JPG is only lossy and PNG is only lossless. WebP has both modes in one format, which is its main practical advantage: a photo and a screenshot can both be WebP, each compressed the appropriate way.
How much smaller is WebP?
Google, which developed the format, publishes this comparison: lossless WebP images are 26% smaller than PNGs, and lossy WebP images are 25–34% smaller than comparable JPEGs at equivalent SSIM quality. Those are averages over Google's test images, not a promise for every file.
Your own results can be better or worse. Google's WebP FAQ notes that a WebP can come out larger than its source, typically when a PNG with only a few colours is converted to lossy WebP, or when an already lossy image is stored as lossless WebP. Lossy WebP also always uses 4:2:0 chroma subsampling, storing colour at half the horizontal and vertical resolution of brightness, so saturated red or blue edges in graphics can look slightly smeared where a PNG stays crisp. The reliable approach is to convert and compare: the Image Converter shows the original and new size of every file, so you can see the actual saving before you keep it.
Transparency and animation
JPG has no alpha channel. Converting a transparent logo to JPG fills the transparent area with a solid colour; this site's converter uses white. PNG stores full alpha losslessly, which makes transparent photos, such as product cut-outs, heavy. WebP supports alpha in lossy mode too, so a cut-out photo can keep its soft edges at a fraction of the PNG size. That case is where PNG to WebP saves the most.
For animation, JPG has none, PNG has the APNG extension, and WebP has animation built in. According to Google, animated WebP files can be smaller than the same animation as GIF or APNG. For long or complex clips, a muted MP4 or WebM video is usually lighter than any image format.
Which format to use
| Image | Use | Why |
|---|---|---|
| Photos on a website | WebP, lossy | Smallest widely supported option |
| Photos for email, print or upload forms | JPG | Opens in every program and passes every form |
| Screenshots with text, UI mock-ups | PNG or lossless WebP | Text stays sharp, nothing is smeared |
| Logos and icons | SVG if you have vectors, otherwise PNG or WebP | Keeps sharp edges and transparency |
| Product photo with a transparent background | WebP, lossy with alpha | Soft edges at a fraction of the PNG size |
| Short animation | Animated WebP, or MP4/WebM for longer clips | Much lighter than GIF |
| Master copies you will edit again | PNG, or the original camera file | No generation loss |
Moving existing images over is quick: JPG to WebP for photos, PNG to WebP for graphics and cut-outs. When a WebP will not open in older software, WebP to JPG fixes it, and PNG to JPG shrinks photos that were saved as PNG by mistake.
Browser support and a fallback with picture
Current versions of Chrome, Edge, Firefox and Safari all display WebP, so for most sites a WebP in an ordinary <img> is enough. If you must also support old browsers, or you want to offer a newer format first, use the <picture> element. The browser takes the first <source> whose type it supports and falls back to the <img>, which also carries the alt text and dimensions:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>A server or CDN can do the same job without extra markup by looking at the Accept header of the image request and returning WebP when it is listed. If you do that, send Vary: Accept so caches keep the versions apart.
Where AVIF fits
AVIF is based on the AV1 video codec and is supported by current versions of Chrome, Edge, Firefox and Safari. It often produces smaller files than WebP at similar visual quality, but it is slower to encode and fewer tools, editors and upload forms accept it. A common setup is AVIF first, WebP second and JPG last, as in the example above. This site's converter can read AVIF files when your browser can decode them, but it writes WebP, PNG, JPG and ICO, not AVIF.
Converting in the browser: a Safari caveat
Browser-based converters draw the image on a canvas and ask the browser to encode it. Chrome, Edge and Firefox can encode WebP that way. Safari displays WebP but cannot encode it from a canvas and quietly returns a PNG instead, so this site's converter stops with a message rather than saving a PNG with a .webp name. On a Mac, run WebP conversions in Chrome, Edge or Firefox. On an iPhone or iPad, other browsers generally use Safari's engine as well, so convert on a computer or choose PNG or JPG.
Two more things are worth knowing. In Chrome, a quality of 100 produces a lossless WebP, while lower values produce lossy WebP; we confirmed this by inspecting the encoded files. And canvas encoding does not copy metadata, so EXIF data such as the camera model and GPS position is left out of the converted file.