A photograph: the daisy, 800 × 533
Lossy formats win by a factor of ten or more. Compare the magnified petal edge: JPEG's blocks, GIF's dither dots, PNG's exact (and enormous) copy.
JPEG, progressive daisy-800.jpg· … bytes
JPEG, baseline daisy-800-baseline.jpg· … bytes
WebP, lossy daisy-800.webp· … bytes
AVIF, lossy daisy-800.avif· … bytes
GIF, 256 colors daisy-800.gif· … bytes
PNG, lossless daisy-800.png· … bytes
Photograph: Macro flower wallpaper, Free Nature Stock, CC0.
A logo: Trail Notes, 480 × 240
Flat colors and sharp edges. The JPEG has no transparency, so it carries a white box; on a dark page it shows. The SVG stays sharp at any magnification.
SVG, vector logo.svg· … bytes
PNG, alpha logo.png· … bytes
WebP, lossless logo.webp· … bytes
AVIF, lossy logo.avif· … bytes
GIF, one-bit transparency logo.gif· … bytes
JPEG, no transparency logo.jpg· … bytes
A chart: text and flat bars, 800 × 450
Few colors, long flat runs and small text. Look at the title through the magnifier: JPEG smudges every letter, and the last JPEG, squeezed to the PNG's size, falls apart.
PNG, palette chart.png· … bytes
AVIF, lossy chart.avif· … bytes
WebP, lossy chart.webp· … bytes
GIF chart.gif· … bytes
JPEG, quality 75 chart.jpg· … bytes
JPEG at the PNG's size chart-same-bytes.jpg· … bytes