When to Use Each Image Format

Here's the rule that settles ninety percent of format decisions: the destination picks the format, not the image. A photo going into an email needs a different container than the same photo going on your homepage. Once you think destination-first, the rest of this guide is just details.

The details still matter, though. So here they are, format by format, with the numbers from our own bench tests.

JPG Is for Photographs That Travel

JPEG has been carrying photographs since 1992, and its real superpower in 2026 isn't compression anymore. It's that nothing refuses it. Email clients, print shops, government upload portals, the ancient CMS your client won't replace: all of them open a JPG without blinking.

So the question to ask isn't "is JPG good?" It's "does this image leave my website?" og:images and social cards should be JPG, because link scrapers are the most conservative software on the internet. Email images should be JPG. Anything a customer will download and open on a work laptop from 2014 should be JPG.

Two things it can't do. There's no transparency, so anything with a cutout background gets flattened onto white. And every re-save throws away a little more detail, which is why you edit in PNG and export to JPG exactly once, at the end.

PNG Is the Working Master

PNG is lossless. Save a screenshot a hundred times and the hundredth copy is identical to the first, pixel for pixel. That makes it the right container for UI screenshots, documentation images, logos with transparency, and any file that's still being edited.

The catch is weight on photographs. We ran the same landscape photo through both containers: 186 KB as PNG, 16 KB as JPG. Eleven times the bytes, zero visible difference. PNG isn't bad at photos; it's just answering a question nobody asked, which is "what if I need every pixel back later?"

One more note from the trenches: when a browser saves an image as WebP and your design tool refuses it, converting to PNG is the standard escape route. People search "webp to png" 165,000 times a month. That's not a statistic about formats. That's a statistic about frustration.

WebP Is What You Actually Ship

On your own pages, where you control the stack, WebP is the default. It compresses photos harder than JPG, graphics harder than PNG, and it carries transparency, so the old two-format split stopped being necessary years ago. Every browser has decoded it since 2020.

The catch runs the other direction: WebP is great to serve and mildly annoying to hand around. Older desktop software won't open it, some email clients won't preview it, and the person you sent it to will ask you what a webp is. Ship WebP on the site, keep a JPG or PNG copy for everything else.

Quality 80 to 85 is the range to start from. Our test photograph landed at 9.7 KB at quality 80 and still looked like the original. Push lower for thumbnails, higher for hero shots, and check the byte readout before you commit.

SVG Is the One You Don't Convert

If your logo or icon exists as an SVG, the best conversion is usually none at all. An SVG is drawing instructions, not pixels: it weighs a few kilobytes, stays razor sharp at every screen size, and you can restyle it with CSS. For interface icons and logos on your own pages, that's unbeatable.

You rasterize an SVG for exactly one reason: some destination demands pixels. Favicons need it. App store listings need it. The odd CMS needs it. When that happens, render the PNG at the exact size the destination wants, because a vector rendered at 300 pixels and stretched to 600 looks worse than one rendered at 600 to begin with.

ICO Has One Job Left

The .ico format survives for a single reason: browsers request /favicon.ico by name, and one ICO file can carry several sizes at once. The tab gets the 16 pixel version, the bookmark bar gets 32, a Windows shortcut gets 48, each drawn for its size instead of scaled down into mush.

Design for the small end. At 16 pixels, a wordmark is unreadable and fine detail turns to noise. The favicons that survive are one bold shape and two colors. Squint at your logo; whatever survives the squint is your icon.

The Ten-Second Version

Mistakes That Keep Showing Up

Serving a 4000 pixel camera photo in a 400 pixel column. Format is the second decision; size is the first. Resizing to double the displayed width cuts more page weight than any codec, and it's the reason the resizer sits next to the converters here.

Using PNG for photographs on a live page. That's the eleven-times-heavier mistake from above, and it's the single most common one we see.

Exporting a JPG from a JPG from a JPG. Each generation loses detail. Keep one lossless master, export once.

And shipping a WebP og:image because it worked in your browser. Your browser isn't the scraper. The preview will break somewhere you can't see, and you'll spend an afternoon learning what this paragraph just told you for free.

Still not sure for a specific image? The format picker asks three questions and hands you the answer with the reasoning attached.