The one-sentence rule
Photos on your website → WebP. Photos for email or uploads to picky systems → JPG. Logos and graphics with transparency → PNG. That rule covers 95% of cases — the rest of this guide explains why.
What the formats actually do
JPG (1992) compresses photos by discarding detail your eye barely notices. It has no transparency and re-saving it repeatedly degrades quality — but everything that can display an image can display a JPG.
PNG (1996) compresses losslessly: every pixel is preserved exactly. Perfect for hard edges, text and transparency. The price: photos become enormous. The same photo can be 120 KB as JPG and 1.2 MB as PNG with no visible difference.
WebP (2010, Google) does both jobs better: lossy compression 25–35% smaller than JPG at equal quality, lossless mode smaller than PNG, plus transparency. Its only real weakness is outside the browser — some email clients and older desktop software still don't open it.
A real comparison
A typical 1920 × 1080 landscape photo: PNG 2.4 MB · JPG (quality 80) 310 KB · WebP (quality 80) 190 KB. Same picture, same screen, indistinguishable at normal viewing distance. The PNG takes 12× longer to load than the WebP — and load time is a Google ranking factor.
The most common mistake
Saving photos as PNG "because PNG is lossless, so it must be better". Lossless matters for the tenth re-edit of a screenshot, not for displaying a photo once. Your visitors can't see the difference — they can only feel the slow page. If you have a folder of PNG photos, batch convert it to WebP and enjoy files a tenth of the size.