この文書は、Framerを学ぶ日本のユーザーが日本語資料の不足による困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆さんに少しでも役立つことを願っています。

TLDR(要約)

Framerは現在AVIFをサポートしており、WebPに比べ画像サイズを約20%削減できます。しかし、AVIFは完璧ではありません。

AVIFのエンコードが遅いため、Framerはstale-while-revalidateというキャッシュ方式を巧妙に活用しました。最初のリクエストでは迅速なロードのためにWebPを提供し、その後のリクエストではAVIFに変換しながらも引き続きWebPを提供する方法です。また、AVIFがWebPより品質が劣る場合もあり、一部の画像には依然としてWebPを使用しています。

AVIFサポート: より小さくなった画像

2024年5月、FramerはAVIFサポートを開始しました。現在、Framerのすべての画像は基本的にAVIFで提供されており、これにより平均して約20%小さな容量を達成しました。しかし、この新しいフォーマットを統合する過程には困難がありました。最大の問題はAVIFへの変換プロセスが非常に遅いという点です。

問題: 遅いAVIFエンコード

Framerでは画像リクエストが来るとすぐに最適化作業を行います。その後、最適化された画像をCDNにキャッシュします。

この方法は一般的で効率的ですが、欠点があります。キャッシュにない画像を最初にリクエストすると、変換とリサイズが同時に行われるため、後のリクエストよりも時間がかかります。WebPの場合、変換には通常100〜300msが追加されますが、これは許容範囲です。しかし、AVIFでは1〜2秒かかります。

Note: 「1〜2秒なら十分速いんじゃないか？」と思うかもしれませんが、ユーザー体験研究によれば100ms以上でもインスタントに感じません。

Framerでの画像キャッシュヒット率は約98%です。もし何ら対策をせずにAVIFにのみ切り替えた場合、50枚目の画像ごとに数秒の遅延が発生したでしょう。これはユーザー体験に致命的だと判断し、それを解決するためにJacobがアイデアを出し、Piotrが実装した戦略がstale-while-revalidateです。

解決策: Stale-While-Revalidate

stale-while-revalidateはキャッシング設定オプションの一つで、Cache-Controlヘッダーに追加されます。この値は期限切れリソースを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 → ファイルがキャッシュされる基本時間
stale-while-revalidate=60 → 期限切れ後も60秒間既存ファイル提供可能
Framerはこの方法を使ってAVIF変換速度の問題を解決しました。

1段階

最初のリクエスト(WebP提供)
最初のリクエストではAVIFではなくWebP画像を提供します。
そしてヘッダーを以下のように設定します：Cache-Control: max-age=0, stale-while-revalidate=31536000

2段階

即時に期限切れとなるWebP
max-age=0を設定したため、このWebP画像はすぐに期限切れになります。これにより、CDNは二度目のリクエストをオリジナルサーバに送信します。

3段階

二度目のリクエスト(AVIF変換)

• 二度目のリクエストが来ると、サーバーはAVIFに変換された画像を提供します。このプロセスには数秒かかることがありますが、stale-while-revalidateのおかげでCDN(CloudFront)は変換が終わるまでWebP画像を提供し続けます。

• AVIF変換が終了すると、Cache-Control: max-age=31536000を設定し、CDNが長期間キャッシュできるようにします。

この方法で、背景で画像を提供するための別のキューイングシステムを作る必要がなくなりました。シンプルなインフラ構造で安定したパフォーマンスを維持でき、バグが発生しません。

AVIFを使用しない場合

現在、ほとんどの画像は基本的にAVIFで提供されています。しかし、以下の状況では依然としてWebPを使用します。

• ロスレス画像
  AVIFのロスレス圧縮は完全なロスレスではなく、WebPより品質が低いです。したがって、ロスレス画像にはWebPを保ちます。

• アニメーション画像
  Framerが使用する画像最適化ライブラリがアニメーションAVIFをサポートしていないため、この場合もWebPを使用します。

この文書はFramer公式ブログの「How Framer does AVIF」を翻訳・アダプトしたコンテンツです。