AVIF typically delivers 30–50% smaller files than WebP at the same perceived quality, but encodes much more slowly.
The right pattern: serve AVIF if the browser supports it, WebP if not, JPG as a final fallback. <picture> with type-tagged sources handles this without JavaScript.
Encoding speed matters for build pipelines. For most sites a pre-baked AVIF set is fine; for sites with user-uploaded images, prefer WebP on upload and AVIF as a background job.