結論：デカい画像を高圧縮！
真っ先に書いちゃいますね。見出しの通りです。
解像感を維持しながらJPEG画像のファイル容量を減らすとき、ピクセルサイズよりも画質を落としたほうが綺麗です。
ずっと悩んでました
僕は写真をブログに掲載するとき、できるだけ綺麗な写真を見てもらいたいと考えています。
でも、あまりファイル容量が重たい画像を載せると記事の表示に時間がかかって、快適に読めなくなってしまいます。
そこで「ブログ 写真 サイズ」とグーグル検索してみましたが、ピクセルサイズしか言及していない記事ばかり……（探し方の問題かもしれませんが）。
しかしJPEG形式の画像ファイルにはピクセルサイズのほかに「画質」というバロメーターがあります。
これを変えると同じピクセルサイズでも、かなりファイル容量が変化するのです。
そこで「ブログに写真を掲載するときにファイル容量を抑えつつ、解像感を維持するにはどうしたらよいか？」を確かめるため、
- ピクセルサイズを小さく＆高品質（＝低圧縮）
- ピクセルサイズを大きく＆低品質（＝高圧縮）
の2つのアプローチで検証してみました。
検証環境
検証にあたり、画像のピクセルサイズ変更と圧縮は macOS 標準の「プレビュー.app」を用いています。
手順としては、
- オリジナル画像をRAW形式から Affinity Photo でJPEG形式に現像（編集なし）
- JPEG画像をコピー
- ピクセルサイズを変更
- 画質（＝品質）を設定して「別名で保存」
を行いました。
プレビュー.app の画質については1〜8の目盛りがあり、おそらく Adobe Photoshop でいう 0〜100 に対応していると思われます。
そのため、0〜100 スケールに換算するには画質の値を12.5倍してください。
「画質」による変化
今回、用意した画像は昨秋に宮城県の鳴子峡を写した1枚。
木々の葉や橋梁の柱が細かく描画されているので、ファイル容量が大きくなりがちな写真です。
ちなみにオリジナル画像は SONY α7III で撮影したもので、JPEG形式では
- 6024px × 4024px
- 29.9MB
となっています。
まず手始めに長辺を640pxにリサイズして画質によるファイル容量を比較してみます。
すると、ファイルサイズは以下のようになりました。
| 画質 | ファイル容量 |
|---|---|
| 0（最低） | 30KB |
| 8（最高） | 597KB |
なんと約20倍もの差が生じました。もちろん解像感の差は歴然です。
ピクセルサイズと圧縮
もちろんピクセルサイズが大きくなれば、ファイル容量も増えます。
同じ画像をリサイズ＆圧縮してファイル容量の変化をグラフにしてみました。
ここでグラフを見てみると、640pxで画質：7のときと1800pxで画質：0のときはどちらも約200KBのファイル容量でした。
| 長辺px数 | 画質 | ファイル容量 |
|---|---|---|
| 640px | 7 | 189KB |
| 1800px | 0 | 198KB |
では、小さくて低圧縮の画像と大きくて高圧縮の画像はどちらが綺麗に標示されるのでしょうか？
並べてみる
こんなの並べれば一目瞭然だと思います（少し表示に時間がかかるかもしれません）。
※中央のバーを左右に動かすと比較できます
640pxではモザイク画のように潰れたディテールが1800pxの画像では残っています。
やはりピクセルサイズは正義でした。
同じファイル容量ならば、大きなピクセルサイズで画質を落としたほうが綺麗に表示されるが今回の検証の結論です。
なので、これからブログに掲載する写真は1800pxにリサイズして、ファイル容量が200〜250KBになるように画質を調整していきます。
ただ、スマートフォンの小さな画面で閲覧するぶんには640pxも1800pxも“言われてみればわかる”程度の差異なので、あまり気にする必要もないのかもしれませんね。
でも、このブログのアクセス者の4割以上はパソコンを利用しているようなので、大画面向けに高解像度の写真を上げていこうと思います。
ではでは。
