Most people choose an image format out of habit. That works until a logo loses its transparent background, a screenshot full of text comes out fuzzy, or a page loads slowly because every photo on it is a full-size PNG.
JPEG, PNG, and WebP cover almost everything you'll deal with day to day. Each one does a couple of jobs well and a couple badly, and the differences come from how they compress.
The Short Answer
Photos want JPEG or WebP. Anything with sharp edges, text, or transparency wants PNG or lossless WebP. If you're putting images on a website and you control the format, WebP is usually the best pick for both. The rest of this covers why, and the cases where the simple rule breaks.
How JPEG Works, and Where It Fails
JPEG is lossy only. It always discards some image data, and it can't be told not to.
The compression splits the image into 8-by-8 pixel blocks and describes each block as a set of frequency patterns rather than individual pixels. Smooth areas need only a few patterns, so they compress hard. The encoder also throws away color detail more aggressively than brightness detail, because the eye is far more sensitive to light and dark than to small color shifts. For photographs this is close to invisible: skies, skin, and soft backgrounds are exactly the kind of gradual gradients the method handles well.
The failure case is any hard edge. A black letter on a white background sits right at the boundary between blocks, and the frequency approach can't represent a sharp transition cleanly. You get faint rings and smears around the edge, called ringing artifacts, plus visible seams where the 8-by-8 blocks meet. Screenshots, line art, logos, and diagrams all show this the moment you zoom in. JPEG also has no transparency at all, so every JPEG is a solid rectangle.
Save photos as JPEG when you need maximum compatibility. Keep everything with text or crisp edges away from it.
How PNG Works, and What It Costs
PNG compresses losslessly. The file is a pixel-for-pixel copy of the source, with no artifacts, ever. It does this with the same general method as ZIP: it finds repeated runs and patterns and stores them once. An image with large flat areas of identical color, which describes most logos, icons, and interface screenshots, compresses very well this way.
That's also the limit. Lossless compression can only remove data that's genuinely redundant. A photograph, where almost every pixel differs slightly from its neighbors, has little redundancy to find, so a PNG of a photo often runs three to five times larger than the same photo as a well-tuned JPEG. Putting photographic PNGs on a web page is one of the most common causes of a slow-loading site.
PNG comes in two main varieties. PNG-8 uses a palette of up to 256 colors and stays tiny, which suits simple flat graphics. PNG-24, and PNG-32 with an alpha channel, store full color and full transparency and are what most tools produce by default. The alpha channel is the other reason logos ship as PNG: it lets them sit on any background color without a visible box.
Use PNG for graphics, screenshots, anything with text, and anything that needs transparency. Skip it for photos unless you need a lossless master for editing.
How WebP Improves on Both
WebP is Google's format, built to replace both of the older two. It has a lossy mode and a lossless mode in the same format, it supports transparency in both modes, and it consistently produces smaller files.
The lossy mode borrows techniques from video compression. Instead of describing each block from scratch, it predicts a block from its neighbors and stores only the difference. That prediction step is why lossy WebP typically lands 25 to 35 percent smaller than a JPEG of the same visual quality. The lossless mode uses smarter pattern-matching than PNG and usually beats it by around 20 to 30 percent on the same graphic.
Browser support stopped being a concern years ago. Every current version of Chrome, Firefox, Safari, and Edge reads WebP natively. The remaining gaps are old software: some desktop image viewers, older versions of Office, and a few email clients still don't render it, which is why JPEG and PNG aren't going anywhere for files you send to other people.
For images you publish on a site you control, use lossy WebP for photos and lossless WebP for graphics and transparency. For images you email or hand to someone, fall back to JPEG or PNG unless you know their software handles WebP.
What About GIF and AVIF
GIF is worth mentioning only to rule it out for still images. It's limited to 256 colors and its compression is worse than PNG-8 for the same picture. The one thing it still does that the others don't in every browser is short looping animation, and even there, animated WebP and short video files come out smaller. For a static image there is no case where GIF is the right answer.
AVIF is the format after WebP: smaller again, based on newer video-compression technology, with the same transparency support. Browser support is now broad but not quite universal, and encoding is slower. It's a reasonable choice for a site where you can generate a JPEG fallback, but WebP is still the safer single-format pick for most people today.
The Mistake That Ruins Logos
Converting a transparent PNG to JPEG replaces every transparent pixel with solid white. A logo that was meant to sit on a colored header or a photo now has a white rectangle around it, and there's no way to recover the transparency afterward, because JPEG never stored it.
This catches people when a tool or a workflow silently converts to JPEG to save space, or when someone exports "for web" without checking the format. The fix is to decide up front whether the image needs a transparent background. If it does, your only options are PNG or WebP. If you've already got a white-boxed JPEG, you have to go back to the original transparent source, since editing the box out by hand rarely looks clean against anything but a flat color.
Converting Between Formats
The Image Converter here handles all three formats plus GIF and BMP, runs entirely in your browser, and converts in batches.
- Drop in one or more images
- Choose the output format
- For a lossy format, JPEG or WebP, set the quality slider; 85 is a solid default that's hard to tell from the original
- Download one at a time, or take everything as a ZIP
Nothing uploads. The conversion runs on your machine, so no server caps the file size and there's no wait for an upload to finish. It also means the images stay private, which matters for anything unreleased or client-owned.
Picking the Format in Practice
- Photo on a website you control: lossy WebP, quality around 80 to 85. Keep a JPEG copy if you need a fallback for old software.
- Photo you're emailing or sending: JPEG, quality 85.
- Logo, icon, or anything with a transparent background: PNG, or lossless WebP for the web.
- Screenshot, diagram, or image with text: PNG, or lossless WebP for the web.
- Lossless master for future editing: PNG.
Once you've picked a format, how to compress images without losing quality covers getting the file smaller with the Image Compressor. If your photos come off an iPhone as HEIC, how to convert HEIC to JPEG or PNG covers that step, and the HEIC Converter runs it in the browser.
Quick Checklist
- [ ] Matched the format to the content: JPEG or WebP for photos, PNG or lossless WebP for graphics, text, and transparency
- [ ] Checked whether the image needs a transparent background before choosing; don't use JPEG
- [ ] Used WebP for photos on a site you control, with a JPEG fallback only if old software needs it
- [ ] Set the quality slider to around 85 rather than accepting an unchecked default
- [ ] Batch-converted to a ZIP when working with more than a couple of files