結局Webサイトの画像なに使えばいいのよ2024春【WebP/AVIF】

結論

HTML

WebP単体使用

<img src="/img/hoge.webp" alt="" width="1000" height="500">

もしくは、AVIFを使用しフォールバックにWebP指定

<picture>
	<source type="image/avif" srcset="hoge.avif">
	<img src="hoge.webp" alt="" width="1000" height="500">
</picture>

CSS

WebP単体使用

.hoge {
  background-image: url("fuga.webp");
}

もしくは、AVIFを使用しフォールバックにWebP指定

.hoge {
  background-image: -webkit-image-set(
	  url("fuga.avif") type("image/avif"),
	  url("fuga.webp") type("image/webp")
	);
  background-image: image-set(
    url("fuga.avif") type("image/avif"),
    url("fuga.webp") type("image/webp")
  );
}

WebP（ウェッピー）とは

GoogleがWeb用に開発した画像フォーマットです。
PNGやJPGよりも圧縮率が高く軽量です。

AVIF（エーブイアイエフ）とは

AV1 Image File Formatの略で、非営利団体Alliance for Open Media（GoogleやAmazon, Appleなど多くの大企業が参加している）によって開発された画像フォーマットです。
WebPよりさらに高圧縮＆高品質を謳っています。

ファイルサイズ比較

ものは試し。
Squooshを使って、jpg (2.79MB) の画像を圧縮＆変換してみました。
設定はデフォルトのままです。

（ここに画像貼ろうと思ったけど、QiitaはWebPとAVIF貼れなかった！各自で頼む！！）

すると評判通り、ファイルサイズは jpg (843KB) > webp (687KB) > avif (269KB) という結果になりました。
ただし品質（Quality）は調整が必要そうです。

またavifへの変換にはかなり時間がかかったので（体感2倍）、そこはネックかもしれません。

ブラウザ対応状況

WebP

96.86% と高いサポート率で、主要ブラウザ+一世代前でサポートされています（2024/04/23）。
一般的な案件で使用する分には、問題ないと言えるでしょう。
"webp" | Can I use... Support tables for HTML5, CSS3, etc

AVIF

93.16% とこちらも高いサポート率で、主要ブラウザ+一世代前でサポートされています（2024/04/23）。
弊チームでは95%を目安としているため若干の不安は残りますが、ほぼ問題ないと言えるサポート率です。
"avif" | Can I use... Support tables for HTML5, CSS3, etc

使い方

単体で使用する場合

webp単体で使用するのが、現状のおすすめです。

<img src="/img/hoge.webp" alt="" width="200" height="100">

フォールバック用画像を用意する場合

画像の切り替えはpictureタグで行います。ブラウザ側が使用する画像を判断し、不要な画像データがロードされるのを避けられます。

<!-- 優先度: avif > webp -->
<picture>
	<source type="image/avif" srcset="hoge.avif">
	<img src="hoge.webp" alt="" width="200" height="100">
</picture>

<!-- 優先度: avif > webp > jpg -->
<picture>
	<source type="image/avif" srcset="hoge.avif">
	<source type="image/webp" srcset="hoge.webp">
	<img src="hoge.jpg" alt="" width="200" height="100">
</picture>

フォールバック用画像を用意しつつ画面幅によって切り替える場合

<picture>
	<!-- PC幅 && avif -->
  <source media="(min-width:768px)" type="image/avif" srcset="/img/fuga.avif" width="1000" height="300">
	<!-- PC幅 && jpg -->
  <source media="(min-width:768px)" srcset="/img/fuga.jpg" width="1000" height="300">
	<!-- avif -->
  <source type="image/avif" srcset="/img/fuga-sp.avif" width="500" height="500">
	<!-- jpg -->
	<img src="/img/fuga-sp.jpg" alt="" width="500" height="500">
</picture>

CSSで使う場合

image-setを使用します。
ベンダープレフィックスが必要です。

.hoge {
  background: no-repeat left top / 100% auto;
  background-image: -webkit-image-set(
	  url("photo.avif") type("image/avif"),
	  url("photo.webp") type("image/webp"),
	  url("photo.jpg") type("image/jpeg")
	);
  background-image: image-set(
    url("photo.avif") type("image/avif"),
    url("photo.webp") type("image/webp"),
    url("photo.jpg") type("image/jpeg")
  );
}

※image-setはベンダープレフィックス付きで97.44%（2024/04/23）、最新ブラウザ+一世代前対応
CSS image-set | Can I use... Support tables for HTML5, CSS3, etc
image-set() - CSS: カスケーディングスタイルシート | MDN

デザインツールの対応

プラグイン導入で対応できるツールもありますが、今のところはjpgやpngで書き出したファイルを何らかのツールでWebPやAVIFに変換するのが妥当かなと思われます。

XD

• WebP＆AVIF
  非対応

Figma

• WebP
  読み込めるが、書き出しにはプラグインが必要。
• AVIF
  非対応。プラグインがあるみたい。

Photoshop

• WebP
  読み込みや保存はできるが、書き出しやWeb用に保存では対応していない。
  コーディングで使えるかというと微妙。
• AVIF
  非対応。プラグインを入れることで表示と書き出しができる。

変換ツール

AVIF＆Webp対応

• Crushee
  メリット

  • 複数ファイル一括変換できる
  • リサイズできる
  • 圧縮前後を視覚的に比較できる

  留意点

  • インストールが必要（Win&Mac対応）
  • 圧縮率が微妙？（体感ですが）

• Squoosh

  メリット

  • リサイズできる
  • 圧縮前後を視覚的に比較できる
  • ブラウザ上で利用できる

  デメリット

  • 複数ファイルの一括変換ができない

WebP対応

• サルワカ
  • 複数ファイル一括変換できる

その他いろんなツールがありますが、分かる方は sharp でnpm-scripts書けば良いと思います。
参考: 【Node.js】sharp でサクッと「AVIF」「WebP」生成 #Node.js - Qiita

また最近アツいフレームワークであるAstroのPictureコンポーネントを使えば、各フォーマットへの対応が手軽にできるので、弊社はこちらの方向で今後攻めていく予定です。

おわり

こないだWebPが出てきたと思ったらもう次なのねぇ～。
正直ナメてたのですが、私がボーッとしてる間にサポート率めっちゃ高くなってて笑いました。

勉強会でAVIFはまだ変換ツールがあまり無くて…とか変換の処理に時間がかかって…とか話してたら、昔はWebPがそんな感じだったよね～って話になり、タシカニ～ってなりました。

流転ですね。

また変化が訪れたら共に対応していきましょう。
では～👋

参考

"webp" | Can I use... Support tables for HTML5, CSS3, etc
"avif" | Can I use... Support tables for HTML5, CSS3, etc
CSS image-set | Can I use... Support tables for HTML5, CSS3, etc
image-set() - CSS: カスケーディングスタイルシート | MDN
Astro Docs
Alliance for Open Media
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
AVIFの普及でWebPはもういらないかもしれない | TAKLOG