「TinyPNG」を使用してpngファイルを圧縮した!ほんとに70%近く圧縮された!

公開日:2014年4月15日
最終更新日: 2014年12月9日

png_photo_01

こんにちは!

運営しているサイト速度があまりに遅いために、少しずつ速度アップのための施策を行なっています。
今回は「TinyPNG」というWEBサービスを利用して、「png」ファイルを圧縮してみました。

目次!

1.TinyPNGとは?
2.TinyPNGの良いところ!
3.TinyPNGのちょっと残念なところ!
4.実際に使ってみる!
5.圧縮前と圧縮後の「png」ファイルのチェック!

TinyPNGとは?

「png」ファイルを圧縮してくれる海外のWEBサービスです。
最大で70%も「png」ファイルを圧縮してくれます。
全て英語ですが、簡単に使用できますよ。

TinyPNGの良いところ!

・想像以上の圧縮力(最大70%)!
・圧縮されたのに、ほとんど圧縮前と区別がつかない!
・圧縮されるスピードが速い!
・英語なのに迷わず使える!
・ファイル名は変更されずに圧縮される!

他のpng圧縮ツールと比べても、かなりレベルが高いです!

TinyPNGのちょっと残念なところ!

・圧縮された「png」ファイルは1つずつしかダウンロードできない!
・5MB以上の「png」ファイルは圧縮できない(これはしょうがない)!
・1度に20ファイルまで(これもしょうがない)。
・圧縮前と圧縮後の「png」ファイルのプレビューが確認できない!

何とか改善してもらえないでしょうか。特に1ファイルずつしかダウンロードできないのはキツイです。

実際に使ってみる!

まずは「TinyPNG」へアクセス!

【公式サイト】
TinyPNG

以下のようなサイトが開きます。

png_photo_02

圧縮したい「png」ファイルをドラッグ!

圧縮したい「png」ファイルを「Drop your .png files here!」にドラッグします。

png_photo_03

今回はテストとして「test.png」をアップしてみました。
結果は「92.1KB」から「29.2KB」に圧縮されています!
想像以上です!

png_photo_04

圧縮した「png」ファイルをダウンロードし完了!

圧縮された「png」ファイルをダウンロードしてください。
1ファイルずつしかダウンロードできないのが、ちょっと残念ですね。
※ファイル名が同じなので、上書きなどには注意してください。元に戻せなくなります。

png_photo_05

これで圧縮作業は完了です。
簡単だったでしょ!

圧縮前と圧縮後の「png」ファイルのチェック!

圧縮前と圧縮後の「png」ファイルに違いがあるのかチェックしてみようと思います。

圧縮前の「test.png」

png_photo_06

圧縮後の「test.png」

png_photo_07

「60KB」以上、圧縮されているのに、私の目からは、ほとんど違いが感じられません!
皆さんの目には、どう見えますか?

最後に!

1ファイルだけでこれだけの違いがあるので、サイトの全pngファイルを圧縮すれば、かなり表示速度のアップにつながってくれると思います。
少し手間は掛かりますが、作業する価値はあると思うので、ぜひお試しください!

以上「「TinyPNG」を使用してpngファイルを圧縮した!ほんとに70%近く圧縮された!」でした!

それではまた。

【今まで行った速度改善の施策!】
.htaccessに3行付け加えただけで表示速度がアップ!
「JPEGmini」を使用してjpegファイルを圧縮した!ほんとに80%近く圧縮された!
WordPressの高速化!JetpackのPhotonは絶対導入すべき!
「instantclick.min.js」でページの読み込みを高速化してみる!

公開日:2014/04/15
最終更新日: 2014年12月9日
カテゴリー:お勧めツール・ソフト

関連記事

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly