【高速化】 PNG・JPEG・WebP・AVIF の 画像形式 を比較

## ポイント

- 画像は容量が大きい
- PNG・JPEG・WebP・AVIF  の 画像形式 を比較
- 現状は WebP が良い

## 目的：画像を早く表示する

ブログサイトの表示を高速化する。

画像は容量が大きく、当該サイトのデータ転送量の８割以上を占めている。

ファイル形式による、容量と画質の違いを検証する。

## 対象：PNG・JPEG・WebP・AVIF

<figure class="table-responsive">

|  | 登場  | 圧縮 | 圧縮率 | 透過 |
|--|--|--|--|--|
| JPEG | 1994 年 | 非可逆 | ◯ | ✕ |
| PNG | 1996 年 | 可逆 | △ | ◯ |
| WebP | 2010 年 | 両方 | ◎ | ◯ |
| AVIF | 2020 年 | 両方 | ◎◎ | ◯ |

</figure>

AVIF は、主要なブラウザの最新版はほぼ対応している

参考：caniuse.com サイト

https://caniuse.com/avif

## 検証結果

<br>

### データ量

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrWBHcCxVyvloGnGgRHy3SmOPaw-IMlRbZ1LG5SVf0oM928NT-ya9zQBUsbo7kVK8gP-OZbxBgRDKjLap6cob7_M5uQQUJ6RbG-DbuEAcCeSWHi_WQFkhkUNibfFV1mU_dHegNXdZO6kLVC3ziU7jR_qfO_br6lIfRCdUiLMPjgZ4Iw/s0-rw-e90/%E7%94%BB%E5%83%8F%E3%81%AE%E5%BD%A2%E5%BC%8F%E3%81%A8%E3%83%87%E3%83%BC%E3%82%BF%E9%87%8F%E3%81%AE%E3%82%B0%E3%83%A9%E3%83%95.png" alt="画像の形式とデータ量のグラフ.png (800×1120)" width="400" height="560" >

**可逆圧縮と非可逆圧縮でデータ量に大きな違い** がある。

WebP より AVIF の方がデータ量が小さい。

<br>

### 画質：PNG → WebP（可逆）

<br>

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQlxcFYlTRKnAi1c3Cei_jHWo3MZcWMeNF51N2hBAjjxrpeOZEu7OZ5Nr-k49DoPQMW_LNeDw2m9TbI4iilR4iLGH116LvsfJ_X3GkFOkdseq73aGkq81JWk08NWryJ460uNJb0Do0vV4TuN8u5PbwzDt4M3r3JMgeOivdgUglXN5xA/s400-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A24000.png" alt="富士山の正方形の写真" width="350" height="350" >
<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQlxcFYlTRKnAi1c3Cei_jHWo3MZcWMeNF51N2hBAjjxrpeOZEu7OZ5Nr-k49DoPQMW_LNeDw2m9TbI4iilR4iLGH116LvsfJ_X3GkFOkdseq73aGkq81JWk08NWryJ460uNJb0Do0vV4TuN8u5PbwzDt4M3r3JMgeOivdgUglXN5xA/s400-rw-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A24000.png" alt="富士山の正方形の写真" width="350" height="350" >

:::note info
PNG 275 KB　と　WebP（可逆） 222 KB
:::

可逆圧縮なので、もちろん劣化していない。容量は 20% ほど削減できる。

<br>

### PNG → JPEG（非可逆）→ WebP（非可逆）

PNG を JPEG に圧縮し、さらにそれを WebP に変換する。

JPEG の圧縮率は Google 推奨の 85 で行っている。

<br>

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqWhNhyphenhyphen_9pJwHwIGWHVXb-d99sOpjgkwPrU1ckTynwieTqElNLM45cOhRv2jt6BwTPtHdh07jM9Pt6SrzEzqzv2KDmudmlkuik55uZzVLUuwYeZRjvsQreaOBY2pJBshKpvvmiGCCRu_zucS8HUS3_N7_pXUPcdc23bNwiuyL778HBRA/s400-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A2400%20%20JPEG%2085.jpg" alt="富士山の正方形の写真" width="350" height="350" >
<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqWhNhyphenhyphen_9pJwHwIGWHVXb-d99sOpjgkwPrU1ckTynwieTqElNLM45cOhRv2jt6BwTPtHdh07jM9Pt6SrzEzqzv2KDmudmlkuik55uZzVLUuwYeZRjvsQreaOBY2pJBshKpvvmiGCCRu_zucS8HUS3_N7_pXUPcdc23bNwiuyL778HBRA/s400-rw-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A2400%20%20JPEG%2085.jpg" alt="富士山の正方形の写真" width="350" height="350" >

