JPG vs PNG for the web - when to use each image format
JPG suits photographs - lossy compression makes them 5-10x smaller than PNG with no visible quality loss. PNG suits screenshots, logos, and images with transparency - lossless, so text edges stay crisp. WebP gives you either format at 25-35% smaller.
freetoolonline.com Editorial TeamHow each format compresses pixels
JPG (also written JPEG) is a lossy format. The encoder converts pixels to the frequency domain (DCT), quantises high-frequency coefficients, and throws away the detail that the human eye is least likely to notice. The quality knob (0-100, where higher is better) controls how aggressively that quantisation removes detail. JPG is brilliant at photos and terrible at sharp edges - text, UI chrome, and line art acquire visible halo artefacts at typical web quality settings.
PNG (Portable Network Graphics) is a lossless format. The pixels out are bit-for-bit identical to the pixels in. PNG compresses by finding patterns in the pixel grid (DEFLATE on filtered scanlines) - excellent on large flat colour areas, mediocre on photographic gradients. PNG also supports transparency via the alpha channel, which JPG does not.
File-size comparison for the same image
| Image type | JPG (quality 82) | PNG | WebP (lossy q=82) | AVIF (q=50) |
|---|---|---|---|---|
| Photograph 1920×1080 | ~320 KB | ~3.2 MB | ~220 KB | ~160 KB |
| Screenshot 1920×1080 (UI) | ~180 KB (visible halos) | ~130 KB | ~90 KB | ~60 KB |
| Simple logo 512×512 (flat colours) | ~40 KB | ~18 KB | ~10 KB | ~7 KB |
| Icon 64×64 with transparency | Unsupported | ~2 KB | ~1 KB | ~0.8 KB |
The decision rules that hold in 2026
The decision rules that hold in 2026 on JPG vs PNG for web: use JPG (or WebP) for photos; use PNG when you need sharp UI edges or transparency the photo formats still handle poorly.
Photograph with transparency (cut-out subject on a transparent background). → PNG - JPG cannot represent alpha. Prefer WebP if your audience excludes legacy email clients and older Android WebViews.
Screenshot of UI, code, or text. → PNG as the canonical; WebP lossless as enhanced. Sharp pixel edges (text anti-aliasing, UI borders) reveal JPG compression artefacts at any quality below 90, and quality 90 JPGs are larger than the equivalent PNG.
Logo or simple graphic. → SVG if you have the vector source (see PNG vs SVG guide). If only a raster exists, PNG wins on sharpness; WebP lossless as enhanced.
Email newsletter header. → JPG or PNG only. Many email clients don't render WebP/AVIF. Use the universal format even when a modern codec would save bytes.
Quality-vs-size sweet spots
JPG quality 82 is the web default that worked for a decade. Below 75, compression artefacts become visible on detail-rich photos; above 90, file size grows fast with minimal visual gain.
Progressive JPG is a re-ordering of the same image data - same quality, same size, but the browser can show a low-res preview as soon as the first scanline group downloads. Use progressive encoding for any above-the-fold hero photo.
PNG optimisers (pngquant, oxipng, zopflipng) can shave 30-70% from a default PNG export with no quality loss - they search for better filter/compression parameters than the encoder tried. Always run optimisation before shipping a large PNG to production.
Picking quality: a concrete target
Picking quality: a concrete target for JPG vs PNG for web - start JPG around quality 75-85 for heroes, then compare bytes and artifacts before you ship a heavier file.
The <picture> fallback chain
The picture fallback chain on JPG vs PNG for web serves WebP or AVIF first, then JPG or PNG, so old browsers still get a readable image without a blank slot.
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="Description" width="1920" height="1080">
</picture>When to upgrade PNG to WebP or AVIF
WebP lossless is a drop-in replacement for PNG with ~25-35% file size savings on most content. Browser support is universal since Safari 14 (2020). If your audience is browser-only (not email-heavy), a single WebP lossless file replaces the PNG with no visual difference. AVIF lossless compresses further but has slower encode times and was only added to Safari in 16 (2022).
For photographs, AVIF at quality 50-60 typically matches JPG quality 85 at half the file size. The trade-off is encode time (AVIF is 10-30× slower than JPG to encode) and hardware decode support on older devices.
Converting between formats
Converting between formats for JPG vs PNG for web: open Image Converter, pick the target, and re-check transparency - flattening a PNG logo into JPG can paint a white box you did not want.
Related tools
- Compress Image - reduce JPG/PNG file size with AI quality tuning.
- JPEG Compression Level Checker - inspect the saved quality of any JPG.
- Resize Image - set exact pixel dimensions with bicubic interpolation.
- Insights Image Optimizer - PageSpeed-facing image audit.
- iPhone Photo Format Explained - HEIC, JPG, PNG, RAW - when iPhones use each format and how to convert for web publishing.
- How to Convert 100 HEIC Photos to JPG - batch conversion workflow for iPhone photo libraries.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.