この記事をおすすめしたい人
- PageSpeed Insightsで高得点目指している人
- PageSpeed Insightsのスコアは落としたくないけどPNG画像を使う必要がある人
- つまりオレ
PageSpeed Insightsで高得点を狙う場合、JPGに比べてファイルサイズの大きなPNGはネックになりやすいです。
Googleは次世代フォーマットを使えといいますが、いまだ全ブラウザで汎用的に使えるフォーマットはなく、基本はJPGとPNGで戦うことになると思います。
そこで今回は、どうにかPageSpeed Insightsで指摘されないPNGを作れないかといろいろと検証してみました。
WordPressの上でな！
※ このブログはまだWordPress製です
このページの目次
最適化ツールの利用と形式の見極め
まずは最適化ツールを使うとどの程度サイズが減らせるのか、画像形式(JPG/PNG)の変更でどの程度サイズを減らせるのか確認します。
題材として、このサイトで使っている似顔絵を使います。
こういうやつです。
見ての通り、背景が透過でPNG向きの素材ですが、PNGはサイズが大きくなりがちなのでJPGで使用しています。
これを、Adobe Photoshopで出力したままのもの、オンライン最適化ツールOptimizillaを利用したパターンで比較します。
結果↓。
| ツール | PNG | JPG |
|---|---|---|
| Photoshop | 60KB | 16KB |
| Optimizilla | 23KB | 8KB |
JPGの品質はPhotoshop、Optimizillaともに60。
PNG→JPG、最適化ツールの利用ともに50％以下になりました。 最適化ツールを使ったことのない人からしたらけっこう驚きの結果じゃないですか？
最適化ツールの効果は絶大です！
めんどくさがらずに最適化ツールを使いましょう。
あとは、やっぱPNGはデカイですね…。
最適化ツールを使うこと、本当にPNGが必要なのか検討することがまず第一歩かなと思います。
PNGを使うべき場所
サイズ的にどうしても大きくなるPNGは使う場面を限定すべきです。
じゃーどこで使うのか、となると「JPGではダメな場所」「PNGじゃないとダメな場所」になると思います。
具体的には背景透過が必ず必要とか、1pxの画質劣化も許したくない場所。
背景透過については「透過させた方が便利」とかじゃなくて「絶対に透過させないとダメな場所」がいいと思います。 上の似顔絵のように、サイトの背景と画像の背景を揃えることでJPGで代用ができるからです。
あとはグラフなど、PNGのインデックスカラーが強い場所(後で出てきます)かなと思います。 こういうケースはPNGの方がサイズ的にも画質的にも有利です。
サイズ(幅と高さ)の最適化は必須
画像は当然幅と高さが大きいほどファイルサイズが大きくなります。
ですが、大きい方がいろいろと使いやすいのも実情…。
先ほどの似顔絵は実は大きい方でして、
よく使うのは小さい方です。
大きい方は300pxの正方形で、小さい方が64px。
最初は300pxと64pxの2種類用意していたんですが、300pxを使い回した方がRetinaディスプレイでキレイなので今は兼用(手抜き)しています。
これを適切なサイズで使用した場合にどの程度のファイルサイズ減少が期待できるのか試してみます。
適切なサイズに縮小して最適化
先ほどと同様に、PhotoshopとOptimizilla、PNGとJPGの4パターンです。
| ツール | 形式 | サイズ | 減少率 |
|---|---|---|---|
| Photoshop | PNG | 5.59KB | -90％ |
| Photoshop | JPG | 2.35KB | -88％ |
| Optimizilla | PNG | 2.75KB | -86％ |
| Optimizilla | JPG | 1.10KB | -89％ |
300pxの時に比べて9割近くファイルサイズが減少できています。
難しいこと考える前に、ちゃんとシーンごとの適切なサイズの画像を用意するだけで驚くほど縮むのが分かると思います。
元のPNG(55KB)から比べると、
- 最適化ツールの利用
- JPGを選択
- 適切なサイズに縮小
の3点の最適化で、50分の1になりました。
PNGの最適化…？
何も考えずにツールに突っ込んで60KBのPNGが23KBにまで減りましたが、これってちょっと不思議な現象です。
PNGは劣化がない代わりに圧縮しにくい
PNGはJPGと比べると、大きく異なるのは次の3点。
- 透過が使える
- 画質の劣化がない
- 圧縮率が低い
つまり、「高画質だけど圧縮率が低い」画像フォーマットです。
にもかかわらず60KBから23KBってJPG並の圧縮率になってませんか？
PNG圧縮の仕組み
ちょっと小難しい話を。
通常、ビットマップ画像は1pxあたりRGBAというデータを持っていて、順に赤・緑・青・透過度を256段階で記録しています。 それぞれ1バイトなので1pxが4バイト。 100＊100pxの画像だと4万バイト＝40KBになります。
PNGはここから、元の画像にちゃんと戻せるアルゴリズムで圧縮をかけます。
これに対してOptimizillaが行っているのは、RGBAという構造を捨ててインデックスカラーという方式に変換するという手法です。
インデックスカラーというのは色のパレット(色のデータ)をRGBAで作り、これに番号を振ります(赤は12番、青は26番みたいな感じ)。 これを利用すると1pxをたった1バイトで表現できるようになります。
100＊100pxの画像(200色)だと、パレットに800バイト、画素に1万バイト。 合計で約11KBとなり、大幅に容量が減らせます。
この方法だと「画質の劣化なし」というPNGの特徴そのままに高圧縮をかけることができるわけです(色数が256色以内の場合)。
つまり、色数を減らすと画質は劣化するがもっとサイズを減らせるということです。
色数は減らしたくないと思う人が多いと思いますが、けっこうガッツリ減色しても意外と分からないものです。
以下に実例を示します。
減色とPNGの圧縮率の実例
先ほどの似顔絵を使用します。
まずは元画像↓。
300＊300pxで187色、背景は透過。 PhotoshopのRGBカラーで60KB、Optimizillaでインデックスカラーへ変更して22.8KB。
まずはざっくり128色まで減色↓。
ファイルサイズは22.8KBから19.8KBまで減りました。
減色されたのかどうかも分からないレベルです。
さらに半分、64色まで減色↓。
16.1KB(-19％)まで減りました。
このあたりまではほとんど変化を感じません。
32色↓で13.3KB。
パッと見では問題なさそうですが、拡大すると髪の毛のグラデーションに違和感がでてきはじめています。 メガネの縁にも変なグレーが。
16色↓で10.8KB。
こちらもパッと見では問題なさそうですが、髪の毛のグラデーションにだいぶドット感が出てきています。 でも均一にドットがある分、等倍だと32色より自然な感じもします。
8色↓で8.66KB。
等倍でも確認出来る白いドットが髪の毛右側に出てきました。 さすがにもう無理ですね。
4色↓で4.94KB。
メガネの白が表現出来ていません。 完全にアウト。
減色によるサイズの推移をグラフにまとめるとこんな↓感じ。
50色を超える領域ではリニアにサイズが減っていき、以降は急激にサイズが減るものの画質にも大きく影響が出てきます。
出力結果を確認しながらバランスのいいラインを見極める必要がありそうです。
仮に16色バージョン(10.8KB)を採用した場合、元の22.8KBに比べて53％減少。 品質60のJPGの8KBと比べても十分勝負できるサイズ差で、なおかつ透過が使えて、JPG特有のノイズがありません。
JPGのノイズはこういう↓やつです。
拡大すると縁取りの周囲にぼやっとしたノイズがいたるところに確認できます。
このようなイラストの場合だと、減色効果をきっちり確認しながら、PNGでカリカリにチューンするのは全然アリですね。
さらに透過が利用できるのが大きい。
減色によるPNG圧縮が向いていない画像
この手法が減色によるものである都合、当然向いていない画像もあります。
ズバリ、写真です。
サンプルとして当サイトのバナー画像↓。
Photoshopが書き出した状態で791KB、Optimizillaでインデックスカラーにしても320KB。
イラストとは異なり元画像が余裕で256色を超えているため、拡大すると既にこの段階でネクタイのあたりに劣化が見えます。
(インデックスカラーは256色までしかできない)
128色↓で279KB。
拡大するとネクタイの影の劣化が酷くなっています。
64色↓で238KB。
ネクタイに加え、右側のハサミとか、明らかに劣化しています。
32色↓で195KB。
細かい部分がさらに劣化。 全体としてはまだギリギリ見れるかな…という品質。
16色↓で151KB。
逆に16色でよくここまで表現してるなと感心しますが、ディスプレイ周りとか明らかに色数が足りていなくて、グレースケールのようになっています。 妥協に妥協を重ねれば使えなくもないかな…という品質。
品質は妥協ライン次第ですが、問題なのはファイルサイズです。
品質60のJPGがコレ↓。
当然フルカラーで、16色PNGが151KBなのに対して、JPGは77KBと約半分。
JPGはJPGでさらに品質を落とすことで圧縮が可能で、品質30↓にすると48KB。
エッジのノイズが増えましたが、それほど気になりません。
品質20↓にすると36KB。
さらにノイズが増え、キーボードとかノイズまみれ。
品質10↓にすると21KB。
ブロックノイズ？が出てきて、物の形が崩壊気味です。
さすがに品質10は厳しいですが、20なら妥協できそうかなという感じはします。
品質20のサイズが36KB、PNGは16色まで減らしても151KBなので、サイズ的にはまるで勝負になりません。
ファイルサイズも画質もPNG有利な画像
ズバリ、グラフ↓です。
これまでの実測から、「単純な画像で、色数が少ない」画像だとPNGでもかなり健闘できることがわかりました。
「単純な画像で、色数が少ない」をもっと極端にしたのがグラフや図です。
上のグラフ、PhotoshopでPNGで書き出すと6.39KBでした。
これを品質60のJPGにすると何と7.28KB。
増えました。
対して元のPNGをインデックスカラーにすると2.62KBと激減。
PNGの方が画質もいいし、ファイルサイズも小さいという何とも奇妙な結果です。
まとめ
まずは本当にPNGが必要なのかを検討しましょう。 PNGが有効に使えるのは次のようなケースです。
- 1pxたりとも画質を劣化させたくない
- 透過を使いたい
- グラフや図、イラストなどPNGの方がサイズが小さくなる画像
PNGを採用することになった場合は、次の3点でしっかり最適化しましょう。
- ちゃんと適切なサイズ(幅と高さ)にすること
- 最適化ツールを利用すること
- 出力結果を確認しながらできる限り減色すること
これでPageSpeed Insightsでも怒られにくいPNGを作れるはずです。
以上、WordPressからお届けしました！
PageSpeed Insightsの目次
- 第1回 静的HTMLが必ず速いわけではない
- 第2回 スコア改善にはとにかく容量を減らす
- 第3回 フォントのサブセット化を掘り下げる
- 第4回 PNG最適化は妥協せず行うべし(このページ)