Every image you put on a website is a trade-off between file size, quality and features. PNG, JPG and WebP cover almost every case, but they are not interchangeable. This guide explains what each format is good at and how to choose without guessing.
The short answer
- JPG for photographs and complex images where a small file matters more than perfect pixels.
- PNG for screenshots, diagrams, logos and anything that needs transparency or lossless detail.
- WebP when you want the smallest file at a similar quality, with transparency support.
Quick comparison
| Format | Compression | Transparency | Best for |
|---|---|---|---|
| PNG | Lossless | Yes | Screenshots, graphics, logos |
| JPG | Lossy | No | Photos, sharing, email |
| WebP | Lossy or lossless | Yes | Modern websites, smaller files |
PNG: sharp pixels, larger files
PNG is a lossless format. Every pixel is preserved exactly, which makes it the right choice for screenshots, UI mockups, charts and logos with hard edges. PNG also supports an alpha channel, so transparent backgrounds stay transparent.
The cost is size. A photograph saved as PNG can easily be five to ten times larger than the same photo as JPG, because photographs contain a lot of subtle colour variation that lossless compression cannot throw away. That is why PNG is a poor default for photo galleries.
Use PNG when:
- the image has text, thin lines or sharp edges;
- you need a transparent background;
- you may edit the file again and want to avoid repeated lossy compression.
JPG: small photos, no transparency
JPG uses lossy compression. It discards detail the human eye is less likely to notice, which is very effective for photographs. A high-quality JPG often looks identical to the source while being much smaller.
The trade-offs are real: JPG has no alpha channel, and every save loses a little more detail. Repeatedly editing and re-saving a JPG is a bad idea. Text and sharp edges can also pick up visible artifacts, especially at low quality settings.
Use JPG when:
- the image is a photograph;
- file size matters more than pixel-perfect accuracy;
- the image does not need transparency.
A quality setting around 80–90 is usually the sweet spot. Below 70, artifacts become easy to see on faces, skies and gradients.
WebP: the modern default
WebP supports both lossy and lossless compression, plus transparency. At similar visual quality it is often 25–35% smaller than JPG, and it can replace PNG for graphics that need alpha.
Browser support is no longer a problem: current Chrome, Firefox, Safari and Edge all display WebP. If you need to support very old browsers, keep a JPG or PNG fallback, but most sites no longer need one.
Use WebP when:
- you want the smallest file for the web;
- the image needs transparency;
- you are happy to target modern browsers.
How to choose without overthinking
- Is it a photo? Start with JPG or WebP.
- Does it need transparency? Use PNG or WebP.
- Is it a screenshot or logo? PNG or lossless WebP.
- Is bandwidth important? Prefer WebP, then JPG.
- Will you edit it repeatedly? Keep a PNG master and export a compressed copy.
You can convert between the three formats in the browser with the Image Converter. It keeps the original dimensions and lets you tune the quality for JPG and WebP.
Common mistakes
- Saving screenshots as JPG. Text edges become fuzzy and the file is not even much smaller. Use PNG or WebP.
- Saving photos as PNG. The file is much larger with no visible benefit. Use JPG or WebP.
- Using a 4000px image at 400px width. Resize first, then compress; the browser should not download pixels it will never display.
- Re-saving a JPG many times. Each save compounds compression artifacts. Keep the original and export once.
- Forgetting transparency. JPG flattens transparent areas to white, which can ruin a logo on a coloured background.
If you need to shrink a large photo before uploading it, the Image Compressor can resize and compress it locally. And if you are preparing a site icon, the Favicon Generator produces every size from one image.
A simple rule of thumb
Use WebP for the web when you can, JPG for photos, and PNG for screenshots, graphics and transparency. Convert deliberately, resize before compressing, and keep a lossless master for anything you may edit again.