次世代フォーマットAVIFとはなんだろうか。
AVIFとはこの地球上で最も新しい画像拡張子。(.avif)
Google、Apple,Netflixなどでも使用されるほど注目を浴びています。
ウェブサイトの速度を改善し、閲覧ユーザーにとってストレスフリーにすることがトラフィックを向上するための最も大切なことになります。AVIFは画像のクオリティを下げないまま画像サイズの容量を大幅に改善することができます。
実際にAVIFではJPEGと比べると約60%、WebPと比べると35%もの画像サイズをクオリティをロスしないまま画像サイズを抑えることができます。Twitter上に掲載された海外のフリー素材サイトを運営するUnsplashのAVIFに関するツイートをご覧ください。imgixのお客様で元々はWebPを使用していました。ケーススタディ：”https://imgix.com/customers/unsplash”
At @unsplash we're now serving images in AVIF format (if the browser supports it), thanks to @imgix! Lab data shows a ~30% decrease in image sizes. 🎉 pic.twitter.com/ErmBowKW5K
— Oliver Ash (@OliverJAsh) September 23, 2021
AVIFを使うことの利点
AVIFの拡張子を使うと画像の容量を削減するだけでなく以下の利点を得ることができます。
- ページ読み込み速度の改善
- SEOランキング向上 (googleなどでの検索で容量が抑えているサイトを上位に掲載されます）
- 直帰率の低下 （一度サイトを閲覧にきて、すぐに別のサイトに行ってしまう割合を減らします）
- 閲覧ユーザーの満足度向上
- bandwidth費用を削減
知ってる？AVIFが対応していないブラウザがある。。
AVIFいいじゃん、と思った方々、大変申し訳ない。AVIFはまだ全てのブラウザで対応している訳ではないのです。現在約69%のブラウザが対応している。
現在AVIFが対応しているブラウザ：
- Google chrome 85-93
- Mozilla Firefox 86-92
- Android
AVIFが対応していないブラウザ：
- Microsoft Edge
- Firefox はanimated AVIFsがまだ
- Safari
ご安心。imgixのauto=formatで自動的に最適な拡張子を配信
imgixでは画像URLの最後に?auto=formatを加えるだけで自動的に適切な拡張子を提供します。
例：chromeからのアクセスではavif配信、SafariからのアクセスではWebPで配信といった具合。
auto = formatが設定されている場合、imgixは自動コンテンツネゴシエーションと呼ばれるプロセスによって画像を適切な拡張子で提供できるかどうかを判断します。ヘッダー、ユーザーエージェント、画像分析など、利用可能なさまざまな信号をコンパイルして、ユーザーに最適な画像形式を選択します。この形式は返送され、画像は正しくキャッシュされます。
auto=formatに関する詳しい情報はこちらから！https://docs.imgix.com/apis/rendering/auto/auto?_ga=2.220839835.261516489.1647308621-1202030278.1647308621#format
imgixを無償で検証してみたいという方は"Qiitaのブログを見た"とコメントに残してください。特典あるよ：）