PNGファイルを軽量化してくれるWebサービス-TinyPNG

透過PNGにも対応したPNGファイルを軽量化してくれるWebサービス、「TinyPNG」がこちらの記事「What’s new for designers, July 2012 | Webdesigner Depot」で紹介されていたので使ってみました。

画像の色数を減少させることによってファイルサイズを小さくしているようです。透過PNGにも使えます。

使い方

TinyPNG – Compress PNG images while preserving alpha transparency」へ行って、「Drop your .png file here!」のところへPNGファイルをドラッグ&ドロップします。画像の軽量化が終わると何%軽量化できたかを表示してくれます。
TinyPNG の画像圧縮画面
”download”をクリックで軽量化されたPNGファイルをダウンロードできます。

TinyPNGで軽量化した画像サンプル

実際にTinyPNGで軽量化した画像の使用前、使用後とファイルサイズです。

TinyPNG使用前

ファイルサイズ:25KB
TinyPNG使用前の画像

TinyPNG使用後

ファイルサイズ:16KB
TinyPNG使用後の画像

拡大してよく見ると、TinyPNGで軽量化した画像はグラデーションのところが筋が入っていたり、色が暗くなっていたりしますが、ぱっと見た感じは劣化もほとんど分かりません。ファイルサイズは4割も小さくなりました!

TinyPNGによって軽量化されたファイルはモバイルのブラウザや、Internet Explorer6 以外の主要なブラウザで透過の部分もちゃんと表示されるようです。

ただPhotoshopでTinyPNG使用後の画像を開いた場合は下の画像のように半透明の部分が黒くなってしまいます。
PhotoshopでTinyPNG使用後の画像を開いた場合

この記事で使ったスクリーンショットはTinyPNGを通したら65%も軽量化できました!ブログ等で使う画像もこういったサービスで軽量化するとよいですね。
特にスマートフォンサイトや、WordPressのサイトも重くなりがちなので画像の軽量化は重要ですね。

2013/04/09追記

コメントにて、同じようなPNG画像を圧縮するWebサービス「Compress PNG Images Online」を教えて頂きました!透過PNGも可です。

使ってみた感じでは、TinyPNGよりも圧縮率が高いです。当記事で使ったサンプル画像はCompresspngでは5割近く小さくなりました。

ただ、パッと見はそんなに大差ありませんが、拡大して見るとシャドウの部分がこちらのcompresspngの方が少し粗かったです。

Compress PNG Images Onlineならアップロード後もっと小さくしたい場合に、右に出現する色を減少できる”Color”の所で調節する事が可能です。
Compress PNG Images Onlineの画像圧縮画面
(Compressボタンをクリックで圧縮後の画像をダウンロードできます。)

Related Article

3 Comments & Tracbacks

  • Pol 2013-03-06 5:13 PM

    より良いツールがあります。

    http://compresspng.com
    ———-
    Source: 21K RGBA PNG
    Compressed: 11K (-52%) Indexed-RGB PNG
    ———-
    11K vs 16K

    Reply

    • saori 2013-03-07 11:02 AM

      Polさん
      ありがとうございます!
      画像の色数(?)も自分で調整できるんですね。
      夜にでももうちょっと使ってみます!
      教えて下さってありがとうございますm(__)m

      Reply

    • Beyonce 2016-07-20 7:47 PM

      The paragon of uniesrtanddng these issues is right here!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS