ブログのスキル

ブログで使う理想の容量とサイズは?【圧縮手順は簡単3ステップ】

2021年1月13日

カメラの写真

悩む学生
ブログで画像を載せるときはできるだけ容量は小さい方がいいと聞きました。 実際のところどれくらいがいいんでしょうか?もしよかったら、容量を小さくする手順も詳しく知りたい。できれば無料がいいです。

 

今回はこんな悩みを解決します。

 

本記事の内容

  • ブログにおける画像の理想のサイズと容量
  • 画像を実際に圧縮する手順
  • ブログで画像を使うときに知っておきたいこと

初心者のころにやりがちなそのままの画像アップロード。
しかし、なんの処理もしてない画像だと容量が大きくなりブログの表示速度が下がるので、読者は離脱しやすくなります。

 

実はぼくもあまり意識できてませんでした。
リットン

 

そこで、今回はブログの画像についての理想のサイズや容量について紹介します。

 

この記事を見れば、ブログで使う画像についての悩みもなくなり、さらにGoogleから評価される記事になりますよ。

 

最後までぜひ見てくださいね。
リットン

ブログに使う画像の容量や大きさを最適化する理由

疑問を感じる女性

まず、なぜ画像の容量やサイズを調整する必要があるのか確認しましょう。

主な理由は以下のとおりです。

画像の容量やサイズを調整する必要性

  • サイトスピードを上げGoogleからより評価されやすくする
  • 記事を見やすくするため

順に確認します。

サイトスピードを上げGoogleからより評価されやすくする

画像の容量が大きいとブログの表示速度が遅くなります。

 

なぜ表示速度が遅いとダメなのか。

 

理由はシンプルで、Googleが明確に表示速度を評価の基準の1つにしているからです。

Google は、ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したいと考えています。

出典:Google について 

 

そして、表示速度に関してこのようなデータが上がっています。

  • 表示速度が1秒から3秒に増加すると直帰率は32%増加
  • 表示速度が1秒から5秒に増加すると直帰率は90%増加
  • 表示速度が1秒から6秒に増加すると直帰率は106%増加
  • 表示速度が1秒から10秒に増加すると直帰率は123%増加

出典:Think With Google

 

このように表示速度が遅いと、損しかしないので容量はできるだけ小さくすべきなのです。

記事を見やすくするため

画像の大きさの調整は記事の視認性に影響します。

 

横幅がバラバラだったり、画質が荒すぎるとそれだけで読者は不快に感じます。

 

自分のブログに合わせた適切なサイズにしないと、読者の離脱に繋がります。

ブログで使う画像の理想の容量とサイズ

ひらめいた女性

【容量は100KB以下横幅1200px付近

結論からいうと、タイトルのとおりで容量は100KBで横幅は1200pxがおすすめです。

 

こちらはGoogleのデータに基づいた値なので、適当に計算した値ではありません。

 

まず、100KBにする理由から確認しましょう。

 

Googleは1ページ当たりの合計容量を以下のように1600KB以下にするように推奨しています。

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.

出典:Avoid enormous network payloads (web.dev)

この値は画像のみの容量ではありません。文字情報などの容量を含みます。

 

仮にh2の下に画像を挿入すると、画像は5枚くらい必要ですね。そうなると、200KBだと画像だけで1MBなので少し苦しい印象。

 

そのため、100KBくらいがおすすめということです。

 

あとで紹介する圧縮方法なら100KBに抑えられるので安心してください!
リットン

 

画像の横幅を1200pxにする理由もGoogleに沿っています。

 

いわゆる「Google砲」を被弾する条件として、このように記載されています。

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。

出典:Google Discover とウェブサイト 

そのため、横幅は1200pxに調整するといいでしょう。

 

さらに深くいうと、1200×630pxの画像がもっともおすすめです。

 

理由はSNSなどでブログを宣伝する場合に、1.91:1だとアイキャッチが見切れずにきれいに表示されるからです。

 

ただし、結局は記事を書く方が大切なので、サイズの調整で時間を浪費しすぎないようにしてくださいね!
リットン

1200pxにしない人も自分のサイトのサイズに合わせましょう

