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

## 結論
### HTML
WebP単体使用
```html
<img src="/img/hoge.webp" alt="" width="1000" height="500">
```
もしくは、AVIFを使用しフォールバックにWebP指定
```html
<picture>
	<source type="image/avif" srcset="hoge.avif">
	<img src="hoge.webp" alt="" width="1000" height="500">
</picture>
```
### CSS
WebP単体使用
```css
.hoge {
  background-image: url("fuga.webp");
}
```
もしくは、AVIFを使用しフォールバックにWebP指定
```css
.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](https://squoosh.app/)を使って、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](https://caniuse.com/?search=webp)

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

## 使い方

### 単体で使用する場合

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

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

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

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

```html
<!-- 優先度: 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>
```

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

```html
<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](https://developer.mozilla.org/ja/docs/Web/CSS/image/image-set)を使用します。
ベンダープレフィックスが必要です。

```css
.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](https://caniuse.com/css-image-set)
[image-set() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/image/image-set)

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

### XD

- WebP＆AVIF
非対応

### Figma

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

### Photoshop

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

## 変換ツール

### AVIF＆Webp対応

- [Crushee](https://crushee.app/)
    メリット
    - 複数ファイル一括変換できる
    - リサイズできる
    - 圧縮前後を視覚的に比較できる
    
    留意点
    - インストールが必要（Win&Mac対応）
    - 圧縮率が微妙？（体感ですが）

- [Squoosh](https://squoosh.app/)
    
    メリット
    
    - リサイズできる
    - 圧縮前後を視覚的に比較できる
    - ブラウザ上で利用できる
    
    デメリット
    
    - 複数ファイルの一括変換ができない

### WebP対応
- [サルワカ](https://saruwakakun.com/tools/png-jpeg-to-webp/)
    - 複数ファイル一括変換できる


その他いろんなツールがありますが、分かる方は [sharp](https://www.npmjs.com/package/sharp) でnpm-scripts書けば良いと思います。
参考: [【Node.js】sharp でサクッと「AVIF」「WebP」生成 #Node.js - Qiita](https://qiita.com/taqumo/items/60de0af9699415150035)

また最近アツいフレームワークである[AstroのPictureコンポーネント](https://docs.astro.build/ja/guides/images/#picture-)を使えば、各フォーマットへの対応が手軽にできるので、弊社はこちらの方向で今後攻めていく予定です。

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

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

流転ですね。

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

## 参考
["webp" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=webp)
["avif" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=avif)
[CSS image-set | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/css-image-set)
[image-set() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/image/image-set)
[Astro Docs](https://docs.astro.build/ja/getting-started/)
[Alliance for Open Media](https://aomedia.org/)
[次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA](https://ics.media/entry/201001/)
[AVIFの普及でWebPはもういらないかもしれない | TAKLOG](https://www.tak-dcxi.com/article/avif-format-is-fine-for-astros-images)