WebP vs. AVIF vs. JPEG: Three Formats With Our Own Test Data

What does WebP vs. AVIF vs. JPEG show in this test?

WebP vs. AVIF vs. JPEG produced no universal winner. WebP created the smallest files for the two detailed illustrations; AVIF won on the simple flat graphic. Quality 75 is a different control in each codec. These results describe specific encoder outputs and must not be read as a comparison at identical perceptual quality.

Which images and settings were used?

Three 1200 × 675 RGB samples: two AI-generated illustrations and one synthetic flat graphic. Pillow 13.0.0, Python 3.12.14, libwebp 1.6.0 and libavif 1.4.2. JPEG: quality=75, optimize=true, progressive=true; WebP: quality=75, method=6; AVIF: quality=75, speed=6. Median of three BytesIO encodes, excluding file I/O. Quality values are not equivalent between codecs. PSNR calculated from mean squared error between source and decoded RGB.

The generated illustrations depict a fern with an orange and a prism scene. They are not a representative camera-photo collection. The third image contains solid bars on a light background. Each sample was resized once before encoding. All formats started from the same uncompressed RGB source, avoiding an additional generation of JPEG-to-WebP loss.

What was actually measured?

Byte counts were read from the encoded buffers. Encoding time covers the save operation on this environment, not browser loading. PSNR measures pixel reconstruction error and cannot fully describe visible edges, typography or texture quality.

Why was AVIF not always smallest?

Format names do not determine results independently of settings and subject. For the fern scene, AVIF produced 120,952 bytes, WebP 86,522 and JPEG 120,619. AVIF also had higher calculated PSNR. That is not evidence of a general format failure: the quality controls were not calibrated to the same visible result.

A matched-quality study would need several quality levels per codec, a defined evaluation method and a broader image corpus. This test is a reproducible starting point, not a substitute for that study.

When does this test favour WebP?

WebP was a practical starting point for an editorial export with a hard byte limit: 45,170 bytes for the prism and 86,522 for the fern at the tested settings. Each new image still needs individual validation. A fixed quality setting cannot guarantee an output below 100,000 bytes.

Choose required dimensions before changing formats. Review the result at its intended display size. Covers, diagrams and screenshots with fine text need different acceptance criteria. A smaller file is not useful if it destroys the information the image exists to show.

What roles remain for JPEG and AVIF?

JPEG remains a candidate where an established pipeline requires it or encoding effort is more important than minimum size. AVIF deserves image-specific evaluation where several output variants can be maintained. For the flat graphic, AVIF measured 1,731 bytes, WebP 2,624 and JPEG 12,115.

This RGB comparison did not test transparency, animation, special colour profiles, mobile decoding or browser delivery. Encoding times therefore cannot support claims about Core Web Vitals or real-user speed.

How should you choose for your own site?

• Select representative images and required output dimensions.

• Encode multiple quality levels from unchanged originals.

• Evaluate bytes together with visual inspection.

• Test delivery and decoding in the actual browser setup.

• Recheck output after library or encoder changes.

Byte Dossier's first series uses WebP because it met the defined byte budget in the tested workflow. That production decision is not a universal claim that WebP is best for every project.

Cover: AI-generated thematic illustration, not an actual photograph.

Which articles help with the next decision?

• Pillow review

• Pagefind review

• All articles in this topic