また、1200pxもいらないという方は、少なくとも自分のブログのメインカラムの幅に合わせたサイズにしましょう。

 

メインカラムとは、ブログ記事が表示されるメインのエリアのことです。

 

メインカラムの幅の確認方法はこのとおり。

メインカラムの幅の確認手順

  1. GoogleChromeで自分のサイトにアクセス
  2. 画面上で右クリック→検証をクリック
  3. Computedをクリック
  4. 青色の部分を確認

このように表示されるはずです。

google chrome の検証画面

 

ぼくのブログなら717pxですね。
リットン

 

ここに表示される値よりは横幅を少し大きくすることで、無駄な余白はなくなります。

ブログで使う画像を圧縮する手順【すべて無料】

製造過程の図

では、実際にブログで画像を圧縮する方法を確認しましょう。

 

ちなみに使うプラグインは1つで、すべて無料なので安心してください!
リットン

 

この手順で画像を圧縮すれば間違いなしです。

画像圧縮の手順

  1. 好きな画像を選択
  2. Bulk Resize Photosでサイズを調整
  3. TinyPNGで圧縮
  4. EWWW Image Optimizerでさらに圧縮

1つずつ見ていきます。

 

少し宣伝というか、いつも画像選びに時間がかかるという人は、有料画像をおすすめします。こちらの記事を参考にしてみてください。
初心者こそブログで有料画像を使うべき理由5選【有益サイトも紹介】

 

Bulk Resize Photosdでサイズ調整

このツールをおすすめする理由はこちら。

Bulk Resize Photosdがおすすめな理由

  • 無料で使える
  • JPGやPNGの変換可能
  • めんどうな会員登録も不要で操作が簡単

このツールは何も登録しなくても無料で使える優れもの。
サイズ指定も簡単ですし、なによりファイルの指定ができるのが強みです。

 

ちなみにググればもっと詳しく出てきますが、結論からいうとPNGJPEGに関してはこのように違います。
この表に沿って使い分けてください。

JPEG、JPG PNG
デメリット
  • 保存するたびに画質劣化
  • 透過処理はできない
容量がおもくなりやすい
メリット容量を小さくできる
  • 画質が保存で劣化しない
  • 透過処理ができる
向いている画像写真系(天然で撮ったもの)  イラスト(人口で描かれたもの)

本題の使い方について紹介します。

まずはサイトBulk Resize Photos にアクセス。

bulk resize photo

 

リサイズしたい画像を選択。横にある画像幅をお好みに調整。開始をクリックして、完了したらダウンロード。

 

ちなみに、リサイズするだけでもだいぶ容量は落ちますよ。

 

とっても簡単ですね。

TinyPNGで圧縮

つぎにTinyPNGを紹介します。

 

こちらも完全無料のツールで、同じく会員登録なども不要
同時に20枚までできるので、ブロガーには十分すぎる機能がついてます。

 

使い方はさらに簡単。

tinypng

 

TinyPNGのサイトにアクセスして、さきほどリサイズした画像を選んでアップロードするだけ。
画像にもよりますが、数枚とかなら10秒くらいで終わります。

 

EWWW Image Optimizerでさらに圧縮

EWWW Image Optimizerはプラグインのことです。

 

ほとんどのブロガーさんが必須プラグインとして挙げているので導入しましょう。

 

このプラグインを入れて設定しておけば、この段階でとくにすることなしです。

 

WordPressに写真をアップロードすれば、過去にアップロードしたものも自動で圧縮してくれます。

 

これにて圧縮は完了です。

ブログで画像をのせるときに注意すること

パソコン警告画像

ブログで画像をのせるときに注意することを2つ挙げておきます。

ブログで画像を使うときの注意点

  • alt属性の設定
  • クレジット表記の確認

2つとも忘れてると損をするので、必ずチェックしましょう。

alt属性の設定

alt属性に関してはSEO的な観点で重要となります。

 

alt属性とは簡単にできるSEO内部対策の1つです。簡単にいうと、画像の説明を検索エンジンに向けて設定する作業になります。

 

