こんにちは！ Hike×Hackのかけすけ( @kakesuke02 )です！
昨日の記事で、「ページの読み込み速度を速くするために、画像の容量を軽くしよう」ということを書きました。
そして、私がそのために使っているツールである「JPEGmini」と「TinyPNG」についても触れました。
本日は、その２つのうちの１つ。「JPEG(.jpg)」形式の画像を軽量化することのできる「JPEGmini」の使い方についてお伝えしようと思います。
慣れれば、１つの画像に１分もかからないような簡単な作業です。「めんどくさそう」と敬遠せずに、この機会に使ってみていただけると幸いです。それでは早速、画像を交えながら見ていきましょう！
≪１．JPEGminiのサイトへ≫
いつだって、はじまりはここからです。そう、「JPEGminiのページに飛ばなければJPEGminiは使えない」ということです。
早速、JPEGminiのページに飛びましょう。
※トップページではなく、画像を圧縮できるページヘのリンクです。
≪２．JPEG形式の画像を圧縮する≫
上のリンク先へいくと、次のような画面が映し出されます。
ここですることはとても簡単なことです。
A.軽量化したい「.jpg形式」の画像ファイルを、緑の枠にドラッグ＆ドロップ。
もしくは
B.赤枠の箇所をクリックして、「.jpg形式」の画像ファイルを選択する。
以上のどちらかを手順を踏むことで、自動的に画像の圧縮がはじまります。ここで、「どのように圧縮するか」というような設定はありません。手順に沿って画像を入れるだけ。あとは勝手に、画像を圧縮してくれるのです。
さて、圧縮するために数秒間待ちますと、次のような結果画面が表示されます。
まず、赤い枠を見てください。
右半分には「JPEGmini」、そして左半分には「Original」のラベルがついています。これはつまり、右半分は「圧縮後」、左半分は「圧縮前」のプレビューであることを意味しています。(もちろん、ダウンロードした画像にこのラベルはついてきません)
また、この区切りはプレビュー画像にマウスを合わせることで移動することもできるので、「画像はどんな風に変わるのかな」といった時はここで確認して下さい。
次に、緑色の枠を見てみましょう。ここでは、圧縮前と圧縮後の「ファイルサイズ」が比較されています。上の画像では「JPEGmini 52 KB」「Original 246 KB」となっているのがわかります。
これはそのままの意味で、圧縮前は246KBだったものが、圧縮後は52KBになったということです。
なんと、約２０％にまで圧縮されたのですから驚きです。画像の容量が、明らかに軽量化されていますね。
それでは次に、圧縮後の画像をダウンロードしましょう。
赤枠に囲まれている部分をクリックしてください。
すると、元タイトルを引き継いだ「○○_mini」という名前の画像が新しくダウンロードされます。元の画像も残りますので、ご安心ください。
これで、JPEG画像を軽量化することに成功しました。あとは、圧縮後の画像をブログに貼り付けることで作業は完了です。
こうすることで「ギャース！ ページの読み込み速度がめっちゃ速くなった！」と唸るほど変化するわけではありませんが、塵も積もれば山となるわけです。
決して時間がかかる作業ではありませんので、ぜひともJPEG形式画像の軽量化に、本日紹介した「JPEGmini」を使ってみてください。
この記事が、あなたのお役に立てたのであれば幸いです。
≪まとめ≫
■ 画像のファイルサイズはページの読み込み速度に影響する。
■ 「.jpg」形式の画像を見事に圧縮してくれる「JPEGmini」
■ 「.png」形式には「TinyPNG」がオススメ。
――あなたの旅先案内人 かけすけ( @kakesuke02 )より
関連記事
■あなたのブログに彩りを！ フリーで使える画像素材サイト「PhotoPin」の使い方。 - Hike×Hack