WebP and AVIF are modern, space-saving image formats that produce much smaller files than JPEG or PNG at comparable quality, improving loading time.Open glossary entry → and AVIF are modern image formats developed for the web. At comparable visual quality, they produce significantly smaller file sizes than older formats such as JPEG or PNG. Smaller images mean shorter loading times and are often a key lever for improving Largest Contentful Paint (LCP) measures when the largest visible content element in the viewport has loaded, representing the perceived loading speed.Open glossary entry →, since images are frequently the largest element on a page.
In practice, using these formats means:
- serving large hero and product images as WebP or AVIF instead of uncompressed PNG,
- also sizing and compressing images appropriately,
- combining WebP/AVIF with Responsive images deliver an appropriately sized image variant depending on the device's screen size and resolution, so that unnecessarily large files are not loaded.Open glossary entry → (
srcset).
A typical mistake is serving a large, uncompressed PNG as the most important image. Converting it to WebP or AVIF often reduces the weight considerably without harming perceived quality. Even with modern formats, it remains important to use sensible image dimensions and Alt text is a text alternative for an image, stored in the alt attribute of the img element, describing the content or function of the image.Open glossary entry →.