ブログに貼る画像のデータ量を削減して、記事の読み込み時間を短縮しよう!

ブログで記事内容の説明や、記事そのものを華やかに彩るために画像や写真を使う人も多いでしょう。
しかしその画像が原因で、読者が離れてしまっていませんか?
画像のデータ量を削減しないと、記事の読み込み時間が増える原因になります。
そんなことを無くすために、画像データ量を減らす方法を紹介します。




画像のデータ量を削減する意味

画像のデータ量を減らすと直接得られる効果が2つあります。
それが「記事の読み込み時間短縮」と「記録データの削減」です。

記事の読み込み時間を短縮する

画像のデータ量を削減すると、読者が記事を読み込んだときにかかる時間を短縮できます。

ブログで自分が書いた記事を読んでもらうには記事内容の質が重要ですが、そもそも記事そのものを読んでくれないと始まりません。

記事の読み込み時間が長くなると、記事が読み込まれる前に「戻る」などで読者が離脱してしまいます。
誰だって待たされるのはイヤですよね?

ブログも同じで記事を読む前の待機時間が長くなるほど、「この記事読むのやーめた」と読者の読む気がなくなってしまう可能性が高くなります。

サーバーの記録領域の圧迫を軽減

ブログをつくるのに必要不可欠な「サーバー」。
画像のデータ量削減などの下処理をすれば、サーバーの記録領域を圧迫しないようにできます。

カメラなどで写真を撮ると、解像度などにもよりますが2MB3MBといったデータ量になるのも珍しくありません。
旅行などの観光記録をブログにしているなら、1記事にも何枚も写真をアップしたりことも多いでしょう。
仮に1記事に10枚写真を使うと、画像データ量だけで20MB、100記事も書けば2GBとなります。

使っているサーバーのスペックにもよりますが、スタンダートプランだと50GBくらいのサーバーもあります。
サーバーはブログを構成するあらゆるデータを記録している場所なので、画像データだけでもかなりの領域を圧迫していることになります。

しかも記事を書けば書くほど、ネズミ算式に際限なくデータ量が増えていきます。
こんな調子では簡単にサーバーがパンクしてしまいます。

別のプランでサーバーをレンタルし直さない限り、サーバーのデータ容量は増えません。
サーバーをパンクさせないためにも、削れるデータは削っていくのが最善です。

推奨される画像データとは?

ではいったいどんな画像ならブログに使えるのか?
そのあたりを解説します。

画像1枚の推奨データ量

使えるデータ量は画像1枚100KB以下、もっと少ない方がいいとの声もありますが、多くてもこれくらいが推奨される画像のデータ量になります。

もちろん記事にたくさん画像を使いたい人ならもっと少ないデータ量にした方がいいですし、逆に1枚くらいしか使わないならもう少し増えてもいいでしょう。

ちなみにテキスト2000文字くらいのデータ量が50KB程です。
逆算して100KBの画像一枚で4000文字と同じデータ量になります。

2000文字の記事に100KBの画像を1枚使うだけでも、記事の総データ量の60%が画像データで占められていることになります。
推奨されるデータ量の画像でも、これだけの容量を取っていることがわかるでしょう。

画像の推奨サイズ

画像のサイズ(幅×高さ)は、最大でも幅(x軸)が640px前後の大きさにしましょう。
使っているブログのテーマにもよりますが、記事を載せるスペース以上の幅の画像を使うのは推奨されません

このブログのデザインの場合、記事の文章が表示されるスペースの幅はパソコンだと650pxほどです。
サイドバーを使っていないブログなら、800px~900pxぐらいにはなります。
記事スペース以上の幅の画像を使っても、強制的に幅を合わせた(小さくした)画像が使われてしまいます。
このとき画像のデータ量は変わっていません

データ量が同じなのに画像のサイズが小さくなってしまう分、データのムダが発生しています。
使う画像サイズを調節して、データ量を減らしましょう。

画像編集ソフトでデータを削減