ここでは、alt属性をつけるときのポイントだけまとめておきます。

alt属性の適切な付け方

  • 関係のない単語は入れない
  • 画像を表すキーワードを入れこむ
  • 無駄に長くしない

ひとまず上記のことは意識してください。

 

また、こちらに初心者でも簡単にできるSEO内部対策について書いてますので、参考にどうぞ。
【超簡単!!】初心者向けSEO内部対策を分かりやすく解説してみた

クレジット表記の確認

あなたの使う画像にクレジット表記が必要かきちんと確認できてますか。

クレジット表記とはこのような意味。

クレジットタイトル (credit title)、クレジット (credit) とは、映画テレビ番組、またはレコードCDゲームソフトにおいて、出演者(キャスト)、スタッフ、制作に関わった企業団体などの名前を表示するものである。

クレジットする」と動詞化した使い方も見受けられる。日本ではクレジットを表示しないことを「ノンクレジット」とも称する。

出典: Weblio辞書

簡単にいうと、その画像の所有権を持っている人の情報を画像近くに表示するということです。
よく求められるのが、作品名と著作社名と年です。

 

クレジット表記を無視して損害賠償を請求された例もあるので、不利益を被らないように必要ならきちんとクレジット表記をおこないましょう。

 

もし、クレジット表記が嫌なら有料画像サイトを導入すれば、悩みは基本的に解決できますよ。

サイトスピードの計測と意外な事実

データを分析する女性

1記事ごとにサイトスピードを確認する方法

画像の圧縮に成功できても、きちんとサイトスピードに反映されてるか心配な方も多いかと思います。

 

そこで、Google analysticsを用いた記事ごとのスピード確認方法を紹介します。

 

設定がまだの人は完了させてください。

google analsticsのスピードを分析

 

Google analysticsにアクセスして、行動サイトの速度速度についての提案と順にクリック。

 

右の方にPageSpeedスコアが出るので、こちらを確認してください。ここで極端に数値の低い記事を個別に修正すればOKです。

 

ページ速度の気にしすぎには注意しましょう

ここまで書いておいてなんですが、PageSpeed Insightsの値を気にしすぎるのはやめましょう。

 

根拠はシンプルで、上位表示されてる30記事ほど測ってみましたが、モバイル版で60点超えてるのは2記事しかなかったからです。

 

なかには月間検索ボリュームが1000以上のキーワードで40点なくても上位表示されてる記事がありました

 

7桁ブロガーさんです。許可も取ってないし、マイナスイメージに繋がりかねないので名前は伏せます。もしよかったら各自確認してみてください。
リットン

 

もちろん、

  • たまたまそういう記事を選んだ可能性がある
  • 画像が多い記事だと遅くなりやすい
  • 測定する時間帯で値が変わる

ということも事実です。

 

が、体感の表示速度とPageSpeed Insightsによる測定値には差があります。
結局のところ、
実際に検索してみて遅いと感じなければOKなのでしょう

 

この結果から、表示速度よりも読者の悩みが解決できてるかの方が評価基準としては大事そうですね!
リットン

 

先述した方法で記事ごとに修正するのはもちろんおすすめします。
しかし、やりすぎてもキリがないし沼にハマるだけで時間の浪費にしかなりません。

 

ある程度で見切りをつけて、新記事を書きましょう。

画像は圧縮してできるだけサイトスピードを上げよう

空を飛ぶ青年

今回は画像の理想の画像の容量やサイズについて紹介しました。

 

記事の内容をまとめます。

本記事のまとめ

  1. 画像の容量は1100kbを目安に横幅は1200px
  2. 画像の圧縮はBulk Resize Photos →TinyPNG→EWWW Image Optimizerでおこなう
  3. 個別のスピード確認はGoogleAnalysticsを用いる

 

でした。画像を圧縮して、サイトスピードを向上させましょう。

 

今回は以上です。ありがとうございました。

 

関連記事初心者こそブログで有料画像を使うべき理由5選【有益サイトも紹介】

関連記事freepik(フリーピック)の使い方は?【基本情報を徹底解説】

-ブログのスキル

Copyright © Lytton Blog