The rule
Photograph → JPG (or WebP).
Graphic, screenshot, logo, illustration, or anything that needs transparency → PNG (or WebP).
The rule comes from how each format compresses. JPG throws away high-frequency information that the eye doesn't easily perceive. That's perfect for photos, which are mostly mid-range frequencies. PNG stores every pixel exactly and compresses runs of identical pixels efficiently. That's perfect for graphics, which are mostly flat regions with sharp boundaries.
Get the rule backwards and the cost is significant. A 12 MP photo as PNG runs 8-15 MB instead of 1-2 MB as JPG — about 8x larger with no visible benefit. A screenshot of a UI as JPG develops ringing around every text edge and ends up larger than the equivalent PNG. The format is doing exactly what it's designed for; the misuse is the problem.
Why
JPEG is built for photos. It uses lossy compression that mostly hides itself in the smooth gradients photos are full of. A photo as PNG is several times bigger with no visible benefit.
PNG is built for graphics. It keeps every pixel exact, supports transparency, and compresses runs of identical colors efficiently. A screenshot as JPG would smear text edges and waste space on smooth backgrounds.
Under the hood: JPEG transforms 8x8 pixel blocks into the frequency domain and quantises the high-frequency components. This produces tiny files for photos but visible blocking artifacts on text and edges. PNG uses prediction filters per scanline and DEFLATE compression. This produces tiny files for flat regions but bigger files for noisy photographic content.
Transparency is the deciding factor that overrides everything else. JPG has no alpha channel — period. If you need any kind of transparency or anti-aliased edges over a transparent background, the only realistic raster choice is PNG (or WebP).
Side-by-side numbers
Same 2 MB camera photo:
- JPG quality 80: 380 KB
- JPG quality 95: 950 KB
- PNG: 4.1 MB
When to switch sides
Logos and icons embedded in photos: still PNG (the sharp edges suffer in JPG).
Photos that need transparency (a person with the background cut out): PNG, because JPG doesn't support transparency at all.
Photographs that will be re-edited repeatedly. JPG loses quality each time it's re-saved; PNG doesn't. If a photo is a master file that you'll come back to, store as PNG (or TIFF) and export to JPG only for the final delivery.
Screenshots of photos. The base content is photographic, but the source is already a screenshot (already pixel-exact). If the screenshot includes UI chrome with text and sharp lines, lean PNG. If it's mostly the photo, lean JPG.
Format details that matter in practice
PNG supports 8-bit alpha (256 levels of transparency), making it the only practical raster format for soft anti-aliased edges over transparent backgrounds. WebP supports this too; JPG does not.
PNG supports 16-bit color depth, which matters for HDR workflows and high-precision medical imaging. JPG is fixed at 8 bits per channel.
JPG supports progressive encoding, which makes the image appear in passes (blurry first, then sharper) as it loads. PNG has interlaced encoding (Adam7) which is the equivalent. For slow connections, both formats render usefully before the full file arrives.
JPG metadata (EXIF) is the de facto standard for camera-captured information: GPS, ISO, lens, timestamp. PNG can carry similar metadata but most cameras don't write it. If you need to preserve capture metadata, keep the original JPG and don't convert to PNG and back.
PNG file sizes depend strongly on the encoder. pngcrush, optipng, and zopflipng can shrink a PNG by 20-40% with zero quality change because they search harder for optimal filter and DEFLATE settings. Most tools default to the fast path; running through an optimiser before deploying is a free win.
When neither PNG nor JPG is the right answer
Logos and icons that will be displayed at multiple sizes. SVG is the right answer — it scales infinitely without loss and is typically smaller than a PNG of the same icon at one size, let alone several.
Animations. PNG supports APNG but JPG has no animation support at all. WebP and GIF are the practical animated raster formats; for short loops, animated WebP beats both GIF and APNG on file size by a wide margin.
Web hero images at scale where bandwidth matters. WebP saves 20-30% on the same visual quality. AVIF saves another 20-30% beyond WebP. Both are worth shipping with a JPG fallback via the picture element.
Print at high resolution. JPG quality 95 is fine for most prints but visible artifacts appear in large prints under critical viewing. PNG (or TIFF) is the safer choice for print masters.
Frequently asked questions
What about WebP?
WebP combines both modes. Use WebP if your audience uses modern browsers (99%+ today) — it beats both formats on file size.
Will JPG damage a photo over time?
Re-saving the same JPG repeatedly compounds compression loss. Save once and stop.
Why does my PNG screenshot get bigger when I export from Photoshop?
Photoshop's default PNG export embeds color profiles and metadata that can add hundreds of KB. Use Export As with the smallest-file checkbox, or run the file through optipng afterwards.
Does converting JPG to PNG improve quality?
No. The JPG compression artifacts are baked into the pixels. PNG just stores them losslessly at a larger size — same quality, bigger file.
Is JPG 2000 a thing I should consider?
Not for the web. JPEG 2000 is used in archival and broadcast but has no browser support outside Safari. Use WebP or AVIF instead.