Hike×Hack

ライフハックや日常に役立つガジェットなどを好物とするかけすけ(@kakesuke02)が書くライフハック系ブログ

「JPEGmini」でPNG画像が圧縮できないなら、「TinyPNG」を使えばいいじゃない!

20140504154918

 

こんにちは! Hike×Hackのかけすけ( @kakesuke02 )です!

 

おととい、そして昨日に引き続き、本日も「画像の軽量化」についての話題です。

 

昨日の記事では、JPEG形式の画像を軽量化する「JPEGmini」を紹介しました。ですが、「JPEGmini」とあるように、対応しているのは「.jpg」の画像のみであり、他に画像の形式としてよく挙げられる「.png」の画像には対応していないのです。これは、由々しき事態です。

 

しかし、救いの手はあります。そこで登場するのが、PNG画像を圧縮するサイトなのです。その名も「TinyPNG」。JPEGminiの穴を見事に埋めてくれました。

 

本日は、その「TinyPNG」について、話をしていきましょう。

 

 

≪1.TinyPNGのサイトへ≫

 

「JPEGmini」のサイトへいっても「TinyPNG」にはたどりつけません。

 

以下のリンクから、「TinyPNG」のページヘと飛ぶことにしましょう。

 

 

TinyPNG – Compress PNG images while preserving transparencyTinyPNG – Compress PNG images while preserving transparency

 

 

 

≪2.PNG形式の画像を圧縮する≫

 

やってまいりました。

 

 

20140504154913

 

 

画面の左上には、今にも「やあ、僕パンダのパン左衛門! 三度の飯より笹の葉が好きだけど、PNG画像はもっと大好きなんだ、ハハッ!」という言葉を発してきそうなパンダがいますが、彼の目を数十秒見つめるとPNG画像の世界に飛ばされて食べられてしまうので注意してください。

 

自分で言っててよくわからないですが、そういう設定に今しました。

 

さて、大切な箇所は「Drop your .png files here!」と書いてある点線の枠内です。昨日紹介した「JPEGmini」と同様に、この点線の枠の中では

 

A.軽量化したい「.png形式」の画像ファイルを、緑の枠にドラッグ&ドロップ。

もしくは

B.枠の内側をクリックして、「.png形式」の画像ファイルを選択する。

 

という2通りの方法で画像圧縮をはじめることができます。JPEGminiの無料版では同時に複数の画像を圧縮することはできませんが、TinyPNGでは、無料でも同時に20個までのPNG画像を処理することができます。(処理する画像の合計サイズが、5MBを越えない場合) 

 

そのため、圧縮したい画像が複数あるのであれば、同じフォルダにまとめるなどして、一気に選択したほうが効率はよくなるでしょう。

 

さて、以上の手順を踏むと、すぐさま画像の圧縮がはじまります。圧縮には数秒かかるので、少し待機しましょう。

 

すると……

 

 

20140504154914

 

 

このように、ダウンロードが完了します。パン左衛門も大喜びです。プレビューはなく、「JPEGmini」よりもずっと簡素な結果画面になっていますね。

 

まず、緑色のバーの左側には「圧縮前のサイズ」、右側には「圧縮後のサイズ」が

表示されています。

 

また、一番右には「-81%」のようにどのくらい圧縮されたのかがわかるので、参考にしてみてください。

 

さて、画像の軽量化はこれで完了しました。次に、圧縮後の画像をダウンロードしましょう。

 

 

20140504154915

 

 

結果の右側にある「download」をクリックすると、ダウンロードがはじまります。

 

作業は以上です。

 

ちなみに、ダウンロードにあたって「JPEGmini」と違う点は、「保存されるファイル名」です。

JPEGminiの場合は「○○_mini」というファイルになりましたが、この「TinyPNG」は元タイトルのまま新たに画像が保存されるため、「○○(1)」という名前になります。

 

そのため、「あれ、同じ画像を2つダウンロードしちゃってたか。1つ消そう」と思って画像を削除してしまわないように気をつけて下さい。ファイルサイズを見れば違いは一目瞭然なので、もし不安が残るのであれば、サイズを表示させて確認してみましょう。

 

 

20140504154916

 

 

これにて、軽量化されたPNG画像の取得は完了しました。プレビューなどがなく簡略化されている分、JPEGminiよりもとっつきやすいかもしれません。

 

*

 

昨日今日と、「JPEGmini」そして「TinyPNG」というサービスを紹介してきました。そのどちらにも共通する注意点は、「画像の形式を間違えないように」ということ。

 

「.png」はJPEGminiでは使えないですし、「.jpg」もまた、TinyPNGでは使えません。また、拡張子変更で形式をゴリ押し的に変えても、それぞれのサービスは受けつけてくれません。

 

それぞれのサービスに適した形式の画像を入れさえすれば、問題はありません。あとは、このサービスをどう利用するか。それはあなた次第です。

 

あなたのブログ生活が、より楽しく、より快適なものになることを願って。

 

 

――あなたの旅先案内人 かけすけ( @kakesuke02 )より

 

 

≪まとめ≫

 

■ 画像のファイルサイズはページの読み込み速度に影響する。

■ 「.png」形式の画像を圧縮してくれる「TinyPNG」

■ 「.jpg」形式には対応していない。 → 「JPEGmini」がオススメ。

 

 

関連記事

あなたのブログに彩りを! フリーで使える画像素材サイト「PhotoPin」の使い方。 - Hike×Hack

ブロガーにオススメ! 無料で使える写真素材サイト「ぱくたそ」を使ってみよう! - Hike×Hack

「JPEGmini」で圧縮圧縮ゥ! JPEG画像を軽量化して、ブログの読み込みを速くしちゃおう! - Hike×Hack