JPEGの解像度や品質とファイルサイズの関係 (ImageMagick)

# サンプル画像

今回は、以下の画像 `publicdomainq-0077777irxtii.jpg` を実験に用いた。

![publicdomainq-0077777irxtii.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/b7e91a27-f851-cd4c-0559-b03da6c2f692.jpeg)

[[フリー写真] 商店街を歩くカップルの後ろ姿 | パブリックドメインQ：著作権フリー画像素材集](https://publicdomainq.net/couple-shopping-street-photo-0077777/)

# 実験

以下の形式のコマンドで、解像度と品質を指定して変換を行った。

```
magick convert publicdomainq-0077777irxtii.jpg -colorspace rgb -resize 90% -colorspace srgb -quality 95 s090_q095.jpg
```

参考：[sRGB空間で画像処理するべからず - 豪鬼メモ](https://mikio.hatenablog.com/entry/2018/09/10/213756)

ImageMagick のバージョン (`magick --version`) は以下である。

```
Version: ImageMagick 7.1.1-12 Q16-HDRI x64 a09d8dd:20230625 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenCL OpenMP(2.0)
Delegates (built-in): bzlib cairo flif freetype gslib heic jng jp2 jpeg jxl lcms lqr lzma openexr pangocairo png ps raqm raw rsvg tiff webp xml zip zlib
Compiler: Visual Studio 2022 (193632532)
```

「効率」は小さいほど良いことを表す。

## 解像度とファイルサイズの関係

### 品質 30

|解像度 [%]|幅 [px]|高さ [px]|サイズ [KiB]|効率 [B/px²]|
|--:|--:|--:|--:|--:|
|1|60|42|0.8|0.311|
|5|300|211|8.4|0.136|
|10|600|423|24.6|0.099|
|20|1200|845|66.1|0.067|
|30|1800|1268|115.2|0.052|
|40|2400|1690|170.3|0.043|
|50|3000|2113|230.9|0.037|
|60|3600|2535|295.2|0.033|
|70|4200|2958|362.9|0.030|
|80|4800|3380|433.8|0.027|
|90|5400|3803|509.9|0.025|
|100|6000|4225|590.5|0.024|

![解像度とファイルサイズ・効率の関係 (品質 30)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/fd6fc880-389e-8694-a76b-39b75a7db58e.png)

### 品質 70

|解像度 [%]|幅 [px]|高さ [px]|サイズ [KiB]|効率 [B/px²]|
|--:|--:|--:|--:|--:|
|1|60|42|1.2|0.483|
|5|300|211|15.5|0.251|
|10|600|423|45.1|0.182|
|20|1200|845|121.7|0.123|
|30|1800|1268|213.5|0.096|
|40|2400|1690|317.4|0.080|
|50|3000|2113|432.8|0.070|
|60|3600|2535|556.1|0.062|
|70|4200|2958|689.5|0.057|
|80|4800|3380|832.4|0.053|
|90|5400|3803|980.8|0.049|
|100|6000|4225|1144.1|0.046|

![解像度とファイルサイズ・効率の関係 (品質 70)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/9df3532d-67bc-cf4b-e44b-f625402cbfa0.png)

### 品質 95

|解像度 [%]|幅 [px]|高さ [px]|サイズ [KiB]|効率 [B/px²]|
|--:|--:|--:|--:|--:|
|1|60|42|2.4|0.963|
|5|300|211|37.6|0.609|
|10|600|423|110.1|0.444|
|20|1200|845|304.3|0.307|
|30|1800|1268|552.4|0.248|
|40|2400|1690|859.9|0.217|
|50|3000|2113|1231.0|0.199|
|60|3600|2535|1650.2|0.185|
|70|4200|2958|2135.1|0.176|
|80|4800|3380|2687.0|0.170|
|90|5400|3803|3281.2|0.164|
|100|6000|4225|3865.1|0.156|

![解像度とファイルサイズ・効率の関係 (品質 95)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/ee86ffa7-8d2c-5c35-18d2-7ccd4584ac4c.png)

### まとめ

![解像度とファイルサイズの関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/e0f82232-1972-077e-a6da-aa02005372ef.png)
![解像度と効率の関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/1a9369de-48ff-d803-aebb-c589540abc54.png)

どの品質でも、解像度を上げるほどファイルサイズが大きくなり、効率は良くなった。
とはいえ、ある程度以上大きい解像度では、効率の差は小さくなってくる。

## 品質とファイルサイズの関係

以下のように PNG 形式に変換した画像との違い (PSNR) を算出した。

```
magick convert publicdomainq-0077777irxtii.jpg -colorspace rgb -resize 20% -colorspace srgb s020.png
magick compare -metric PSNR s020.png s020_q095.jpg NULL:
```

参考：[ImageMagick で画像比較 (Compare) #diff - Qiita](https://qiita.com/yoya/items/2021944690bd9c0dafb1)

### 解像度 10% (600×423)

|品質|サイズ [KiB]|PSNR [dB]|効率 [KiB/dB]|
|--:|--:|--:|--:|
|1|3.4|20.3529|0.168|
|5|6.4|22.5050|0.283|
|10|11.2|24.9066|0.450|
|20|18.7|27.0084|0.693|
|30|24.6|28.1174|0.875|
|40|29.3|28.8338|1.016|
|50|33.7|29.4199|1.146|
|60|38.2|29.9765|1.275|
|70|45.1|30.7182|1.468|
|80|55.9|31.7341|1.760|
|90|79.6|33.5008|2.377|
|95|110.1|34.8253|3.160|
|98|153.0|35.5835|4.300|
|100|209.4|35.7995|5.850|
|PNG|409.3|-|-|

![品質とファイルサイズ・PSNRの関係 (解像度 10%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/9d35f8b2-730b-b132-0025-250441023ea0.png)
![品質と効率の関係 (解像度 10%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/17bb2512-d996-a32c-79bb-f440fb945875.png)

<details><summary>品質と画像</summary>

|品質|画像|
|--:|:-:|
|1|![s010_q001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/aa733d87-58e0-5146-0304-34f639610f53.jpeg)|
|5|![s010_q005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/920ec55b-e596-80a6-fdc4-3856e05d00e5.jpeg)|
|10|![s010_q010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/cd87083d-7e92-3ac7-0831-e85bd1bc7591.jpeg)|
|20|![s010_q020.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/6c68519a-e129-bc1f-dce0-42d18418adb8.jpeg)|
|30|![s010_q030.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/410b0da7-ad31-c13a-681a-3ab9ab121f6a.jpeg)|
|50|![s010_q050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/cabdf1ca-3d09-341c-5605-2dc1b295a84d.jpeg)|
|70|![s010_q070.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/e4d1199a-fd72-dbfa-7243-368559717ceb.jpeg)|
|95|![s010_q095.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/fab5ccd2-d025-d3a3-cb2a-a7a26eea3858.jpeg)|

</details>

### 解像度 20% (1200×845)

|品質|サイズ [KiB]|PSNR [dB]|効率 [KiB/dB]|
|--:|--:|--:|--:|
|1|10.4|22.0987|0.473|
|5|17.8|24.6325|0.722|
|10|30.7|27.5412|1.115|
|20|50.0|30.0891|1.661|
|30|66.1|31.3690|2.106|
|40|78.8|32.1818|2.448|
|50|90.6|32.8222|2.760|
|60|103.1|33.3823|3.089|
|70|121.7|34.1613|3.561|
|80|150.8|35.2363|4.279|
|90|216.9|37.1817|5.833|
|95|304.3|38.7578|7.852|
|98|425.8|39.7943|10.701|
|100|634.8|40.1937|15.794|
|PNG|1304.4|-|-|

![品質とファイルサイズ・PSNRの関係 (解像度 20%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/93a82e37-8962-f714-ba08-df45ca7d1128.png)
![品質と効率の関係 (解像度 20%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/7a353221-f873-4d40-cac0-2a285da6bb94.png)

<details><summary>品質と画像</summary>

|品質|画像|
|--:|:-:|
|1|![s020_q001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/c2322e27-96be-da12-588a-672a513ca162.jpeg)|
|5|![s020_q005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/92c2e502-bf26-9e8f-10a8-b8903c453fdc.jpeg)|
|10|![s020_q010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/dcbdf472-3a13-6a18-db4d-fafcd92abcc1.jpeg)|
|20|![s020_q020.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/676f30f1-7317-42e1-bd5e-6e137ea2189c.jpeg)|
|30|![s020_q030.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/578bdbfd-d4d2-face-898d-ea847805464c.jpeg)|
|50|![s020_q050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/3f19f603-4473-9ded-15a3-35a9516000e3.jpeg)|
|70|![s020_q070.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/6c6569af-94f0-bad2-5da5-ad1715b1249c.jpeg)|
|95|![s020_q095.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/99ce6d1d-3d8f-c73a-b235-e5f034325979.jpeg)|

</details>

### 解像度 40% (2400×1690)

|品質|サイズ [KiB]|PSNR [dB]|効率 [KiB/dB]|
|--:|--:|--:|--:|
|1|34.2|23.7217|1.444|
|5|49.4|26.4225|1.869|
|10|80.9|29.9081|2.704|
|20|130.7|33.1349|3.944|
|30|170.3|34.7660|4.900|
|40|202.4|35.8318|5.648|
|50|233.1|36.6347|6.363|
|60|266.0|37.3859|7.116|
|70|317.4|38.3603|8.275|
|80|395.7|39.6360|9.983|
|90|585.3|41.7206|14.030|
|95|859.9|43.6075|19.718|
|98|1246.9|45.1917|27.590|
|100|1986.2|46.1956|42.996|
|PNG|4258.4|-|-|

![品質とファイルサイズ・PSNRの関係 (解像度 40%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/a6a234a6-c891-d624-9581-519ad53d556a.png)
![品質と効率の関係 (解像度 40%)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/5032aa46-c4f1-3c5b-f122-2766610e68f3.png)

<details><summary>品質と画像</summary>

|品質|画像|
|--:|:-:|
|1|![s040_q001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/f926ff9e-cc28-f536-b238-221cba31f780.jpeg)|
|5|![s040_q005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/8c6b5e72-fa25-0bd3-e13b-71cc62cee36f.jpeg)|
|10|![s040_q010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/233716e0-bbb0-8bea-54f5-d60f24abad35.jpeg)|
|20|![s040_q020.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/50ac0dd2-b759-6beb-6940-4f0032963db2.jpeg)|
|30|![s040_q030.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/ce116d37-11a2-8bcd-c34f-6854a6db5c7f.jpeg)|
|50|![s040_q050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/84682daf-bbea-224e-79b1-d2b3c8cd93d1.jpeg)|
|70|![s040_q070.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/a985d0ed-c8f9-ee48-03f4-d39f7deeab76.jpeg)|
|95|![s040_q095.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/a50739ee-f554-d8bb-ded1-3547b11e6bcd.jpeg)|

</details>

### まとめ

![品質とファイルサイズの関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/80cb786c-2e2e-5e54-ea59-b5662c258500.png)
![品質と PSNR の関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/ee7b6999-7ed4-9ead-55e3-10308e26a72e.png)
![品質と効率の関係](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99656/382a4f49-9019-37bd-a310-f18ed7893f1f.png)

今回実験を行ったどの解像度でも、だいたい以下のことがいえそうである。

* 品質が 80 を超えると、ファイルサイズが大きく増えていく
* 品質が 20 を下回ると、PSNR が大きく下がっていく
* 品質 40 程度までは、画像の劣化はあまりみられない
* 品質 10 になると、手前の人の服の色が変わってくる
* 品質 1 はほぼモザイクである
* 品質 100 でも、PNG に比べて半分程度のファイルサイズになる

JPEG では解像度にかかわらず 8×8 のブロックごとに圧縮処理を行うため、もとの解像度が高いと、品質を 1 にしてももとの画像の情報が残りやすいようである。

品質を下げると画像が劣化しやすくなると考えられる一方、品質を極端に上げたり下げたりしなければファイルサイズへの影響は比較的小さいようである。

# まとめ

画像を Web での公開用に JPEG に変換する際は、品質は 60～80 程度に設定し、ファイルサイズの調整のためには適切な解像度を設定するのがよいと考えられる。
ただし、今回の実験結果はあくまで今回の画像でのものであり、画像の性質によって結果が変わる可能性が考えられる。
今回の結果は目安とし、実際の画像での仕上がりを確認しながら変換を行うのがよいだろう。