PNG vs JPG — The Differences and Which to Choose for Every Task
Save as PNG or JPG? The question comes up a hundred times a day — exporting a mockup, uploading a product photo, sending scans. Most people answer at random, and it costs them: the wrong format means either a file five times heavier than needed, or dirty smudges around text. The actual rule is single and simple.
JPG is for photographs: millions of shades, smooth transitions, small size thanks to lossy compression. PNG is for graphics: logos, screenshots, diagrams, text on images — anything with sharp edges or transparency. Mix them up and you get either a bloated file (photo as PNG) or artifacts (logo as JPG).
The core difference: how they compress
JPG compresses with loss. The algorithm discards details the eye barely registers: micro‑transitions, high‑frequency noise. On a photo the loss is invisible, and the file shrinks 5–10×. Quality 80–90% is the web sweet spot.
PNG compresses losslessly. Every pixel is restored exactly. The price of honesty is weight: a photo saved as PNG weighs several times its JPG twin with no visible difference.
That's the entire decision logic: where loss is invisible (photos) — JPG saves weight; where every edge matters (graphics) — PNG keeps them clean.
Why a logo as JPG is always a mistake
JPG works in 8×8 pixel blocks and handles sharp boundaries worst of all: characteristic "dirt" — compression artifacts — appears around letters, lines and contours. Plus two structural limits:
- No transparency. The logo is welded into a white rectangle forever — what to do about it: the transparent background article.
- Loss accumulates. Every re‑save is another compression round. A file that's been through five edits looks visibly worse than the original.
For logos and icons the format hierarchy is: SVG (vector — the best option), then PNG, and never JPG. Why vector is beyond competition: SVG vs PNG.
Why a photo as PNG is also a mistake
The reverse case is harmless but wasteful: a PNG photo weighs 5–20 MB where a JPG would deliver 500 KB with no visible difference. On a website that's slow loading and a Core Web Vitals penalty; in email — bounced messages; on a phone — wasted storage. The one case for PNG photos: intermediate versions during multi‑step editing, to avoid stacking JPG loss.
The what‑goes‑where table
| Task | Format |
|---|---|
| Photo for web/social | JPG (or WebP) |
| Logo, icon | SVG; if impossible — PNG |
| UI screenshot | PNG |
| Chart, diagram | PNG or SVG |
| Image with text (meme, banner) | PNG |
| Document scan | JPG (or PDF) |
| Image with transparency | PNG |
| Photo for print | max‑quality JPG / TIFF |
What about WebP and AVIF?
Modern formats that do both jobs: lossy compression better than JPG (25–35% lighter at equal quality) and lossless‑with‑transparency better than PNG. Every current browser supports them, and for the web WebP is the right default — not by accident does our catalog serve logo previews as WebP.
Why are JPG and PNG still alive? Compatibility beyond the browser: legacy software, government portals, marketplaces and print shops still demand the classics. The working scheme: keep originals in PNG/JPG (or true source files), convert to WebP for the site automatically.
Converting back and forth
- JPG → PNG: always possible, pointless for quality — JPG's losses already happened and won't return. Usually done for transparency after background removal.
- PNG → JPG: right for photos accidentally saved as PNG. Transparent areas flood white — check there are none.
- Tools: any editor, Preview on Mac, Photos on Windows, online converters, Squoosh for batches.
View the image at 100% and look at object and text boundaries. Dirty smudges — an over‑compressed JPG; find a better source. A photo over 1–2 MB — convert to JPG/WebP at 80–85% quality: nobody will see the difference except the page‑speed meter.
Under the hood: why JPG is "blocky" and PNG is "honest"
A little mechanics — it explains every visible effect.
JPG slices the image into 8×8 pixel blocks and describes each through a frequency transform (DCT): smooth transitions take a few coefficients, sharp jumps take many. Compression trims the "expensive" high‑frequency ones — invisible on a photo, but at a letter's edge it becomes ringing and dirt. The same mechanism causes blockiness in the shadows of heavily compressed photos: neighboring 8×8 blocks stop agreeing on brightness.
PNG works like an archiver: it predicts each pixel from its neighbors and deflate‑compresses the difference (the same algorithm as ZIP). Nothing is discarded — so large flat areas and repeating patterns compress superbly, while photographic noise (every pixel unpredictable) barely compresses at all.
The same text screenshot: PNG — 80 KB, perfect letters; JPG at 80% — 120 KB and grime around the type. The same sunset photo: JPG at 85% — 400 KB with no visible loss; PNG — 6 MB. Pick the format for the image's nature, not "which is better in general".
PNG fine points few people know
- PNG-8 vs PNG-24. Palette PNG (≤256 colors) is several times lighter — for flat graphics without gradients it's a legitimate weight cut. Figma and Photoshop exporters offer the choice.
- Transparency comes in grades. PNG-8 only does on/off pixels (like GIF) — soft shadows need PNG-24 with a real alpha channel.
- Metadata weighs. Phone screenshots carry EXIF; optimizers (TinyPNG, Squoosh, oxipng) strip it and repack the compression — 20–70% off, losslessly.
- PNG isn't for CMYK. The format lives in RGB only — print‑with‑separations needs TIFF or PDF.
JPG fine points that save nerves
- Quality 100 ≠ lossless. Even at maximum, JPG runs the image through DCT — smaller loss, but loss. "100" merely bloats the file; the working range is 80–90.
- Progressive JPG loads blurry‑to‑sharp instead of line by line — subjectively faster on slow networks; the checkbox is in every exporter.
- Every save degrades. The one‑compression rule: edit in the source (PSD, PNG, RAW), export to JPG once at the very end.
- Lossless rotation exists. 90° JPG rotation without recompression is possible (jpegtran and some viewers) — a small thing that matters in bulk scan processing.
In short
One rule covers 95% of cases: photos — JPG, graphics — PNG, web — WebP where possible, logos — ideally SVG altogether. Don't save logos as JPG, don't store photos as PNG, and your images will stop being heavy or dirty.
In our logo catalog the format choice is already made correctly for you: vectors as SVG, raster versions as transparent PNG, and catalog previews served as lightweight WebP.