PNG vs JPG vs WebP: Which Image Format Should You Use?
PNG, JPG and WebP each suit different images. Learn when to use each format, what conversion loses, and how to make images smaller without visible damage.
Most image format problems look like one of these: a screenshot saved as JPG with blurry, smudged text; a photo saved as PNG that weighs 8 MB; a logo whose transparent background turned white after conversion. Each one comes from using a format for an image it was not designed for.
The short version:
| Image | Best format | Why |
|---|---|---|
| Photos | WebP, or JPG | Lossy compression is invisible on photographic detail |
| Screenshots, UI, diagrams, text | PNG, or lossless WebP | Sharp edges and flat color survive intact |
| Logos and icons with transparency | SVG if you have it, else PNG or WebP | Alpha channel, crisp edges |
| Anything for a modern website | WebP | Smaller than both JPG and PNG for the same quality |
You can convert between PNG, JPG and WebP with the tool below. It decodes and encodes everything in your browser, so your images are never uploaded.
Image ConverterConvert an image between PNG, JPG and WebP. The file is decoded and re-encoded inside this page, so it never leaves your device and keeps working with no connection.How each format works
JPG (JPEG) is lossy. It splits the image into 8×8 pixel blocks and discards the fine detail the eye is least sensitive to. On a photo, where every pixel differs slightly from its neighbors, you cannot see the loss at reasonable quality settings. On a sharp edge, such as black text on white, the discarded detail shows up as ringing and smudging around the letters. JPG has no transparency.
PNG is lossless. Every pixel comes back exactly as it went in. It compresses by finding repeated patterns, which works very well on flat color and screenshots and badly on photos, where there are few exact repeats. A photo saved as PNG is often 5 to 10 times the size of a good JPG with no visible difference. PNG supports full transparency.
WebP does both. Lossy WebP is typically 25 to 35 percent smaller than JPG at the same visual quality, and lossless WebP is usually smaller than PNG. Both modes support transparency. Every current browser supports it, including Safari since version 14 in 2020, so the old reason to avoid it is gone.
AVIF compresses better still, especially at low file sizes. Browsers can display it, but most cannot encode it from a canvas, so browser-based converters, including this one, do not output it yet. It is worth using if your build pipeline or CDN generates it for you.
What conversion can and cannot do
Converting changes the container, not the history of the image.
- JPG to PNG does not restore quality. The detail JPG threw away is gone. You get the same blocky artifacts, stored losslessly, in a much larger file. The only good reason to do this is so you can edit the image without adding a second round of JPG loss.
- PNG to JPG removes transparency. JPG has nowhere to store it, so transparent pixels are filled with a background color. The converter uses white by default. If your logo sits on a dark site, pick a matching background or use WebP instead.
- Re-saving a JPG loses quality every time. Each save runs the lossy compression again. Edit from the original, and export to JPG once at the end.
- Animated GIFs keep only the first frame in any converter that works through a canvas, because a canvas holds one still image.
- Metadata is removed. Re-encoding through a canvas drops EXIF data, including camera details and GPS coordinates. That is usually a privacy win before you post a photo, but it also drops color profiles, so wide-gamut photos can look slightly flatter.
Choosing a quality setting
For lossy JPG and WebP, quality runs from 0 to 100 percent. It is not a percentage of anything; it is a dial for how much detail the encoder may discard. Practical ranges:
- 75 to 85 percent: the usual sweet spot for web photos. Files are a fraction of the original and differences are hard to spot at normal viewing size. The converter defaults to 82.
- 90 percent and above: file size climbs steeply for little visible gain. Use it for images people will zoom into, such as product photos.
- Below 60 percent: artifacts become visible, first in smooth gradients like skies, which start to show banding and blocks.
Quality is ignored for PNG because it is lossless. If a PNG is too big, the fix is fewer pixels or a different format, not a quality setting.
Size matters more than format
Format choice saves tens of percent. Dimensions save far more. A photo straight from a phone is often 4000×3000 pixels, about 12 megapixels. Displayed in an 800 pixel wide column, 96 percent of those pixels are never seen. Even at twice the display width for high-density screens, resizing to 1600×1200 cuts the pixel count by more than 80 percent, before format or quality enter into it.
A reasonable order of operations for web images:
- Resize to the largest size it will actually be displayed at, or twice that for high-density screens.
- Convert to WebP, or to JPG for photos and PNG for graphics if you need maximum compatibility.
- Set lossy quality around 80 and check the result at 100 percent zoom.
Serving WebP with a fallback
If you still need to support a very old browser or an email client that does not render WebP, the <picture> element lets the browser pick the first format it understands:
<picture>
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Team at the office" width="1600" height="900" />
</picture>
Always set width and height on the img. The browser reserves the space before the image loads, so the page does not jump around while it renders.