ブロガー必見!画像形式と圧縮。PNG画像は注意が必要だ。

WEB作成に使用する画像には何を使ったらいいか。画像にはJPEG,PNG,GIFが主に使用されますが、それぞれ特徴がありますので、特徴に応じて使い分けましょう。

Initializing...

ブログに画像を使用する場合、どんな形式の画像にするか迷ったことがありませんか? ブログに使用する場合は特に画像の特徴にあった種類を使用することはもちろん画像のサイズ、ここではどのくらい圧縮できるか圧縮率にも注意して使いたいものです。

画像形式の特徴で使い分ける

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というプラグインがありこれがとても便利です。


ブログに使用する場合は1バイトでも小さくするのがSEO対策に有効です。SEO対策をどんなにつくしても最終的にアップロードする画像が大きければSEOのポイントを大きく下げてしまいます。

なぜ、画像圧縮と画像形式にこだわるかといえば、この記事を書くきっかけとなったのが、EWWW Image OptimizerプラグインとPNG画像なのです。このブログではたくさんのスクリーンキャプチャを使っています。テキスト中心で比較的大きな画像も可能なPNG画像形式はまさしくスクリーンキャプチャがぴったりなのです。このたくさんの画像がほとんど圧縮されていないのが判明。何年間も書き溜めたブログがこういう状態だったら? 数百枚~数千枚の画像の貼り替えするのは不可能!

PNG形式はプラグインで自動圧縮不能!

PNG画像圧縮はロスレス圧縮にしない!

EWWW Image Optimizerの初期設定では、PNG画像もロスレス圧縮になっています。これが原因でした。JPEG画像はロスレス圧縮で構わないのですが、PNG画像は圧縮率優先を設定しなければなりませんでした。多数のブログを参考にEWWW Image Optimizerを導入しましたが、これに言及しているブログは見つけられませんでした。もし、300Kバイトの画像が100Kバイト以下になるとしたら、あなたはどちらを選びますか? もちろんブログとして考えたら小さい方を選択すべきです。でも安心ください。PNG画像を圧縮率優先(lossy compression)で処理してもにじみや物の輪郭が不鮮明になる、色の再現が不正確などの画像劣化はあまり見られません。もともとテキストや単純な画像に適したPNG画像は画質劣化しにくいのです。

EWWW Image OptimizerのPNG画像の圧縮は、圧縮率優先を設定する!

EWWWImageOptimizer_lossycompression

PNG画像サイズ検証

では、実際にある画像を元にしてどのくらいの画像圧縮が可能なのか検証してみましょう。参考にした画像は当ブログで使用している画像でで元サイズは432Kバイトあります。この画像を実際にEWWW Image Optimizerのロスレス圧縮(losslress compression)でアップロードしても画像サイズは約343Kバイトでした。これを設定を圧縮率優先(lossy compression)でアップロードすると66.1%も圧縮されて146Kバイトになりました。285Kバイト圧縮されましたので、これを文字数にすると1バイト=1文字ですから285千文字分、原稿用紙で713枚分。

Optimaizing Level サイズ 圧縮率 画像品質
オリジナル 432,149
Lossless 343,275 20.6%
Lossy 146,759 66.1%

画質劣化あるか確かめて!

実際にどの程度画質劣化あるかは、下記の画像にてお確かめください。下記の画像をクリックすると大きく表示されます。全然問題とならないレベルであることは確かですね。
上から順に元画像、ロスレス圧縮でアップロードした画像、圧縮率優先でアップロードした画像の順番です。

比較対象オリジナル画像

オリジナルPNG画像(432Kバイト)

 

比較対象ロスレス圧縮画像

ロスレスでアップロードしたPNG画像(342Kバイト)

 

 

比較対象lossy圧縮した画像

圧縮率優先(146Kバイト)

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る