Webflowで利用できる次世代画像フォーマット「AVIF」とは？
近年、ウェブページでのリッチコンテンツが増加し、ページの読み込み速度がますます重要視されています。特に画像ファイルはページ全体のサイズに大きく影響し、ウェブサイトのパフォーマンスに直接関わります。この記事では、JPEG、PNG、WebPといった従来の画像フォーマットを上回る新しい技術「AVIF（AV1 Image File Format）」について詳しく紹介します。
AVIFとは
AVIFは、高効率の動画圧縮技術「AV1」をベースにした、ロイヤリティフリーの画像フォーマットです。Google、Amazon、Netflixなどの大手企業が参加する「Alliance for Open Media (AOMedia)」によって開発され、オープンソースで提供されています。
AVIFのメリット
AVIFには、ウェブサイトのオーナーや開発者にとって以下のような利点があります。
圧縮率が高く、高画質を維持
JPEGと比較して最大95%、WebPと比べても最大30%のファイルサイズ削減が可能です。また、高い圧縮率でありながら、JPEGやWebPよりも優れた画質を実現しています。
画像だけでなく、GIFと比較しても、より高画質かつ小さいファイルサイズで扱うことができます。
参照元：https://ics.media/entry/201001/
多機能サポート
透過PNGに代わるアルファチャンネル（透過）やHDRカラーサポートを利用できます。これにより、画像を2枚重ねて融合させたデザインを生み出したり、ユーザー体験を向上させるリアルな世界観を演出したりすることができます。
可逆圧縮と非可逆圧縮の選択
可逆圧縮とは、画像を一度圧縮させたのちに、再度元の状態に戻すことができる方法のことを指します。非可逆圧縮とは、一度圧縮させてしまうと、元の状態に戻すことができない圧縮方法のことを指します。
従来、用途別に使用する圧縮方法を選択する必要がありましたが、AVIFでは両方対応しているため、可逆圧縮か非可逆圧縮火を選択する必要がなくなりました。
AVIFとWebPの比較：どちらを選ぶべきか？
WebPも優れた次世代フォーマットですが、AVIFとWebPでは以下のような違いがあります。
高画質と高圧縮率を求める場合、AVIFが最適であるといえます。一方、WebPは広範なブラウザでのサポート実績が強みです。
WebflowでのAVIFサポート
Webflowは、サイトパフォーマンス向上のためAVIF画像のサポートを導入しています。Webflowのユーザーは、AVIF画像を直接アップロードしたり、既存の画像をAVIFフォーマットに変換することも可能です。以下では、Webflowにアップロードした画像をAVIFに変換する方法をご説明します。
- Webflowのアセットパネルから変換したい画像を選択し、右上の「Compress」をクリックする。
- AVIFにチェックを入れ、「Compress」をクリックする。
このように、Webflowでは既存の画像をAVIFに簡単に変更することが可能です。
まとめ
AVIFは登場して間もないフォーマットですが、その優れた性能から多くのウェブサイトやアプリでの採用が進んでいます。主要ブラウザでの対応も進行中であり、将来的にウェブ画像フォーマットの標準になる可能性を秘めています。AVIFを活用することで、ウェブサイトの読み込み速度が向上し、ユーザーエクスペリエンスの改善が期待できます。WebflowでAVIFを活用し、最適化されたウェブサイト作りを進めましょう。
