Every time you save an image from the web, or export one from a design tool, or drag one into a document, you make a format choice. Most people make it by habit — "I always save as PNG" — and most of the time that habit is wrong for the specific image in front of them. The result is websites that take a second longer than they should to load, logos that turn into blurry raisins on retina screens, and photos that quietly balloon your email attachment past the limit.
The good news: there are only three formats that matter for 99% of the images you'll ever handle, and the rule for picking between them fits on a napkin.
The napkin rule
If it's a photograph, use JPG. If it's a screenshot, an icon with a transparent background, or a chart with sharp edges, use PNG. If it's a logo, an icon set, or anything that needs to look razor-sharp at any size, use SVG. That's 95% of the decision. The rest of this post is why.
JPG — for photos, and only for photos
JPG is designed around a clever assumption: human eyes are more forgiving of small colour errors in complex, gradually-changing areas (skin, sky, foliage) than they are of errors in sharp edges (text, lines). So the format aggressively throws away information in the smooth areas and preserves the edges. On a photograph, this trick is nearly invisible — a 4 MB RAW capture becomes a 300 KB JPG that most people can't tell apart from the original.
The same trick is a disaster on non-photographs. Save a screenshot of a spreadsheet as JPG and you'll see faint noise around every letter and thin line — the "ringing" artefact. Save a logo with sharp edges as JPG and the edges become fuzzy. If the image contains crisp geometry, JPG is the wrong choice, full stop.
The other JPG gotcha: it does not support transparency. If you need any part of the image to be see-through, JPG cannot help you, no matter how photographic the rest of it is.
PNG — for anything sharp, and anything with transparency
PNG uses lossless compression: what you put in is exactly what comes out, pixel for pixel. That makes it perfect for screenshots, UI mockups, charts, diagrams, and any icon or logo that needs a transparent background over a website or app.
The trade-off is file size. A full-screen desktop screenshot might be 800 KB as a PNG and 90 KB as a JPG. On a photograph, that difference is not worth the JPG's imperfections; on a screenshot of text, the PNG is the only one that stays readable. Rule of thumb: if zooming in reveals sharp edges (letters, buttons, chart axes), you want PNG.
PNGs come in two useful flavours: PNG-8 (up to 256 colours, great for icons and simple graphics, tiny files) and PNG-24 (millions of colours, for photographs-of-screenshots and detailed illustrations). Most tools pick automatically; if yours asks, PNG-24 is the safe default.
SVG — for logos and anything vector
SVG is not really an image format in the way JPG and PNG are. It is a set of instructions — "draw a circle here, this colour; draw this letter here, in this font" — that the browser follows every time it renders the image. Because it's instructions rather than pixels, an SVG stays crisp at any size, from a favicon to a billboard, and the file is often tiny (a company logo can be under 3 KB).
Use SVG for logos, icon sets, simple illustrations, charts you generate in code, and anything that will be resized in different contexts. Do not use SVG for photographs — it can technically embed one, but the file explodes to megabytes and you lose every benefit.
The one SVG catch to know about: because SVG is code, badly-written SVGs can contain scripts. If you're accepting SVG uploads from users, run them through an SVG cleaner (Bluebird's SVG Optimizer strips the unsafe parts) before displaying them.
What about WebP, AVIF, HEIC?
These are the newer formats. WebP is well-supported everywhere now and gives you JPG-like compression with PNG-like transparency — genuinely a better default than either for photographs on websites you control. AVIF goes further, often shrinking a JPG by another 40% at the same quality, but is slower to encode and still occasionally unsupported by older tools. HEIC is what iPhones save photos as by default and is almost useless outside Apple's ecosystem — most people convert HEIC to JPG the moment they need to share it.
For a website you own end-to-end: WebP is the practical default in 2026, with a JPG or PNG fallback for the 1% of visitors on ancient browsers. For a file you're emailing to a human being: stick with JPG or PNG — everyone can open them, no surprises.
One-line diagnostics
You can tell the format a random file is using without opening any tool: JPGs end in .jpg or .jpeg and are photographs; PNGs end in .png and often have a checkered background in previews (that's transparency); SVGs end in .svg and open as text in a code editor (open one — the instructions are readable). If you inherit a file that's the wrong format for its content — a logo saved as JPG, a photograph saved as PNG — a two-second run through Bluebird's image format converter will produce the right one, in the browser, without touching a server.
