The Best Ecommerce Framer Templates For Small Business

Challenge: AVIF Encoding Is Slow

At Framer, we optimize every image on the first request. The optimized image is then cached on a CDN.

This is a common approach, and it works well, but it comes with a drawback. Because the first uncached request has to convert and resize the image, it takes longer than subsequent ones. With WebP, “longer” is noticeable but acceptable: in our infrastructure, WebP conversion typically adds 100-300 milliseconds. However, with AVIF, this grows to 1-2 seconds.

Sidenote: “1-2 seconds? Isn’t that still fast?” — It’s fast, but only outside computer contexts. Research shows that users start feeling things aren’t instant after just 100 milliseconds.

Framer’s cache hit for images is ~98%. If we ignored this issue and switched to AVIF, every 50th image would take several seconds to load. We felt this was unacceptable, so Framer’s Jacob came up with, and Piotr shipped a clever strategy that avoided that – the stale-while-revalidate header.

When We Don’t Use AVIF

AVIF is now the default format for most images. But there are still a few scenarios where we continue to use WebP: Lossless Images: AVIF’s lossless compression is not truly lossless and also worse than WebP’s. So, for lossless images, we keep using WebP. Animated Images: The library we rely on for image optimization doesn’t support animated AVIF images, so we continue using WebP for these.