最終形？WEBで使う画像サイズを極力小さくして使うための画像圧縮ソフトのコンボ PNGoo×Caesium×optipng×jpegoptim

Tweet

238

画像を最適化するために色々と創意工夫しているのですが、現在たどり着いた実践している画像最適化術です

妥協と最適化

WEBで使う画像ということで、画面サイズ以上の大きなサイズの画像は不要です
まずはWEBページにあったサイズにすること

次に、WEBページの見せ方による画像の画質の妥協
画像のギャラリーサイトなら高画質な画像が必要かもしれません、逆に言えばそれ以外のWEBサイトではそこまでの画質が必要ないとも言えます、画像で伝えたい事が伝わればそれで十分だと思います。
聞こえは悪いですけど画質を劣化させてファイルサイズを下げる作業を行います。
ただ拡大して比較したりしなければ人の目には分からない程度に画質を下げてサイズをダウンさせるのが目的です。

他には画像に適したファイル形式を選ぶこと
PNGが得意とする画像、JPGが得意とする画像がそれぞれあります
JPGは多くの色を使った写真などグラデーションなどに強いです
PNGは単色をはっきり見せるような画像に強いです、さらにアイコン程度の極小サイズも得意としています
適材適所に画像ファイルを使い分けることもファイルのサイズダウンにつながります

基本的にPNGとJPGの2種で事足ります

JPEG画像の圧縮をする

今回はこちらの画像を使って圧縮をします
サイズは一番大きい4000×3000のものを使います

http://pixabay.com/ja/%E6%9C%A8%E8%A3%BD%E3%83%90%E3%82%A4%E3%82%AF-%E6%9C%A8%E8%A3%BD%E3%83%A2%E3%83%87%E3%83%AB-%E3%82%BF%E3%82%A4%E3%81%8B%E3%82%89%E3%81%AE%E8%8A%B8%E8%A1%93-253555/

使うソフトはCaesiumとjpegoptimです

Caesium フリーソフト
http://caesium.sourceforge.net/

jpegoptim フリーソフト
http://sourceforge.net/projects/jpegoptim/

Caesiumで非可逆圧縮する

品質は80で行います、80がもっともバランスの良い圧縮のようです
自分は品質を80にしても違いが分かりません

リサイズで1000×750にします

実行結果

画像サイズが1669.70kbから99.76kbになりました 95％削減できました

次にjpegoptimで可逆式圧縮する

jpegoptimの使い方はこちらを御覧ください

圧縮前

圧縮後

こちらはCaesiumほどの劇的なサイズダウンはありませんが、1kbほどサイズダウンしています
小さい画像のほうが相対的に効果が大きくなります

PNGの画像を圧縮する

今回はこちらの画像を使います

http://pixabay.com/ja/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3-%E3%83%9A%E3%83%83%E3%83%88-%E5%B0%91%E5%B9%B4-%E5%B7%9E%E6%B3%95%E3%81%AB%E3%82%88%E3%82%8B%E8%A8%B1%E5%8F%AF-%E3%83%95%E3%82%A1%E3%83%B3%E3%82%BF%E3%82%B8%E3%83%BC-%E7%B6%B1-152823/

サイズは1920×1317

PNGoo フリーソフト
http://pngquant.org/

optipng フリーソフト
http://optipng.sourceforge.net/

PNGooで非可逆圧縮する

PNGooの使いかはこちらを参考にしてください

PNGooで圧縮することで、約1/3にサイズを下げることが出来ました

さらにoptipngで可逆圧縮する

optipngの使いかはこちら

圧縮前

圧縮後

PNGooで圧縮した後の効果は、こちらの方は微かですが、削減出来ています
作業的にはドラッグ・アンド・ドロップだけで出来てしまうので、とりあえずやっておいてもいいかと思います

Tweet

短縮URL:

2014年01月31日 WEB制作系 画像画像圧縮