52
PNGファイルサイズを圧縮/軽量する方法[ImageAlphaとImageOptim編]
ブラウザのPNG対応も進み、透過PNGを使うのも怖くない時代になりました。
スマートフォンサイトでは、jpgよりもPNGを使用しておいた方が画像のレンダリングでのバグは安全です。（Retinaサイズに対応する場合に正確に2倍にしてない画像をiOS5/safari環境で縮小するとjpgではレンダリングバグが発生します）
ファイルサイズを軽量化することはWeb/アプリ製作においては基本中の基本です。
ではPNG時代の軽量化はどうすれば良いのか？
自分は下記の2種類のアプリケーションImageAlphaとImageOptimの2つのアプリを使って軽量化をしています。
http://pngmini.com/
ImageOptim
http://pngmini.com/
使用方法
- まずは、ImageAlphaを使用します。
ImageAplhaはPNG画像の減色を行いますので、色数が多い画像に対しては、かなりの容量を減らせます。また透過PNGにも対応。 - ImageAlphaを使用した画像をImageOptimでさらに圧縮します。
ここで大事なのはImageAlphaが減色ツールだったのに対して、ImageOptimはメタデータを削除し、画質を劣化させずに画像データを軽量化・最適化する事です。
そのため、必ず順序はImageAlpha → ImageOptim の順番で行わないとImageOptimの意味が無いです。
ぜひPhotoshopやIllustratorから、「Web用に保存」したスライスをそのまま使用してる方は、試して、より最適化されたWeb製作に役立ててみてください。
コメントする