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

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

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

* 2013/04/09 コメント欄にて教えて頂いた Compress PNG Images Online のことを少し”追記”しました。

使い方

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

5 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

      • Lissa 2017-03-15 8:29 PM

        solo te respondere que me baso en llamarte pendejo por el simple hecho de que no sabes leer, revisa comentario por comentario y analiza el sentido ironico del mio, vuelvo a decirlo pendejo ademas en ningun momento te mente la madre, tu madre me imagino que no es la culpable de tu idiotez, te dije littnalmeree PENDEJO, es mi derecho el llamarte pendejo, personas como tu que no saben el contexto de las freses y solo las usan porq en la escuela se las enseñaron, me das pena

        Reply

Leave a Comment

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


*


Categorys

Tags

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