Three formats, three different jobs
Almost every image you meet on the web or on your phone is one of three formats, and most image problems — a logo with a white box around it, a photo that is 8 MB, a screenshot with fuzzy text, a file a form will not accept — come from using the wrong one. The rule is short: JPG for photographs, PNG for anything with sharp edges or transparency, WebP when you control the destination and want the smallest file. The rest of this guide explains why, and what happens when you convert between them.
How each format stores pixels
| JPG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy — discards detail the eye is bad at seeing | Lossless — every pixel exact | Lossy or lossless |
| Transparency | No | Yes, 8-bit alpha | Yes |
| Animation | No | No (APNG is rare) | Yes |
| Colour depth | 8-bit | Up to 16-bit per channel | 8-bit (10-bit in lossless) |
| Typical photo size (12 MP) | 3–5 MB | 20–30 MB | 2–3 MB |
| Typical screenshot size (1080p) | 300–600 KB, fuzzy text | 200 KB–3 MB, perfect text | 100–300 KB |
| Opens everywhere? | Yes | Yes | Browsers and modern software; not older apps or many upload forms |
| Introduced | 1992 | 1996 | 2010 |
JPG: built for photographs
JPEG compression splits the image into 8×8 blocks, converts each to frequency components, and rounds away the high-frequency detail — fine texture and subtle colour variation — that human vision barely registers. On a photograph that is nearly invisible at 80% quality and cuts the file to a tenth of its raw size. On a logo, a diagram or text it is very visible: hard edges are exactly the high-frequency content JPEG throws away, so they grow faint halos and smudges. JPG also has no transparency; anything transparent becomes a solid colour, usually white.
- Quality 80–85% is the sweet spot: no visible difference from 100% on screen at roughly half the size.
- Every save re-compresses. Edit a JPG ten times and the artefacts stack up; keep a PNG or RAW master.
- Phones and cameras write EXIF metadata (camera, date, GPS) into JPGs. Most converters strip it — check with the EXIF reader if it matters either way.
PNG: built for graphics
PNG compresses losslessly by finding repetition, which flat colours, straight lines and repeated patterns have in abundance. A two-colour logo is a few kilobytes; a screenshot of a spreadsheet is small and its text is pixel-perfect. Photographs have almost no repetition, so a photo saved as PNG is huge — five to ten times the JPG — for no visible gain. PNG's alpha channel gives 256 levels of transparency, which is why cut-out product shots, icons and overlays are PNG.
- Use PNG for screenshots, UI graphics, logos, charts, text, anything to be edited further, and anything that needs a transparent background.
- Converting a JPG to PNG does not restore lost detail — it just makes the file bigger. Do it only when a program insists on PNG or you are about to edit repeatedly.
- PNG-8 (256 colours) is a much smaller variant for simple graphics; most tools write PNG-24/32.
WebP: built for the web
Google derived WebP from the VP8 video codec. It predicts each block from its neighbours and stores only the difference, uses a better entropy coder, and filters block edges — so at the same visual quality it is 25–35% smaller than JPG, and its lossless mode is about 25% smaller than PNG. It supports transparency and animation in one format. Every current browser reads it, and many sites now serve WebP automatically, which is why “Save image as” increasingly yields a .webp file.
The catch is everything outside the browser. Older versions of Office, Photoshop before 23.2, many photo viewers, digital frames, print kiosks and a large share of upload forms still reject it. The practical rule: publish WebP on your own site, but convert to JPG or PNG before sending a file to someone else or uploading it to a form you do not control.
What happens when you convert
| Conversion | Result | Use it when |
|---|---|---|
| PNG → JPG | Much smaller; transparency becomes white; slight softening of edges | A screenshot or graphic must meet a size limit and has no transparency |
| JPG → PNG | Much larger; no quality gain | A tool demands PNG, or you will edit the image many times |
| PNG → WebP | 60–80% smaller; transparency kept | Web graphics, app assets |
| JPG → WebP | 25–35% smaller; second generation of lossy compression | Web photos; keep the JPG as master |
| WebP → JPG / PNG | Larger; JPG loses transparency, PNG keeps it | Compatibility with older software and forms |
| HEIC → JPG | Roughly double the size; universally openable | Sharing iPhone photos outside Apple devices |
| SVG → PNG | Vector rasterized at a chosen pixel size | Platforms that do not accept SVG |
Two principles cover every row. Converting toward a lossless format never recovers detail a lossy format already discarded. And converting toward a lossy format should be the last step, done once from the best source you have.
Choosing quickly
- Is it a photo? JPG (or WebP for your own website). Never PNG.
- Does it have text, sharp lines or flat colour? PNG (or lossless WebP).
- Does it need a transparent background? PNG or WebP. Never JPG.
- Is it going to a form, an email or an older program? JPG or PNG. Not WebP or HEIC.
- Is it too big? Resize first — fewer pixels beats harsher compression — then compress.
- Will you edit it again? Keep a PNG master and export the final copy.
Size matters more than format for the web
A 4,000-pixel-wide photo is wasted on a page that displays it at 800 pixels; the browser downloads all the pixels and throws most away. Resizing to about twice the display width (for high-density screens) usually saves more than any format change, and then WebP at quality 80 finishes the job. The Image Resizer, Image Compressor and Compress to Target Size tools handle those three steps; the converters on the site handle the format change itself. For pages you control, serve WebP with a JPG fallback using the<picture> element or let a CDN negotiate the format.