画像形式の特徴で使い分ける
JPEG画像
ジェイペグと呼びます。写真などのフルカラーの画像を使用する場合にはJPEGを使いましょう。JPEGは大きなサイズの画像や256色から16ビットカラー（1670万色）の画像を利用する場合に適しています。もともと圧縮を前提にした画像で圧縮の仕方では元の画像の90％もの圧縮が可能です。ただ、単色の画像は文字を中心とした画像は苦手で、こちらの場合は次に説明するGIF画像やPNG画像を検討しましょう。 ※ここでは画像の質が劣化しないロスレス画像圧縮で考慮します。GIF画像
GIF(ジフ)画像は、アイコンやアニメーション画像に利用されるのでよくご存じだと思います。GIFは8ビット（256）色までの小さな画像に適しています。またGIF画像の特徴として、先ほど説明したアニメーションが作れるということと背景を透明にできるのもGIF画像の大きな特徴です。PNG画像
PNG(ピング）画像は、JPEGとGIFの隙間を埋める画像形式で8ビット（256）色以上の小さな画像を作りたい場合や文章を画像形式で表示するなど色数は少ないけど大きな画像になっています場合に適しています。GIFとは異なりフルカラーの画像も作成できますが、画像サイズが比較的大きくなったり圧縮が効かないのが欠点です。また、GIF画像のように背景が透明な画像の作成もできます。画像圧縮対応
画像を圧縮する場合、画質が劣化しないロスレス圧縮を前提としたいところです。wordpressの場合画像をアップロードする際に自動的に画像を圧縮してくれるEWWW Image Optimizerというプラグインがありこれがとても便利です。
【参 照】ブログの画像を自動で圧縮してくれるプラグイン「EWWW Image Optimizer」
ブログに挿入される画像は小さい方が読み込みも早くなり、強いてはSEO対策にもなります。そのため、個別に画像を最…
PNG画像圧縮はロスレス圧縮にしない！
EWWW Image Optimizerの初期設定では、PNG画像もロスレス圧縮になっています。これが原因でした。JPEG画像はロスレス圧縮で構わないのですが、PNG画像は圧縮率優先を設定しなければなりませんでした。多数のブログを参考にEWWW Image Optimizerを導入しましたが、これに言及しているブログは見つけられませんでした。もし、300Kバイトの画像が100Kバイト以下になるとしたら、あなたはどちらを選びますか？ もちろんブログとして考えたら小さい方を選択すべきです。でも安心ください。PNG画像を圧縮率優先（lossy compression）で処理してもにじみや物の輪郭が不鮮明になる、色の再現が不正確などの画像劣化はあまり見られません。もともとテキストや単純な画像に適したPNG画像は画質劣化しにくいのです。 EWWW Image OptimizerのPNG画像の圧縮は、圧縮率優先を設定する！
PNG画像サイズ検証
では、実際にある画像を元にしてどのくらいの画像圧縮が可能なのか検証してみましょう。参考にした画像は当ブログで使用している画像でで元サイズは432Kバイトあります。この画像を実際にEWWW Image Optimizerのロスレス圧縮(losslress compression)でアップロードしても画像サイズは約343Kバイトでした。これを設定を圧縮率優先（lossy compression)でアップロードすると66.1％も圧縮されて146Kバイトになりました。285Kバイト圧縮されましたので、これを文字数にすると１バイト＝1文字ですから285千文字分、原稿用紙で713枚分。| Optimaizing Level | サイズ | 圧縮率 | 画像品質 |
| オリジナル | 432,149 | ||
| Lossless | 343,275 | 20.6% | ◎ |
| Lossy | 146,759 | 66.1% | ○ |
画質劣化あるか確かめて！
実際にどの程度画質劣化あるかは、下記の画像にてお確かめください。下記の画像をクリックすると大きく表示されます。全然問題とならないレベルであることは確かですね。 上から順に元画像、ロスレス圧縮でアップロードした画像、圧縮率優先でアップロードした画像の順番です。
オリジナルPNG画像（432Kバイト）
ロスレスでアップロードしたPNG画像（342Kバイト）
圧縮率優先（146Kバイト）
この記事へのコメントはありません。