:::note info
JEPG 34.6 KB　と　WebP（非可逆） 27.2 KB
:::

JPEG は、よく見ると元の PNG より山の稜線や空の色味が劣化している。

WebP は JPEG よりさらに圧縮できるが、違いはわからない。

<br>

### PNG → AVIF（可逆）、PNG → AVIF（非可逆）

**Qiita では AVIF を入力できない！** ので、画像を見たい方は、元のブログ記事を参照してください。

https://kimamaniigakuronbun.blogspot.com/2024/04/Blog05.html#avif-imgs

<br>

## 高解像度画像

最近は、1点 に２～３倍の解像度で表示させる高解像度の機種が主流になっている。

画質を求めるなら、最適なレベルまで圧縮した画像を高解像度で配信するのが正解。

<br>

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqWhNhyphenhyphen_9pJwHwIGWHVXb-d99sOpjgkwPrU1ckTynwieTqElNLM45cOhRv2jt6BwTPtHdh07jM9Pt6SrzEzqzv2KDmudmlkuik55uZzVLUuwYeZRjvsQreaOBY2pJBshKpvvmiGCCRu_zucS8HUS3_N7_pXUPcdc23bNwiuyL778HBRA/s400-rw-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A2400%20%20JPEG%2085.jpg" alt="富士山の正方形の写真" width="350" height="350" >
<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDIoF6Ll60gRnnmRcGn_UgPX2U-W8KI0jme_ma5-kKQOUy8U6VrTd-wRSIoZv80iYm614FK2ApC9lFEOg-BteIztz3pU9ZbrsUG6IPMVOf-2o6JyVx5hplkceIerBWtwJuTiAPrGgO9p4g5MATLOOzpp4O8X1KdvdWKJ4zFO183ejduQ/s800-rw-e90/%E5%AF%8C%E5%A3%AB%E5%B1%B1%E6%AD%A3%E6%96%B9%E5%BD%A2%20800%20JPEG%2085.jpg" alt="富士山の正方形の写真" width="350" height="350" >

:::note info
上：WebP（非可逆） 27.2 KB　　下：２倍解像度 800 × 800　106.8 KB
:::

ただし、データ量は解像度に比例して大きくなるので、バランスが悩ましい。

## 結論：現状は WebP が良い

<br>

### データ量のグラフ（再掲）

<br>

<img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrWBHcCxVyvloGnGgRHy3SmOPaw-IMlRbZ1LG5SVf0oM928NT-ya9zQBUsbo7kVK8gP-OZbxBgRDKjLap6cob7_M5uQQUJ6RbG-DbuEAcCeSWHi_WQFkhkUNibfFV1mU_dHegNXdZO6kLVC3ziU7jR_qfO_br6lIfRCdUiLMPjgZ4Iw/s0-rw-e90/%E7%94%BB%E5%83%8F%E3%81%AE%E5%BD%A2%E5%BC%8F%E3%81%A8%E3%83%87%E3%83%BC%E3%82%BF%E9%87%8F%E3%81%AE%E3%82%B0%E3%83%A9%E3%83%95.png" alt="画像の形式とデータ量のグラフ.png (800×1120)" width="400" height="560" >

**可逆圧縮と非可逆圧縮で、データ量に大きな違い** がある。

WebP は PNG と JEPG より小さい。

AVIF は WebP より小さい。

AVIF はブラウザはほぼ対応しているが、Qiita を含む一部の Webサービス は対応していない。

**現状は WebP が無難**。

<br>

***

次の記事


https://qiita.com/kimamanaDr/items/e85c1a7ce00f7a685234


<br>

オリジナルの記事

https://kimamaniigakuronbun.blogspot.com/2024/04/Blog05.html