AVIF対応してみる

2024年3月20日

結論：WebPが今のトレンドだと思っていた時代遅れの私です・・・

Wikipediaによると

AVIF（AV1 Image File Format）は、AV1で圧縮された画像または画像シークエンスをHEIFコンテナフォーマットに保存するためのオープンでロイヤリティフリーな画像ファイルフォーマットの仕様である[1][2]。同じコンテナフォーマットのISOBMFF（英語版）上に構築され、圧縮にHEVCを使用するHEICと競合している。AVIFの仕様のバージョン1.0.0は2019年2月に規格化された。

ざっとしらべたところ

• HDR に対応
• 可逆圧縮と非可逆圧縮に対応
• アニメーション対応
• 透過(アルファチャンネル)対応

とかっぽい。そりゃ対応するでしょ。

サンプルテスト

ほんとうはOriginalのJPEGを載せたかったけど色々とあってWebPとAVIFだけを載せてみた。

WebP

AVIF

見た目の感想は1mmもわからない。どっちでもいいんでねーの^^;;

結果はAVIFのほうが圧縮率は高い。S3のStorage容量も減らせるしコスト削減にもなる。もとのJPEGの20%まで容量が減るのか、これはありがたい

今後はAVIFで画像をアップロードしたほうが良さそうだな。

AVIFの対応ブラウザ

Can I UseでAVIFの対応状況を調べてみた

AVIFはだいたいのブラウザ(92.53%)でいける。入れ替えても良さげだよね。ということでこの記事の画像はAVIFにしてみる。

WebPとあまり変わらない感じかな。

AVIFをほんの少し触って感じたこと

AVIFへの変更はSquooshを使っているんだけどWebPに比べて変換が時間がかかる気がする。

圧縮効率はいいので変換時間がかかるのはしゃーないかなと思っている

 WordPressでAVIFを使うには

function.phpの変更を実施

add_filter( 'upload_mimes', 'add_avif_to_upload_mimes' );
function add_avif_to_upload_mimes( $mimes ) {
  $mimes['avif'] = 'image/avif';
  return $mimes;
}
add_filter( 'wp_check_filetype_and_ext', 'wpse_file_and_ext_avif', 10, 4 );
function wpse_file_and_ext_avif( $types, $file, $filename, $mimes ) {
  if ( false !== strpos( $filename, '.avif' ) ) {
    $types['ext'] = 'avif';
    $types['type'] = 'image/avif';
  }
return $types;
}

上記設定追加でAVIFのアップロードができました。