This document aims to alleviate the difficulties faced by domestic users learning Framer due to a lack of Korean materials, by translating content from the official blog into Korean and adding practical information. We hope it provides some help to those of you using Framer.

TLDR (Summary)

Framer now supports AVIF, enabling image sizes to be reduced by about 20% compared to WebP. However, AVIF is not perfect.

Due to AVIF's slow encoding speed, Framer cleverly utilizes a caching method called stale-while-revalidate. WebP is offered for fast loading on the first request, while AVIF conversion is conducted on subsequent requests, with WebP still being provided. In some cases where AVIF has lower quality than WebP, WebP is still used for some images.

AVIF Support: Smaller Images

In May 2024, Framer began supporting AVIF. All images in Framer are now served as AVIF by default, achieving approximately 20% lower file sizes on average. However, challenges arose during the integration of this new format. The biggest issue was that the process of converting to AVIF is very slow.

Issue: Slow AVIF Encoding

In Framer, when an image request is made, optimization is performed immediately. The optimized image is then cached in the CDN.

This is both a common and efficient method, but it has drawbacks. When an un-cached image is requested for the first time, both conversion and resizing must occur simultaneously, taking longer than subsequent requests. When it comes to WebP, conversion generally adds 100-300ms, which is manageable. However, with AVIF, it takes 1-2 seconds.

Note: You might think "Isn't 1-2 seconds fast enough?" but user experience research indicates that anything over 100ms feels less immediate.

Framer's image cache hit rate is about 98%. If a switch to AVIF alone was made without intervention, there would have been multi-second delays on every 50th image. Determining this detrimental to user experience, the strategy devised by Jacob and implemented by Piotr is called stale-while-revalidate.

Solution: Stale-While-Revalidate

Stale-while-revalidate is an option within cache settings, added to the Cache-Control header. It defines how long expired resources can continue to be served by the CDN.

Cache-Control: max-age=3600, stale-while-revalidate=60
               ↑ how long a file can be cached for
                             ↑ how long a CDN can keep serving
                               the file after max-age expires

max-age=3600 → Default time span for file caching.
stale-while-revalidate=60 → Allows serving existing files for 60 seconds after expiry.
Framer leverages this approach to tackle AVIF conversion speed issues.

Step 1

First Request (WebP served)
On the first request, a WebP image is provided instead of an AVIF.
The header is set as follows: Cache-Control: max-age=0, stale-while-revalidate=31536000

Step 2

Instantly expiring WebP
Since max-age=0, this WebP image expires instantly. As a result, CDN forwards the second request to the origin server.

Step 3

Second Request (AVIF Conversion)

• Upon receiving the second request, the server provides an AVIF-converted image. Although this process can take several seconds, stale-while-revalidate ensures that the CDN (CloudFront) continues to serve WebP images until the conversion is complete.

• Once AVIF conversion finishes, Cache-Control: max-age=31536000 is set, allowing the CDN to cache the image for a long period.

This method eliminates the need for a separate queuing system to deliver images in the background, maintaining stable performance with a simplified infrastructure and preventing bugs.

Cases Not Using AVIF

Currently, most images are provided as AVIF by default. However, WebP is still used in the following circumstances:

• Lossless Images
  AVIF's lossless compression isn't perfect and is lower quality than WebP. Hence, WebP is retained for lossless images.

• Animated Images
  Because the image optimization library used by Framer does not support animated AVIF, WebP is used in this case as well.

This post is a translated and adapted version of the Framer official blog article ‘How Framer does AVIF’.