Choose the wrong image format and you either bloat your page with a 4 MB screenshot or publish a smudged photograph that looks terrible on retina displays. Choose the right one and the file is small, the picture is sharp, and your site loads fast.
This guide covers the three formats that matter for the web today — PNG, JPG and WebP — with a simple decision tree at the end and concrete examples for common jobs.
The one-line summary
- JPG — for photographs and anything with continuous colour.
- PNG — for screenshots, logos, icons and anything that needs transparency.
- WebP — a modern replacement that beats both on size, with support in every current browser.
If you skim no further: photos become JPG or WebP, graphics become PNG or WebP, and if you don’t care about legacy support at all, WebP wins on file size.
JPG: the format for photographs
JPG (also written JPEG) uses lossy compression. It throws away visual information the human eye is less sensitive to — subtle colour shifts and high-frequency noise. The result is a small file that still looks photographic.
The tradeoff: repeated saves accumulate damage. Every re-export chips away at quality. Also, JPG can’t store transparency, so it’s a poor choice for logos or graphics with cut-out edges.
Use JPG when:
- The image is a photograph or has smooth gradients
- You need the smallest possible file for a photo
- You don’t need transparency
Avoid JPG when:
- The image has sharp edges (screenshots, text, UI mockups)
- You’ll be re-editing it repeatedly
- You need any transparent pixels
PNG: the format for graphics
PNG uses lossless compression, meaning every pixel is preserved exactly. It also supports full alpha transparency — critical for logos placed on coloured backgrounds and for any graphic that isn’t rectangular.
The catch: because PNG doesn’t discard anything, photograph-heavy PNG files can be five to ten times larger than the same image as JPG. On a portrait shot, that might be the difference between 300 KB and 3 MB.
Use PNG when:
- The image contains text, sharp lines or flat colour blocks (screenshots, icons)
- You need transparency
- You’ll edit or export the file multiple times
Avoid PNG when:
- The image is a photograph — you’ll waste bandwidth
- File size is critical and transparency isn’t required
WebP: the modern default
WebP was designed by Google to combine JPG’s efficiency with PNG’s flexibility. It offers both lossy and lossless modes, supports transparency, and typically produces files 25–35% smaller than JPG at equivalent quality.
Every current browser supports WebP — Chrome since 2010, Firefox since 2019, and Safari since version 14 (2020). Unless you’re targeting users on browsers older than roughly 2020, WebP is safe.
Use WebP when:
- File size matters (mobile users, slow networks, ad-driven sites)
- You control the delivery — for example, on your own website or blog
- You want a single format that handles photos and graphics with transparency
Avoid WebP when:
- You’re producing images for a platform that doesn’t accept it (some CMSs, some print workflows, older email clients)
- You need a format editors like Photoshop open natively without a plugin (JPG and PNG are safer bets)
A decision tree that fits on one line
Ask three questions in this order:
- Is it a photograph? → WebP (or JPG for maximum compatibility).
- Does it need transparency? → WebP (or PNG for maximum compatibility).
- Otherwise — sharp graphics, screenshots — → PNG (or WebP if size matters).
Notice a pattern? WebP is the modern default; JPG and PNG are the safe fallbacks. Pick WebP unless you have a specific reason not to.
How much does the format actually save?
Some rough numbers from a 2,000 × 1,300 photograph:
- PNG (lossless): ~4.2 MB
- JPG at 80% quality: ~340 KB
- WebP at 80% quality: ~240 KB
For a 1,200 × 800 UI screenshot:
- PNG (lossless): ~180 KB
- JPG at 90% quality: ~140 KB, with visible artifacts around text
- WebP (lossless): ~90 KB, with text rendered perfectly
On real projects those savings add up quickly — every kilobyte saved is a kilobyte your readers don’t have to download.
Convert your images in seconds
You don’t need Photoshop or a desktop app to switch between formats. Zevqi’s free Image Converter handles JPG, PNG and WebP both directions, runs entirely in your browser (so your images never touch a server), and preserves quality where it can.
Once you’ve picked a format, use the Image Compressor to trim the file down further with a simple quality slider — you’ll see the before-and-after preview in real time.
The bottom line
Formats aren’t about following rules — they’re about matching the tool to the job. Photos: JPG or WebP. Graphics: PNG or WebP. When in doubt: WebP. And when file size matters more than anything, always run a compressor before you publish.
Ready to put this into practice? Zevqi has the tools built in — free, no signup.