Hike×Hack

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

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

20140504154917

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

昨日の記事で、「ページの読み込み速度を速くするために、画像の容量を軽くしよう」ということを書きました。

ブログの読み込みを少しでも速くするために、「JPEGmini」と「TinyPNG」で画像を軽量化! - Hike×Hackブログの読み込みを少しでも速くするために、「JPEGmini」と「TinyPNG」で画像を軽量化! - Hike×Hack

そして、私がそのために使っているツールである「JPEGmini」と「TinyPNG」についても触れました。

本日は、その2つのうちの1つ。「JPEG(.jpg)」形式の画像を軽量化することのできる「JPEGmini」の使い方についてお伝えしようと思います。

慣れれば、1つの画像に1分もかからないような簡単な作業です。「めんどくさそう」と敬遠せずに、この機会に使ってみていただけると幸いです。それでは早速、画像を交えながら見ていきましょう!

≪1.JPEGminiのサイトへ≫

いつだって、はじまりはここからです。そう、「JPEGminiのページに飛ばなければJPEGminiは使えない」ということです。

早速、JPEGminiのページに飛びましょう。

JPEGmini | Process your photoJPEGmini | Process your photo

※トップページではなく、画像を圧縮できるページヘのリンクです。

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

上のリンク先へいくと、次のような画面が映し出されます。

20140504154909

ここですることはとても簡単なことです。

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

もしくは

B.赤枠の箇所をクリックして、「.jpg形式」の画像ファイルを選択する。

以上のどちらかを手順を踏むことで、自動的に画像の圧縮がはじまります。ここで、「どのように圧縮するか」というような設定はありません。手順に沿って画像を入れるだけ。あとは勝手に、画像を圧縮してくれるのです。

さて、圧縮するために数秒間待ちますと、次のような結果画面が表示されます。

20140504154910

まず、赤い枠を見てください。

右半分には「JPEGmini」、そして左半分には「Original」のラベルがついています。これはつまり、右半分は「圧縮後」、左半分は「圧縮前」のプレビューであることを意味しています。(もちろん、ダウンロードした画像にこのラベルはついてきません)

また、この区切りはプレビュー画像にマウスを合わせることで移動することもできるので、「画像はどんな風に変わるのかな」といった時はここで確認して下さい。

次に、緑色の枠を見てみましょう。ここでは、圧縮前と圧縮後の「ファイルサイズ」が比較されています。上の画像では「JPEGmini 52 KB」「Original 246 KB」となっているのがわかります。

これはそのままの意味で、圧縮前は246KBだったものが、圧縮後は52KBになったということです。

なんと、約20%にまで圧縮されたのですから驚きです。画像の容量が、明らかに軽量化されていますね。

それでは次に、圧縮後の画像をダウンロードしましょう。

20140504154911

赤枠に囲まれている部分をクリックしてください。

すると、元タイトルを引き継いだ「○○_mini」という名前の画像が新しくダウンロードされます。元の画像も残りますので、ご安心ください。

20140504154912

これで、JPEG画像を軽量化することに成功しました。あとは、圧縮後の画像をブログに貼り付けることで作業は完了です。

こうすることで「ギャース! ページの読み込み速度がめっちゃ速くなった!」と唸るほど変化するわけではありませんが、塵も積もれば山となるわけです。

決して時間がかかる作業ではありませんので、ぜひともJPEG形式画像の軽量化に、本日紹介した「JPEGmini」を使ってみてください。

この記事が、あなたのお役に立てたのであれば幸いです。

≪まとめ≫

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

■ 「.jpg」形式の画像を見事に圧縮してくれる「JPEGmini」

■ 「.png」形式には「TinyPNG」がオススメ。

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

関連記事

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

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

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