こんにちは！ Hike×Hackのかけすけ( @kakesuke02 )です！
おととい、そして昨日に引き続き、本日も「画像の軽量化」についての話題です。
昨日の記事では、JPEG形式の画像を軽量化する「JPEGmini」を紹介しました。ですが、「JPEGmini」とあるように、対応しているのは「.jpg」の画像のみであり、他に画像の形式としてよく挙げられる「.png」の画像には対応していないのです。これは、由々しき事態です。
しかし、救いの手はあります。そこで登場するのが、PNG画像を圧縮するサイトなのです。その名も「TinyPNG」。JPEGminiの穴を見事に埋めてくれました。
本日は、その「TinyPNG」について、話をしていきましょう。
≪１．TinyPNGのサイトへ≫
「JPEGmini」のサイトへいっても「TinyPNG」にはたどりつけません。
以下のリンクから、「TinyPNG」のページヘと飛ぶことにしましょう。
≪２．PNG形式の画像を圧縮する≫
やってまいりました。
画面の左上には、今にも「やあ、僕パンダのパン左衛門！ 三度の飯より笹の葉が好きだけど、PNG画像はもっと大好きなんだ、ハハッ！」という言葉を発してきそうなパンダがいますが、彼の目を数十秒見つめるとPNG画像の世界に飛ばされて食べられてしまうので注意してください。
自分で言っててよくわからないですが、そういう設定に今しました。
さて、大切な箇所は「Drop your .png files here!」と書いてある点線の枠内です。昨日紹介した「JPEGmini」と同様に、この点線の枠の中では
A.軽量化したい「.png形式」の画像ファイルを、緑の枠にドラッグ＆ドロップ。
もしくは
B.枠の内側をクリックして、「.png形式」の画像ファイルを選択する。
という２通りの方法で画像圧縮をはじめることができます。JPEGminiの無料版では同時に複数の画像を圧縮することはできませんが、TinyPNGでは、無料でも同時に２０個までのPNG画像を処理することができます。(処理する画像の合計サイズが、5MBを越えない場合)
そのため、圧縮したい画像が複数あるのであれば、同じフォルダにまとめるなどして、一気に選択したほうが効率はよくなるでしょう。
さて、以上の手順を踏むと、すぐさま画像の圧縮がはじまります。圧縮には数秒かかるので、少し待機しましょう。
すると……
このように、ダウンロードが完了します。パン左衛門も大喜びです。プレビューはなく、「JPEGmini」よりもずっと簡素な結果画面になっていますね。
まず、緑色のバーの左側には「圧縮前のサイズ」、右側には「圧縮後のサイズ」が
表示されています。
また、一番右には「-81%」のようにどのくらい圧縮されたのかがわかるので、参考にしてみてください。
さて、画像の軽量化はこれで完了しました。次に、圧縮後の画像をダウンロードしましょう。
結果の右側にある「download」をクリックすると、ダウンロードがはじまります。
作業は以上です。
ちなみに、ダウンロードにあたって「JPEGmini」と違う点は、「保存されるファイル名」です。
JPEGminiの場合は「○○_mini」というファイルになりましたが、この「TinyPNG」は元タイトルのまま新たに画像が保存されるため、「○○(1)」という名前になります。
そのため、「あれ、同じ画像を２つダウンロードしちゃってたか。１つ消そう」と思って画像を削除してしまわないように気をつけて下さい。ファイルサイズを見れば違いは一目瞭然なので、もし不安が残るのであれば、サイズを表示させて確認してみましょう。
これにて、軽量化されたPNG画像の取得は完了しました。プレビューなどがなく簡略化されている分、JPEGminiよりもとっつきやすいかもしれません。
*
昨日今日と、「JPEGmini」そして「TinyPNG」というサービスを紹介してきました。そのどちらにも共通する注意点は、「画像の形式を間違えないように」ということ。
「.png」はJPEGminiでは使えないですし、「.jpg」もまた、TinyPNGでは使えません。また、拡張子変更で形式をゴリ押し的に変えても、それぞれのサービスは受けつけてくれません。
それぞれのサービスに適した形式の画像を入れさえすれば、問題はありません。あとは、このサービスをどう利用するか。それはあなた次第です。
あなたのブログ生活が、より楽しく、より快適なものになることを願って。
≪まとめ≫
■ 画像のファイルサイズはページの読み込み速度に影響する。
■ 「.png」形式の画像を圧縮してくれる「TinyPNG」
■ 「.jpg」形式の画像は「JPEGmini」がオススメ。
――あなたの旅先案内人 かけすけ( @kakesuke02 )より
関連記事
■あなたのブログに彩りを！ フリーで使える画像素材サイト「PhotoPin」の使い方。 - Hike×Hack
■ブロガーにオススメ！ 無料で使える写真素材サイト「ぱくたそ」を使ってみよう！ - Hike×Hack
■「JPEGmini」で圧縮圧縮ゥ！ JPEG画像を軽量化して、ブログの読み込みを速くしちゃおう！ - Hike×Hack