Hike×Hack

「人生をハイキングのように楽しむ」をモットーに、日々の気付きやライフハックについてお伝えしていくブログ

「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では使えません。また、拡張子変更で形式をゴリ押し的に変えても、それぞれのサービスは受けつけてくれません。

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

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

≪まとめ≫

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

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

■ 「.jpg」形式の画像は「JPEGmini」がオススメ。

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

関連記事

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

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

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