WebP vs PNG vs JPG: Which Image Format Should You Use?
Three formats cover almost every image on the web. They are not interchangeable, and picking the right one can cut a page's weight in half.
A quick rule of thumb
Photographs: WebP, or JPG if you need maximum compatibility. Logos, icons and screenshots with sharp text: PNG (or SVG when it is a vector). Anything with transparency: PNG or WebP. Never use PNG for a big photograph unless you must keep it lossless.
JPG: the universal photo format
JPG is lossy and does not support transparency. It handles photographs well because the details it throws away are ones the eye barely notices. Text and hard edges get fuzzy halos at low quality. Every device and program opens it.
PNG: lossless and transparent
PNG never loses information, so it is ideal for screenshots, diagrams, logos and anything you will edit repeatedly. The cost is size: a photo saved as PNG can be five to ten times larger than the same photo as JPG.
WebP: the modern all-rounder
WebP can be lossy or lossless and supports transparency and animation. Lossy WebP is usually 25–35% smaller than JPG at similar quality, and lossless WebP is about a quarter smaller than PNG. All current browsers display it. The remaining problem is older desktop software and upload forms that do not accept .webp.
What about AVIF?
AVIF compresses even better than WebP, often by another 20–30%, and is widely supported in browsers. It encodes slowly and is less supported by editors, so it suits web delivery more than file sharing.
Quick comparison
Photo for a website: WebP (JPG fallback). Photo to email or print: JPG. Logo or icon with transparency: PNG or WebP. Screenshot with text: PNG. Image you will keep editing: PNG.