JPG vs PNG vs WebP: A Plain Answer Per Use Case
Use JPG for photos you need to send or upload anywhere, PNG for screenshots, logos and anything with sharp text or transparency, and WebP for images on your own website. That's the plain answer, and it covers maybe 90% of cases. The other 10% is where people lose quality or end up with a 4 MB file that should have been 300 KB, so the rest of this guide goes through it use case by use case, with typical file sizes for the same image saved all three ways.
How the three formats differ in one paragraph each
JPG (or JPEG, same thing) is lossy. It throws away detail your eye is unlikely to notice, and you choose how much with a quality setting. It's brilliant for photos and terrible for flat colour and text, where it leaves fuzzy halos around edges. No transparency.
PNG is lossless. Every pixel comes back exactly as it went in, which is perfect for screenshots and logos and wasteful for photos. It supports full transparency.
WebP does both. It has a lossy mode that competes with JPG and a lossless mode that competes with PNG, and it supports transparency in either. Google's own measurements put lossy WebP at roughly 25 to 34% smaller than JPG at similar quality, and lossless WebP about 26% smaller than PNG (the details are on the WebP project page). Every current browser shows it. The catch is everywhere outside the browser.
Typical file sizes for the same image in each format
Here are ballpark results for three common kinds of image saved in all three formats: a 4032×3024 phone photo of a street, a 1920×1080 screenshot of a spreadsheet, and a 1000×1000 product cut-out on a transparent background. Lossy formats at quality 80, figures rounded.
| Image | JPG (q80) | PNG | WebP |
|---|---|---|---|
| Phone photo, 4032×3024 | 2.9 MB | 17.6 MB | 2.1 MB (lossy) |
| Spreadsheet screenshot, 1920×1080 | 310 KB, blurry text | 145 KB | 98 KB (lossless) |
| Product cut-out, 1000×1000, transparent | no transparency | 820 KB | 96 KB (lossy + alpha) |
Your numbers will be different. The pattern won't.
Two things tend to surprise people. First, PNG made the photo six times bigger than JPG and looked no better at normal viewing size. Second, JPG made the screenshot bigger than PNG and worse, because text edges are exactly what JPG is bad at.
Photos: JPG to share, WebP for your site
For a photo that's leaving your computer (email, a form upload, a print shop, a messaging app), use JPG. Every system on earth accepts it, and a lot of upload forms, especially government and job portals, still reject WebP or quietly convert it.
For photos on a website you control, WebP is the better choice. Smaller files mean a faster Largest Contentful Paint, and on a product page with 20 images the saving adds up to megabytes. Keep a JPG copy of the original somewhere, though. You'll want it the day a supplier or marketplace asks for "high-res JPG only".
Quality 75 to 85 is the sweet spot for both. Below 70 you start seeing blocky skies and smeared skin. Above 90 the file grows a lot for almost no visible gain. A 2.9 MB photo at quality 95 can easily pass 5 MB.
Screenshots, logos and text: PNG or lossless WebP
Anything with sharp edges, flat colour or small text should be lossless. That's PNG or lossless WebP, never JPG.
Saving a screenshot as JPG is probably the most common mistake there is. The text gets a faint grey fringe, and if someone saves it again (which happens constantly in chat apps), the fringe gets worse each time. Then there's the reverse mistake: converting a JPG photo to PNG "for better quality". It can't add back what JPG already threw away. You just get a much bigger file of the same blurry picture.
For logos, an SVG is better than any of the three if you have one. If you only have a bitmap, PNG is the safe choice for documents and email signatures, WebP for the website.
Transparency: the case for WebP is strongest here
Product cut-outs, stickers, overlays, anything that sits on a coloured background.
JPG can't do transparency at all, so it's out. PNG can, but a transparent photo-like image as PNG is huge because it has to be lossless. Lossy WebP with an alpha channel keeps the transparency and compresses the photo part, which is why the cut-out in the table drops from roughly 820 KB to under 100 KB. If you cut a product out with the Background Remover, export WebP for the shop page and PNG for anything you'll send to someone else to edit.
What about iPhone photos in HEIC?
Recent iPhones save photos as HEIC by default, which is another efficient format, roughly in the same league as WebP. It's fine on the phone and in Apple's own apps, but plenty of Windows programs, web forms and older Android phones can't open it, and a lot of upload forms reject it outright. If you're sending a photo off the phone, convert it to JPG first (or switch the camera to "Most Compatible" in the iPhone settings so it shoots JPG in the first place). For your own website, convert it to WebP.
Either way, don't upload HEIC and hope.
Why WebP isn't the answer to everything
Is WebP just better, then? In a browser, mostly yes. Outside it, not yet.
Older versions of some desktop photo viewers and office suites still struggle with it. Many print services want JPG or TIFF. Email clients mostly display WebP now, but if the recipient forwards it or drops it into a Word document, results vary. Social platforms accept it but often recompress it into their own format anyway, so you don't gain much uploading WebP there. And if a form says "JPG or PNG", believe it, even if WebP sometimes slips through.
There's also AVIF, which compresses even better than WebP. Browser support is good now, but encoding is slower and tool support is patchier, so for most small sites WebP is the practical middle ground.
What I'd actually do: a plain rule per use case
- Photo for email, forms, print or clients: JPG, quality 80.
- Photo on your own website: WebP, quality 75 to 80, resized to the width it's displayed at.
- Screenshot, chart, diagram, UI mockup: PNG to share, lossless WebP on your site.
- Logo: SVG if possible, otherwise PNG.
- Cut-out with transparency: WebP on the web, PNG for editing.
Format is only half of it, by the way. A 4000 px wide photo shown at 800 px is still five times wider than it needs to be in any format. Resize first, then pick the format, then compress.
To switch an image between the three, the Format Converter handles JPG, PNG and WebP in the browser without uploading anything. If you then need it under a specific size, the Image Compressor lets you drag the quality slider and see the result before you save. There are more format and size walkthroughs in the UtiliKit guides.
Frequently asked questions
Is WebP better quality than JPG?
At the same file size, WebP usually looks a little cleaner than JPG, or you get a smaller file at similar quality. The difference is modest on photos and only matters a lot when you have many images on a page.
Should I convert all my JPG photos to PNG?
No. PNG can't restore detail that JPG compression already removed, so you'd get a much larger file that looks the same. Keep photos as JPG or convert them to WebP for the web.
Why won't a website accept my WebP file?
Many upload forms, especially official and job portals, only accept JPG or PNG. Convert the image to JPG at around quality 80 and check the file size limit before uploading.
Which format is best for a logo with a transparent background?
SVG is best if you have a vector version. For a bitmap logo, use PNG for documents and email and WebP on your own website, since both keep transparency.