読者です 読者をやめる 読者になる 読者になる

ブログの画像が容量オーバーしそうになったときの対策|表示速度の改善にもつながる!

ブログの記事を見たときに文字だけじゃ見づらいですよね。

 

なので、記事を書いているときに画像を挿入している人も多いはず。

 

しかし、あまりにも挿入する画像の容量が大きいと容量がオーバーしてしまいます。

 

挿入する画像の数を減らせばいいのかもしれませんが、それだと満足のいく記事が書けないですよね。

 

じゃあどうすればいいのか?

 

画像圧縮をすればいいんです!

 

てことで、今回は画像圧縮するときにおすすめのツール「TinyPNG」を紹介します。

 

TinyPNGの使い方

tinypng.com

 

使い方はとても簡単。

 

「Drop your_png or_jpg files here!」と書かれている枠の中をクリックすると、フォルダが開きます。

 

その中から圧縮したい画像を選択すればOKです。

 

f:id:sawazonokota:20170222181953j:plain

 

このように、491.3KBの容量だった画像が350.2KBにまで圧縮されました。

 

あとはdownloadをクリックして保存するだけ。

 

とっても簡単!

 

30秒もかかりません。

 

しかし、画像を圧縮すると画質が悪くなるのでは?と思った人もいるはず。

 

では、圧縮前の画像と圧縮後の画像を比較してみましょう。

 

f:id:sawazonokota:20170222183501j:plain

 

左が圧縮前、右が圧縮後の画像です。

 

見た目は全然変わらないです。

 

けど、実際は右の方が容量が小さいんです。

 

なら、画像は圧縮して挿入した方がいいに決まってますよね。

 

さらに、画像を圧縮すると記事の表示速度が速くなるんです。

 

表示速度がおそいとせっかく記事を見ようと来てくれたユーザーが見るのをやめてしまいます。

 

一般的に、記事の表示に3秒かかったら40%の人が離脱するといわれています。

 

だから、画像を圧縮して表示速度を上げるのはとても大切なことなんです。

 

5MBを超えると…

基本的には「TinyPNG」を使えば画像圧縮はできるのですが、圧縮できないときがあります。

 

f:id:sawazonokota:20170222195411j:plain

 

それは、画像の容量が5MBを超えたときです。

 

5MBを超える画像を圧縮する場合は、有料版を使用しなければいけません。

 

5MBを超える画像なんてあるの?と思う人もいるかもしれませんが、容量の大きいスマホゲームのスクショ画像なんかは5MBを超えてしまいます。

 

しかし、そんな画像をそのまま挿入なんかしたりしたら容量がオーバーする可能性がありますし、表示速度も遅くなってしまいます。

 

こういうときは「ペイント」を使いましょう。

 

PNGからJPEGに変換

①ペイントを開いたら、圧縮したい画像を貼り付ける

f:id:sawazonokota:20170222193633j:plain

 

②ファイル→名前をつけて保存をクリック

f:id:sawazonokota:20170222193712j:plain

 

③ファイルの種類をJPEGにして保存をクリック

f:id:sawazonokota:20170222194306j:plain

 

これでOK

 

あとは、「TinyPNG」を使って圧縮すれば完成です。

 

f:id:sawazonokota:20170222195128j:plain

 

 まとめ

僕は最初画像の圧縮なんか知らなかったので、5MBを超えるような画像をバンバン貼っていました。

 

その結果、容量がオーバーしそうになってはてなブログproに移行しようかどうか本気で迷いました。(無料版は300MB/月、proは3GB/月)

 

みなさんはこんなことにならないように、画像の圧縮をしましょう。