JPG vs PNG vs WebP: a 60-second cheat sheet

Image formats confuse people because the honest answer is 'it depends'. But it depends on exactly one thing: what's in the image. Here's the whole decision tree.

JPG — for photos, full stop

JPG compresses gradients and natural scenes beautifully and throws away detail your eyes can't detect. A photo as a JPG is a fraction of the same photo as a PNG. Its one weakness: no transparency, and text/edges get fuzzy.

PNG — for sharp edges and transparency

Screenshots, logos, UI mockups, anything with text or flat color: PNG keeps every pixel crisp. It's also the only mainstream format here with a full alpha channel, which is why every sticker, meme and cutout travels as a PNG. The cost: photos as PNGs are enormous.

WebP — the overachiever

WebP does JPG's job ~30% smaller and PNG's job with transparency included. Browser support is universal now. The only reason not to use it everywhere is the occasional ancient upload form that doesn't recognize the extension.