Design · 4 min read
WebP vs JPEG vs PNG: Choosing an Image Format
Images are the biggest cause of slow web pages, and choosing the right format is one of the easiest wins. Each format has a job it does best.
This guide compares WebP, JPEG, and PNG and how to decide.
Try it yourself with the related tool.
Compress an image →Advertisement
JPEG: photographs
JPEG uses lossy compression that discards detail the eye barely notices, making it excellent for photographs with smooth gradients. It does not support transparency, and pushing the quality too low introduces visible blocky artifacts.
PNG: graphics and transparency
PNG is lossless and supports transparency, which makes it right for logos, icons, screenshots, and anything with sharp edges or text. The trade-off is larger files, so PNG is a poor choice for photographs.
WebP: the modern all-rounder
WebP supports both lossy and lossless modes plus transparency, and is typically smaller than JPEG or PNG at the same quality. With broad browser support today, it is usually the best default for the web.
Resize before you compress
The single biggest saving is serving an image at the size it is actually displayed, rather than a huge original. Resize first, then choose a format and quality — a compressor lets you see the size saved as you adjust.