This document addresses the difficulties faced by Korean users learning Framer due to a lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope it provides some help to Framer users.

TLDR (Summary)

• Framer now supports AVIF, reducing image size by about 20% compared to WebP. However, AVIF isn't perfect.

• Since AVIF encoding is slow, Framer has implemented the stale-while-revalidate strategy. The initial image request provides WebP for fast loading, and later requests serve WebP while performing the AVIF conversion.

• In some cases, AVIF performs worse than WebP, so WebP is still used for certain images.

AVIF Support: Smaller Images

In May 2024, Framer started supporting AVIF. Now, all images are provided in the AVIF format by default, which is about 20% smaller than WebP. However, integrating this new format presented challenges, the biggest being the slow conversion process to AVIF.

Problem: Slow AVIF Encoding

Framer optimizes all images upon the first request. The optimized images are then cached on the CDN for reuse.

This method is common and efficient, but it has drawbacks. The first request for an image not in the cache requires simultaneous conversion and resizing, taking longer than subsequent requests. WebP conversion usually adds 100-300ms, which is tolerable. However, AVIF can take 1-2 seconds.

You might think, “Isn't 1-2 seconds okay?” But research shows people perceive anything over 100ms as not being instantaneous. Framer's image cache hit rate is about 98%. Ignoring this problem and switching to AVIF means every 50th image could take 1-2 seconds, potentially degrading user experience.

To address this issue, Framer's Jacob came up with an idea, and Piotr implemented the strategy stale-while-revalidate header.

Solution: Stale-While-Revalidate

stale-while-revalidateis a caching setting, a parameter of the Cache-Control header. This value allows the CDN to continue serving existing files for a specified time after cache expiration.

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 files are cached

• stale-while-revalidate=60 → Allows serving existing files for 60 seconds after expiration

Framer utilized this method to solve the AVIF conversion speed issue.

Step 1: First Request (WebP)

• The first request provides images in WebP instead of AVIF.

• Additionally, the Cache-Control header is set as max-age=0, stale-while-revalidate=31536000.

Step 2: Immediately Expired WebP

• Due to max-age=0, this WebP expires immediately, so the CDN relays it back to the server on subsequent requests.

Step 3: Second Request (AVIF Conversion)

• Upon arrival of the second request, the image is served as AVIF. Due to slow AVIF conversion, it can take a few seconds to respond to the second request. However, thanks to stale-while-revalidate CDN (CloudFront), WebP images continue to be served until conversion is complete.

• The header is present only in the second request, distinguishing it from the first request through the If-None-Match header.

• When AVIF is ready, it is returned with Cache-Control: max-age=31536000, allowing the CDN to cache and serve the image for an extended period.

This approach eliminates the need for a separate queuing system for background image serving. The simple infrastructure maintains stable performance and prevents bugs.

When Not to Use AVIF

Although AVIF is now the default format for most images, there are situations where WebP must continue to be used.

• Lossless images: AVIF's lossless compression is not entirely lossless and performs worse than WebP. Thus, WebP must be used for lossless images.

• Animated images: The current image optimization library does not support animated AVIF images, so WebP must continue to be used.

This article is a translation and adaptation of Framer's official blog post ‘How Framer does AVIF’.