Tooooolbox
100% private
June 25, 2026 · 7 min read
PNG and JPG are the two most common image formats on the web, and many people use them interchangeably — but they're designed for very different types of content. Using JPG for a logo gives you blurry text and colour banding. Using PNG for a photograph gives you a file five times heavier than necessary. The good news: once you understand the core difference, choosing the right one takes about two seconds.
JPG (JPEG) uses lossy compression: it analyses the image and discards information your eye is unlikely to notice, particularly fine detail and transitions at sharp edges. The result is a much smaller file, but one that looks slightly different from the original at the pixel level. For photographs with smooth gradients and natural textures, this trade-off is invisible — you can't see the difference at typical viewing sizes.
PNG uses lossless compression: every single pixel is preserved exactly. The file is larger, but it's a perfect copy. For images with hard edges, flat colours, text or transparent areas, lossless is the right choice because lossy compression introduces visible artefacts (fuzziness, colour fringing) at edges and text.
Any photo from a camera or phone — portraits, landscapes, food, products, events — should be JPG (or WebP, which is better on both counts). These images have millions of smooth colour gradients that compress very well with lossy methods. A high-quality JPEG at 80% quality looks identical to the original at normal viewing sizes and is typically 5–10× smaller than the equivalent PNG.
JPEG at 70–80% quality is the sweet spot for the web. Going lower causes visible blockiness in skies and skin tones. Going higher wastes space with no visible benefit.
PNG wins whenever you need: (1) a transparent background — buttons, overlays, icons with no background; (2) text that must be crisp — screenshots, diagrams, slide exports; (3) flat colours without gradients — logos, icons, illustrations. JPEG's compression smears these images: text gets fuzzy, solid-colour areas get splotchy, and transparent backgrounds become white or introduce colour fringing.
If you're saving a company logo, a screenshot of a web page, a UI mockup, or an icon, use PNG. The file will be larger, but the quality will be pixel-perfect.
PNG compresses using DEFLATE, the same algorithm behind ZIP files. It works by finding sequences that have appeared before and storing a short reference instead of repeating them. On a screenshot with a plain grey toolbar running across the top, that is enormously effective — thousands of identical pixels collapse into a handful of bytes.
A photograph offers it almost nothing to work with. Sensor noise alone means that two pixels of what looks like uniform blue sky differ slightly in value, so there are very few exact repetitions to find. PNG dutifully stores each of those tiny variations losslessly, and the file stays enormous.
This is why the same image can be 4MB as a PNG and 400KB as a JPEG with no visible difference. The extra 3.6MB is not quality you can see — it is a faithful record of sensor noise and imperceptible variation that JPEG correctly decided to throw away.
JPEG's compression is built around a specific assumption: that images are made of gradual tonal changes, like a face or a landscape. It converts each 8×8 block into frequency components and discards the high-frequency ones, because in a photograph those carry the least visible information.
A hard black-on-white edge — the side of a letter, the border of a UI element — is nothing but high frequency. Discarding it produces the characteristic JPEG artefact: a faint halo of grey speckle around text, and blurring of the sharp corners the design depended on. Zoom into JPEG-compressed screenshots and the text looks dirty.
The problem is compounded by chroma subsampling. JPEG stores colour at half the resolution of brightness, which is invisible on skin tones and disastrous on saturated coloured text. Red text on a dark background is the worst case, and it is common enough in slides and diagrams that it is worth remembering as a rule: text means PNG.
Screenshots are the case where people most often choose wrongly, because they sit between the two categories. A screenshot of a spreadsheet, a code editor, a settings panel or a chat window is essentially text and flat colour, and belongs in PNG without hesitation. It will usually be smaller than the JPEG anyway, as well as sharper.
A screenshot that is mostly a photograph — a full-screen image viewer, a video frame, a photo-heavy web page — behaves like a photograph and belongs in JPEG or WebP.
There is one more trick worth knowing for screenshots taken on high-density displays. A capture from a Retina or 4K screen is often twice the dimensions it will ever be displayed at. Halving it before saving cuts the file to roughly a quarter with no perceptible loss, and does more for the file size than any format choice.
If any part of the image needs to be transparent, the debate is over: JPEG cannot do it. There is no alpha channel in the format, so a transparent background becomes a solid one, and you get the white rectangle that gives away every logo saved in the wrong format.
PNG supports 256 levels of transparency, which is what makes soft shadows and anti-aliased curves possible. An icon exported as PNG can sit on any background colour and blend cleanly; the same icon as JPEG is locked to whatever colour it was flattened against.
This is worth checking before you convert rather than after. Transparency is not recoverable once flattened — you cannot convert the JPEG back to PNG and get the transparent background returned. The information is gone.
The PNG versus JPEG question is a genuine dilemma only because each format is bad at what the other is good at. WebP removes the dilemma: it has a lossy mode that compresses photographs better than JPEG, a lossless mode that compresses graphics better than PNG, and a full alpha channel that works in both.
In numbers, that is typically 25–35% smaller than JPEG for photographs and around 25% smaller than PNG for graphics, with transparency available throughout. Every current browser has supported it for years.
The reason to still know the PNG versus JPEG rules is that WebP is not universally accepted outside the browser. When you are uploading to a form you do not control, sending a file to a print shop, or handing an image to someone whose software you cannot predict, the old pair is still what nothing rejects — and the rules above are how you choose between them.
If you're serving images on a website and want the best of both worlds, WebP is the modern replacement for both JPG and PNG. Its lossy mode beats JPEG by 25–35% at the same quality; its lossless mode beats PNG. It also supports transparency. Every major browser now supports WebP, so it's a safe choice for the web.
For everything else — sharing via email, uploading to forms, sending on WhatsApp — stick with JPG for photos and PNG for graphics. They're universally supported and the choice is simple: photos → JPG, everything else → PNG.