JPG vs PNG: which format should you use?

JPG and PNG are the two most common image formats on the web, but they solve different problems. JPG uses lossy compression tuned for photographs, producing much smaller files at the cost of some pixel-level detail. PNG uses lossless compression and supports transparency, making it the right choice for logos, screenshots, and any image with sharp edges or flat colour blocks.

Head-to-head comparison

Aspect	JPG	PNG
Compression	Lossy (throws away detail)	Lossless (preserves every pixel)
Typical file size	Small (2-5 MB from a 24 MP camera)	Large (10-25 MB same source)
Transparency (alpha)	No — flattens to background	Yes — 8-bit alpha
Colour depth	24-bit (16.7M colours)	24-bit or 48-bit
Best for	Photographs, web images	Screenshots, logos, UI, diagrams
Worst for	Text, sharp edges, transparency	Photographs (files get huge)
Browser support	Universal (since ~1995)	Universal (since ~1996)
Editing quality loss	Each save = more artifacts	None — infinite edits, no loss

When to use each

Use JPG when

The image is a photograph and file size matters (web, email, upload forms)
Nobody needs to edit it further — final delivery, not source
Transparency is not required
You need the smallest possible file that still looks good

Use PNG when

The image contains text, sharp edges, or flat colour areas
You need transparency — logos, UI elements, product mockups
The image will be edited or resaved multiple times
Quality matters more than file size (design tools, archival)

The verdict

Use JPG for photographs shipped to the internet. Use PNG for everything else — screenshots, logos, illustrations, anything with edges. The one trap people hit: converting a low-quality JPG to PNG doesn't rescue the quality, it just makes a bigger file with the same JPG artifacts baked in.

What actually happens inside each format

How JPG compression works

JPG splits an image into 8×8-pixel blocks, converts each block from RGB to YCbCr (luminance + two chroma channels), applies a Discrete Cosine Transform to separate low-frequency detail from high-frequency noise, and then quantises the result — rounding small coefficients to zero. That quantisation step is where data is permanently discarded. At quality 85 (a common default), a 4000×3000 photograph typically compresses from ~36 MB of raw pixel data down to 2–4 MB. Drop to quality 60 and you'll hit 500 KB–1 MB, but text and sharp edges start showing visible ringing artifacts around high-contrast boundaries.

How PNG compression works

PNG runs each row through a prediction filter (Sub, Up, Average, or Paeth) to reduce redundancy, then feeds the result through DEFLATE — the same lossless algorithm used in ZIP files. Because no data is discarded, a PNG of that same 4000×3000 photograph will be 15–25 MB. However, for images with large flat-colour regions (a screenshot, a diagram, a logo on a white background), the filter + DEFLATE combination is extremely efficient — a 1920×1080 screenshot with mostly text and UI elements often compresses below 300 KB, smaller than a JPG of the same image would be.

File size comparison on real images

We converted the same source images to both formats at typical settings. A 24 MP smartphone photo: 3.2 MB as JPG (quality 85), 22.4 MB as PNG — JPG is 7× smaller. A 1080p desktop screenshot with text: 245 KB as PNG, 410 KB as JPG (quality 90) — PNG is actually 40% smaller because the flat-colour regions compress better with lossless prediction than with DCT. A logo on a transparent background: only possible as PNG (or WebP), since JPG has no alpha channel at all.

What about WebP and AVIF?

WebP (by Google, 2010) and AVIF (from the AV1 video codec, 2019) both offer smaller files than JPG and PNG at the same visual quality. WebP supports lossy, lossless, and transparency modes — it's essentially a better version of both formats in one container. AVIF pushes compression even further but encodes more slowly. As of 2026, both are supported in all major browsers. For new web projects, WebP is the pragmatic default. JPG and PNG remain the safe choices when you need universal compatibility outside the browser — email attachments, office documents, print workflows, and any software that hasn't adopted the newer formats.

Frequently asked questions

Does converting JPG to PNG improve image quality?

No. Once JPG compression has discarded pixel data, converting to PNG preserves what's left but cannot recover what was thrown away. The result is a larger file with the same visual quality — the JPG artifacts are now permanently baked into the lossless PNG. Convert to PNG only if you need transparency or plan to edit the image further without additional quality loss.

Is PNG always bigger than JPG?

Not always. For photographs and complex natural scenes, PNG files are typically 5–10× larger than JPG. But for images with flat colours, sharp edges, and limited colour palettes — screenshots, diagrams, logos, UI mockups — PNG is often smaller than JPG because its prediction filters exploit the spatial redundancy that JPG's DCT doesn't handle well.

Which format should I use for a website hero image?

For a photographic hero image, use JPG (or WebP if your stack supports it) — file sizes will be 5–10× smaller than PNG, which directly improves your Largest Contentful Paint score. For a hero with illustration, text overlay, or transparency, use PNG. If you're building a modern site and can serve WebP with a JPG/PNG fallback, that gives you the best of both worlds.

Can JPG files have transparent backgrounds?

No. JPG does not support an alpha channel. If you save an image with transparency as JPG, the transparent area is flattened to a solid colour (usually white). Use PNG, WebP, or AVIF for images that need transparent backgrounds.

Why do screenshots look blurry when saved as JPG?

JPG compression is optimised for photographs — continuous-tone images with gradual colour transitions. Screenshots contain sharp pixel-level edges between text and background, and JPG's block-based DCT compression creates visible ringing artifacts around those edges, even at high quality settings. PNG preserves every pixel exactly, so screenshots stay crisp.

What JPG quality setting should I use?

For web delivery, quality 80–85 is the sweet spot — visually indistinguishable from the original in most photographs, at roughly 1/10th the uncompressed file size. Quality 60–70 is acceptable for thumbnails and previews. Below 60, artifacts become noticeable. Above 90, file sizes increase rapidly with minimal visible improvement.

Should I use JPG or PNG for printing?

For photographic prints, use the highest-quality JPG your camera produces (or the original RAW file). For graphics with text, logos, or sharp edges, use PNG to avoid compression artifacts. In both cases, make sure the resolution is at least 300 DPI at the print size — format choice matters less than having enough pixels.

What's the difference between JPG and JPEG?

Nothing. JPG and JPEG are the same format — both refer to the JPEG standard (Joint Photographic Experts Group, ISO/IEC 10918). The three-letter .jpg extension exists because early versions of Windows (DOS, Windows 3.1) limited file extensions to three characters. Modern systems accept both .jpg and .jpeg interchangeably.