What are WebP and AVIF?

WebP and AVIF: definition and origins

Google introduced WebP in 2010. AVIF (AV1 Image File Format) came later, based on the AV1 video codec from the Alliance for Open Media. Both formats are open and royalty-free, compress images more efficiently than the classics JPEG and PNG, and support transparency. According to Google, lossy WebP images are roughly a quarter to a third smaller than JPEG at the same quality.

Images make up the largest share of the data transferred on many websites. Delivering them in WebP or AVIF noticeably shortens load time, especially on mobile networks. That affects the user experience and Core Web Vitals.

Differences and browser support

WebP has worked in all major browsers since 2020, AVIF since 2022. With the picture element, the formats are served in tiers: AVIF first, then WebP, and finally a JPEG as a fallback. The browser picks the first format it understands, so older devices still get an image.

• WebP: usually much smaller than JPEG, fast to produce, very widely supported
• AVIF: usually even smaller than WebP, supports HDR and wide color gamuts, needs more computing time to create
• JPEG and PNG: universally readable but larger files, still useful as a fallback

Real-world example: an architecture firm

An architecture firm presents its projects with large-format photos. The originals are JPEGs of several megabytes, and the page loads sluggishly on smartphones. An image pipeline automatically generates suitable sizes in AVIF and WebP on upload, serves them through the picture element, and keeps the JPEG as a fallback.

The photos stay sharp, and the page becomes much leaner. The Largest Contentful Paint, the load time of the largest visible element, also improves because the hero image contains less data. The firm still uploads originals; the conversion runs automatically.

Benefits, limits, and common mistakes

Modern formats bring shorter load times, less data usage, and lower hosting costs. Limits: very heavily compressed images show artifacts, AVIF needs considerably more computing power to produce, and for logos and simple graphics SVG is often the better choice because it scales losslessly. Common mistakes:

• File merely renamed instead of re-encoded: file size stays high
• Quality level too low: visible blocking
• No fallback for older browsers and email programs
• Pixel dimensions too large instead of suitable sizes (srcset)

Imple­menta­tion

Many CMS and store systems as well as CDNs convert images automatically. Nano Concepts sets up such image pipelines, tunes sizes and quality to your visuals, adds fallbacks for older browsers, and uses Core Web Vitals to check whether the result measurably loads faster.