JPG vs PNG for the web - when to use each image format

Published April 20, 2026

---

JPG and PNG were the two dominant web image formats from 1996 to the 2010s, and they're still the formats every browser, every image library, and every stock site supports without reservation. The split is simple in principle - JPG for photos, PNG for anything with sharp edges or transparency - but the real decisions today involve file size, a modern WebP/AVIF fallback chain, and whether a PNG screenshot is too heavy to ship. This guide covers the encoding mechanics, the decision rules that hold in 2026, and the upgrade path to modern formats.

How 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

The decision rules that hold in 2026

Photograph, full bleed, no transparency needed. → JPG (quality 80-85) as the baseline; WebP/AVIF as enhanced variants. A JPG at q=82 is visually indistinguishable from the lossless original for all but the most trained eyes. The file is 5-10× smaller than a PNG of the same photo.

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

Our JPEG compression level checker inspects an existing JPG and reports its quantisation table. Use it to reverse-engineer what quality a photo was saved at before re-encoding. Rule of thumb: a photo re-encoded more than twice at quality 82 loses visible detail; if you're the third hop in a chain, bump the quality to 90 to preserve headroom for a future re-save.

The <picture> fallback chain

Modern sites serve an AVIF or WebP variant to browsers that can decode it and fall back to JPG or PNG for the rest:

<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>

The browser picks the first source it can decode. The <img> is the universal fallback. Always include width and height to prevent cumulative layout shift.

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

Use our compress image tool for JPG re-encoding with AI-tuned quality. For format conversion in the other direction, PNG to SVG traces PNG logos into vectors; SVG to PNG rasterises a vector at an explicit pixel size. All conversions run in-browser - nothing uploads.

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.

← Back to Image Tools