usブログやSNSを通じて、Webに関する最新技術や情報を定期的に更新しています。画像最適化に便利なツール検証【png編】2014.10.09前回の画像最適化に便利なツール検証【jpeg編】に引き続き、png画像の最適化検証を行います!png編では、画像最適化ツール「ImageOptim」「TinyPNG」「ImageAlpha」を比較してみました。結果はどうでしょうか...。2013のサイトで先輩が作成したアイコンです。温かい色合いが良いですよね。ImageOptimjpeg編で特徴については説明したので省略します。環境設定では、PNGOUT、OptiPNG、AdaPNGの最適化レベルを調整することができます。今回は初期設定のままで検証しました。ファイルサイズ:25KB特別、見た目の変化はありません。TinyPNGPNG-24をPNG-8(256色)に変換して容量を削っているようです。ブラウザにアップロードして使用します。ファイルサイズ:9KBとっても軽くなりました。元が単色のイラストなので、軽減率が高いですね。見ると輪郭線が歪んだようにも見えますが、まじまじと比較しなければ分からない程度です。ImageAlpha色数を減らしてファイルサイズを軽量化できるツールです。色数を減らすというところではTinyPNGと同じですが、256色以下にも自分で調整ができます。チェック一つでIE6対応の透過PNGが作れます。(IE6のシェアから考えるともう不要かもしれませんが...)※参考リンク:透過を保ちつつpngを高圧縮するMacの無料アプリImageAlpha。素でIE6対応Colors:256ファイルサイズ:12KBまず、TinyPNGと同じく256色にして検証してみました。見た目はオリジナルと変わりません。ファイルサイズは、TinyPNGより大きいですね。Colors:64ファイルサイズ:7KB色数を64まで落とすとTinyPNGの検証時と同じく7KBになりました。見た目もTinyPNGと同じくらいです。Colors:16ファイルサイズ:4KBどこまで色数を落とすと劣化するかな...と思い、16まで下げてみました。ファイルサイズは4KBとなりオリジナルから約13%になりました。縁(特に赤と緑の境目)が劣化しているのが分かります。単色のベタ塗りの場合は、こうして調整してみると良いですね。プレビューで確認しながらできるので便利です。それ以外では、256色の設定で良さそうです。ImageAlphaはImageOptimと連携できるのも便利な特徴です。ImageAlphaにて⌘+Shift+Sで保存すると選択ボックスが出てくるので選んでください。ImageAlphaの後に、ImageOptimでの最適化をかけることができます。今回の検証ではImageAlpha単体での結果が知りたいので、連携しませんでした。png最適化のまとめ1このように色数や色の変化が少ない(ベタ塗りが多い)場合は、画質の変化はあまり見られませんでした。12KBファイルサイズが一番小さくなったのは、TinyPNGとなりました!ただし、ブラウザにアップロードするところが、気になります...。他の画像で比較してみる上のような色数や色変化が少ない素材ではあまり画質の劣化が見られなかったので、他の素材でも比較してみました。オリジナル素材ファイルサイズ:310KBシナップディレクター三國さんの愛猫、リンくん(オス)です。ImageOptimファイルサイズ:287KB見た目やファイルサイズでも殆ど差はないですね。TinyPNGファイルサイズ:102KB色数が減ったので、全体的に色合いが変化してしまいました。目の中の光が、オリジナル画像よりも薄まって見えます。ImageAlphaColors:256ファイルサイズ:106KBTinyPNGほどではないですが、眉間の毛並みが劣化しています。表示する大きさによっては、これで良いというケースもあるかもしれません。ファイルサイズもイラストでの検証と違いTinyPNGとそれほど大きな差は出ませんでした。png最適化のまとめ2TinyPNGの圧縮率は高いですが、クライアント案件ではブラウザにアップロードするのは情報漏洩的に怖いかなと感じます。プライベートの作成では使用しても自己責任なので気にならない方は良いかもしれません。検証からはImageAlphaを使用し、そのあとにImageOptimを通して最適化する流れがベストだと分かりました。ImageOptim(102KB)という結果でした。pngの場合もjpeg同様に、元素材の状態や使用用途によってどこまで調整するか変わって来ます。それぞれの特徴を知って、よりよい画像最適化を行っていましょう。今回紹介した以外にもオススメのツールがあったら是非教えてください!この記事をシェアするモバイルUI:「メニュー」アクション(動作)を動画でまとめてみました。私たちシナップは、クライアントのビジネスと顧客を深く理解し、インターネットとつながるユーザー接点すべてをデザインすることで、ビジネスの継続的な発展を作り出すことを得意としています。IOQ(アクセス)利用規約プライバシーポリシーこのサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。同意するCookieを。