Choosing between JPG, PNG and WebP is the most common decision you make when putting images on the web — and getting it wrong means slow pages, blurry photos or bloated files. Here is the short version, followed by the details that matter.
The 10-second answer
- Photographs → JPG (or WebP if you can).
- Logos, icons, screenshots, anything with sharp edges or transparency → PNG (or WebP).
- You want the smallest files and modern browser support → WebP for everything.
JPG: the workhorse for photos
JPG uses lossy compression: it throws away detail your eye is unlikely to notice in exchange for dramatically smaller files. That makes it perfect for photographs and complex images with smooth colour gradients. The downside is that JPG cannot store transparency, and every time you re-save a JPG it loses a little more quality. Keep a master copy and export JPGs from it rather than editing JPGs repeatedly.
PNG: sharp edges and transparency
PNG uses lossless compression, so nothing is discarded — a PNG looks pixel-perfect every time. It also supports an alpha (transparency) channel. That makes PNG the right choice for logos, UI screenshots, diagrams, and any graphic that sits on top of another background. The trade-off is file size: a PNG photo can be five to ten times larger than the equivalent JPG.
WebP: the modern default
WebP is Google's format that offers both lossy and lossless modes and transparency. In practice a WebP file is typically 25–35% smaller than a comparable JPG and much smaller than a PNG, at similar visual quality. Every current browser supports it. Unless you need to send a file to someone using very old software, WebP is the smartest default for the web today.
Quick comparison
| Feature | JPG | PNG | WebP |
|---|---|---|---|
| Compression | Lossy | Lossless | Both |
| Transparency | No | Yes | Yes |
| Best for | Photos | Graphics/logos | Almost everything |
| Typical size | Small | Large | Smallest |
What to actually do
Store your originals as PNG or a high-quality master, publish photos as JPG or WebP, and publish graphics as PNG or WebP. If you are optimising an existing site, converting your PNGs and JPGs to WebP is often the single biggest, easiest page-speed win available.