PNGとJPEG
ブログを立ち上げて、まだ1ヶ月と少ししか経っていないのに、サーバの容量がかなり気になりだしてきました。
というのも、WordPressのバックアップの話のところで記載した話ですが、画像データを含めたバックアップファイルが、当初83MBだったのが、先週は443MBに膨れ上がってたんです。もちろん、急激ではなく、毎週毎週着実に、です。
https://try-widely.com/wordpress-backup/で、ファイルを精査すると画像ファイルが結構なウェイトを占めてたんですね。
画像ファイルが大き過ぎ → 最適なサイズは？
これまで、デジカメで撮影した画像を、そのままのサイズでアップしているものがたくさんありました。列車の写真など、より精細なところを見て頂きたいという思いだったのですが、2,400×1,800ピクセルです。
とはいえ、大半以上の方は、画像は拡大してまで見ないですし、スマホやタブレットなら、幅2,400ピクセルは見れないですよね。
なので、過去の記事からJPEG画像を最大横幅1,200ピクセル(画質80・一部例外あり)に変更していっています。これで、結構なサイズ圧縮になります。
【記事作成後の追記】
このブログで使用しているWordPressが、幅1,024を超えるサイズの画像を、各種デバイスで表示できるよう、自動的に裏処理で幅1,024に変換して(しかも画質100で)保存していることに気づきました。（今さらですが）
そのため、幅1,200で保存しても、「それよりもファイルサイズが大きい」幅1,024の画像ファイルができてしまっています。ですので、幅1,200に縮小した画像を、再び1,024に縮小していっています。
※元画像を幅1,024にすれば、当然、裏処理でも幅1,024の画像は作成されません。
参考までにとある画像のファイルサイズの比較を掲載しておきます。「画質」は、Photoshopでの値です。
| 画像ピクセルサイズ | 変更方法 | ファイルサイズ |
|---|---|---|
| 2,400 × 1,800 | 元データ(デジカメ撮影) 画質：100 | 2.90MB |
| 2,400 × 1,800 | 画質：80 | 1.83MB |
| 2,400 × 1,800 | 画質：60 | 1.07MB |
| 1,200 × 900 | 画質：100 | 0.94MB |
| 1,200 × 900 | 画質：80 | 0.49MB |
| 1,200 × 900 | 画質：60 | 0.29MB |
| 1,024 × 768 | 画質：100 | 0.71MB |
| 1,024 × 768 | 画質：80 | 0.36MB |
| 1,024 × 768 | 画質：60 | 0.21MB |
画質の違いを見て頂くために、小さなサイズの画像を、3つの画質で並べてみました。
画像ファイルの形式は？
これまで、無意識的に、デジカメ画像はJPEGで、PCからのキャプチャ画像はPNGで、と考えていました。
自然な(隣り合うピクセルの色が異なることが多い)色彩を写すデジカメと、ベタ塗りで単調な(隣り合うピクセルが同色となることが多く、かつ、文字をくっきり見せたい)ダイアログなどの、それぞれの特徴を活かしたフォーマットだと思います。
が、JPEGはともかく、PNGの使用範囲は考え直した方がよいか、とも思い始めています。
というのも、画面キャプチャと言っても、「JPEG画像を表示している画面」のキャプチャならどうなの？とか、アプリも(Windows自身もそうですが)解像度の高まりを受けてアイコンが高精細で多色になっていたりとか。なので、ちょっと実験をしてみたいと思います。
これを、JPEGとPNGでそれぞれ保存し、ファイルサイズの違いを見ていきます。
(基本はPNGで作成し、JPEGはそれを変換して保存)
白地に黒文字ならば、圧倒的にPNGが有利です。ちなみに、JPEGで画質：100なら、44,784 byte と、PNGの約9倍にもなります。
色の階調は増えていますが、単調さは増していますので、PNGはベース画像の半分以下になっています。JPEGも、1/3以下になっています。
グラデーションになり、PNGは苦手な画像となってしまいました。画質60ではありますが、JPEGの圧勝になりました。
というわけで、主題です。
JPEGで画質80なら 77,583 byteと、PNGとほぼ同じ。画質100なら 151,747 byte とPNGの倍近くになりました。
JPEG か PNG か。人それぞれ、好みもあるでしょうから、これがいいと結論は出しませんが、画質60程度でも大きな劣化は無いですし、「綺麗に見せたい」写真は画質80のJPEGで、そうでない写真は画質60のJPEGで、文字中心（Windowsのダイアログとか）ならPNGで、とか、使い分ければいいのかな、と思います。