Serving WebP & AVIF images with Nginx
WebP and AVIF are two image formats for the web. They aim to produce smaller files than JPEG and PNG. They both support lossy and lossless compression, as well as alpha transparency. WebP was developed by Google and is a derivative of the VP8 video format.1 It is supported on most browsers. AVIF is using the newer AV1 video format to achieve better results. It is supported by Chromium-based browsers and has experimental support for Firefox.2
Your browser supports WebP and AVIF image formats. Your browser supports none of these image formats. Your browser only supports the WebP image format. Your browser only supports the AVIF image format.
Without JavaScript, I can’t tell what your browser supports.
Converting and optimizing images
For this blog, I am using the following shell snippets to convert and optimize JPEG and PNG images. Skip to the next section if you are only interested in the Nginx setup.
JPEG images
JPEG images are converted to WebP using cwebp.
find media/images -type f -name '*.jpg' -print0 \ | xargs -0n1 -P$(nproc) -i \ cwebp -q 84 -af '{}' -o '{}'.webp
They are converted to AVIF using avifenc Continue reading
Short video on differences.