ではいよいよ画像のデータ量を減らす方法ですが、画像編集ソフトを使うのが一番になります。

私は無料画像編集ソフト「JTrim」というソフトを愛用しています。
もし画像編集ソフトが無いのなら、このソフトを使ってみてください。

大抵の画像編集ソフトにはついている機能ですが、とりあえずここでは「JTrim」を使った画像データ削減を一例として載せていきます。

画像の「リサイズ」

画像のリサイズとは、画像の比率を保ったままサイズ(幅×高さ)を小さくする方法です。

元の画像が「3200×2400」みたいな馬鹿でかいサイズでは、そのままブログに載せるなんてできません。
おそらく2MB~3MBくらいのデータ量もあるでしょう。

ブログに載せれるサイズにするために、「リサイズ」で画像サイズを調節しましょう。
これだけでも2MBの画像データを数百KBに減らすことができます。

「JTrim」では画面上の「イメージ」から「リサイズ」でできます。
画像を自分が指定したサイズにする「サイズで指定する」と、比率を指定してリサイズする「比率で指定する」があります。
「サイズで指定する」なら指定したサイズの比率に自動的に合わせてくれるので、自分のブログの記事スペースの幅が分かっているならこのほうが楽です。

画像の切り抜き

画像全体からブログに載せたい部分のみを切り抜く方法です。
切り取る部分が多いほどデータ量の削減になります。

画像や写真の細かい部分を強調して載せたいときにも使えるので、「いらない部分はカット」の癖をつけておきましょう。

「JTrim」では左上にある黄色い枠で囲ったのが切り抜き機能です。
やり方は2つあり、あらかじめカーソルで範囲を選択しておいてボタンを押してカットする方法と、範囲選択せずボタンを押し座標を指定してカットする方法です。(座標選択画面を出してからカーソルで範囲選択もできます)

画像の品質の調整

画像の色彩などを落としてデータ量を削減します。
これだけでもかなりの量のデータを削減できます。

「JTrim」では画像の品質を「パーセント」か「データ量」で決められます。
画面を出す方法は「ファイル」の「保存オプション」です。
「パーセント」は品質を指定した比率で保ち、「データ量」は指定したデータ量の品質にします。
「データ量」だと画像ごとに設定しないといけないので、もっぱら「パーセント」のほうを使ってます。

画像を画質100%と画質50%の設定で保存してみるとデータ量に1/6くらいの差が出ます。
元の画像の画素数や色彩が濃いほど削減できるデータ量も多くなります。

特に画像の色合いにこだわらないなら、積極的に使っていきたい方法です。

ただ注意したいのが、色のメリハリがついた画像だと色が滲みやすくなることです。
特に文章が書かれている画像だと影響が出ます。

品質100%

品質30%

少しわかりづらいので拡大します。

かなり文字や画像が大きいのならあまり目立ちませんが、品質を下げるとこんな感じで色が滲んだようになります。
品質を下げた画像はしっかりと目で見て、ブログに使ってもいいか確認しましょう。

ついでに保存オプションの下のほうにある「Exitデータを保持する」のチェックを外して、画像の内部データを消しておきましょう。
これで少しはデータ量の削減もできますし、個人情報の流出の危険性も無くせます。

実際にデータ量を減らした画像

これが実際に画像編集ソフト「JTrim」で画像データを削減した画像になります。
編集する前と後の違いはこうなります。

編集前編集後
画像サイズ3072 × 2304640 × 480
画像データ量1.82 MB50.4 KB
品質100 %50 %

元の画像データ量が1.82MBなのに対して編集後は50.4KB実に1/40近く削減できています。
元の画像に比べ少々画質が荒れている部分もありますが、充分ブログに載せれるくらいの品質だと思ってます。

最後に

これで画像データ量の削減の仕方の紹介を終わります。
写真をそのままブログに載せると、サーバーの記録容量や記事の読み込み時間に悪影響が出ます。
ブログに写真や画像を載せる前に、画像データの下処理をしてデータ量を減らしましょう!