新しいavif形式を使用して画像の重量を流す

イメージ最適化は、持続可能なウェブサイトレルムの大きい話題です.圧縮、縮小イメージデータと除去色は、イメージを最適化するすべての良いものです.しかし、異なるイメージ形式についてはどうですか?もちろん、あなたは、JPG、PNGとよく知られているフォーマットのWebPのフォーマットを持っています-しかし、現在、新しい形式があります.と主張して、それはよく最適化されたWebPファイルのファイルサイズの半分をすることができます(それ自体は簡単にJPGのサイズの半分にすることができます)それは確かにWebのためのよく最適化された、質のイメージを生成するためのエキサイティングな時間です.

だから、何Avifですか?
AvifはAV 1ビデオのキーフレームから派生した新しいイメージ形式です.

Avifイメージ形式のブラウザサポートは何ですか?
アヴィFalready supported in Chrome デスクトップのバージョン85 - Androidのサポート方法で.オペラもサポートしています.Firefoxも現在の実装では、ブラウザの設定でフラグを有効にすることができますので、フルサポートはあまり遠く離れてはいけません.サファリは現在の実装を持っていませんが、彼らは積極的にフォーマットを作成することに関与していたので、我々はかなりすぐに統合されるサポートを期待します.エッジもフォーマットをサポートしていません.

Avifイメージ形式を使う方法
すでにAvif形式を取り入れたいくつかのオンラインツールがありますSquoosh , ので、簡単にWeb用に最適化された画像を準備することができます.Chromeとして既にサポートしていると見て、それはすぐにAvifを使用して起動することができますことを意味します.ここでは、まだそれをサポートしていないブラウザのフォールバックと一緒に使用する方法です.

<picture>
  <source type="image/avif" srcset="tiny-image.avif">
  <source type="image/webp" srcset="pretty-tiny-image.webp">
  <img alt="A larger image" src="not-so-tiny-image.jpg">
</picture>

Want to take this up a level? Apply native lazy loading for an even better page load performance. Read our guide on how to here.

未来は?
Avif形式をテストする際に、いくつかの印象的な結果を与えることができますが(50 % +同様の品質でWebpファイルサイズの削減)それは完璧なソリューションではありません.我々がしているものが純粋な速度と資源の明快さであるならば、Avifは確かにそれがほとんどの状況で勝つだろうように見えます.しかし、それがビデオから生まれる形式であるので、それは他のイメージ形式が持っている特徴の一部を欠いています.JPG形式についての大きなことは、それが徐々にレンダリングすることができます.それで、それが多分より大きい間、それは複数のレンダリングパスで速度の印象を与えることができて、したがって、ユーザーにより速く現れます-最初により低い品質バージョンで最初に.UXの観点では、JPGがAvif形式でこの状況で勝つという議論があります.

結論-あなたはAvifを使用する必要がありますか?
短い答え、はい.より長い答え.はい、しかし、常にバック、よくサポートされている画像- WebpやJPGなどが含まれます.私たちの最善の提案は、あなたがソースを制御することができますし、それらをサポートするブラウザに最適化された画像を提供することができます画像要素を使用して、まだすべての画像を表示している保証.常に、あなたのイメージを最適化して、常に役に立つalt 視覚障害者のためのあなたのイメージを記述するタグ.
持続可能なウェブサイトを作成するについての詳細を読むか?メンバーになることによって我々の資源のすべてへのアクセスを得てくださいThe sustainable.dev