ブログ

ブログに最適な画像サイズ・容量とは?【おすすめの圧縮方法】

ブログに最適な画像サイズ・容量とは?【おすすめの圧縮方法】

本記事では、ブログに最適な画像サイズ・容量と、おすすめの圧縮方法を解説しています。

ほとんどの人がブログ記事内に画像を掲載していると思いますが、画像を最適化しないで使うのはNGです。

というのも、重たい画像を使っていると表示速度が遅くなって読者が離脱しやすくなるだけでなく、SEOにも悪影響だからです。

つまり、ブログ画像を最適化することは、読者にとってもブロガーにとってもメリットのある作業です。

いちいち画像を圧縮・リサイズするのは大変ですが、やっておかないと後々大変な目に遭いますよ。

ブログに最適な画像サイズ・容量とは?

ブログに最適な画像サイズ・容量とは?

ブログの画像サイズには、2つの意味があります。

  1. 画像の大きさ
  2. 画像のファイルサイズ

とくに重要なのが「画像のファイルサイズ」で、サイズが大きくなるほど読み込みに時間がかかります。

つまり、画像のサイズを圧縮・リサイズして最適化することで、サイトスピードを改善できます。

画像サイズは横幅1,000px程度にする

画像の横幅は、1,000px程度を目安にしましょう。

というのも、各WordPressテーマやブログサービスにおいて、記事エリアの横幅が1,000pxを超えないからです。

たとえば、当ブログの記事エリアの横幅は「699px」となっています。

ブログに最適な画像サイズ・容量とは?

このように、WordPressテーマごとに最適な画像の横幅は違ってきます。

もし、記事エリアの横幅を超えた画像を使ったとしても、自動的に調整されるので問題ありませよ。

画像容量は200KB以下にする

画像の容量は200KB以下を目安に、できる限り軽くしましょう。

なぜなら、画像の容量が大きいと表示速度が遅くなり、SEOでマイナス評価を受けるからです。

ページのパフォーマンスが重要な理由
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には、
ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。
ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加する。

引用:ウェブに関する主な指標レポート

また、ページの読み込み速度が遅いと読者にストレスを与え、直帰率も大幅に上昇してしまいます。

つまり、画像の容量は軽ければ軽いほど良いというわけです。

最適な画像サイズを調べる

自分のブログに最適な画像サイズは、Google Chromeのデベロッパーツールで調べることができます。

Google Chromeを使用していない方は、まずダウンロードしてくださいね。

最適な画像サイズを確認する方法

調べたいブログの画面上で右クリックして、「検証」をクリックします。

ブログに最適な画像サイズを確認する方法

すると、画面右側にデベロッパーツールが表示されるので、カーソルマークをクリックします。

ブログに最適な画像サイズを確認する方法

そして、記事エリアにカーソルを合わせて青く表示されたら、クリックしてください。

ブログに最適な画像サイズを確認する方法

デベロッパーツールの中央付近にある「computed」をクリックします。

ブログに最適な画像サイズを確認する方法

青い枠で囲まれた数字を確認してください。

当ブログの場合は、「699.125×367.031」と表示されています。

この数字は、記事エリアの「横幅×縦幅」を表していて、各WordPressテーマごとに違うので確認しておきましょう。

ブログ画像のサイズを最適化すべき理由2つ

ブログ画像のサイズ・容量を最適化すべき理由3つ

ここでは、ブログ画像のサイズを最適化すべき理由を解説していきます。

①:ページの表示速度が上がるから

画像のサイズを最適化することで、ページの表示速度が上がります。

自分のサイトのページ表示速度が気になる方は、PageSpeed Insightsで計測してみてください。

ページの表示速度を計測する

ブログのURLを入力して「分析」をクリックすれば、「0~100」のスコアで評価してくれますよ。

ブログの表示速度
ブログの表示速度

ちなみに、僕のブログのスコアは、デスクトップ「99」の携帯電話「85」という結果でした。

デスクトップのパフォーマンスは問題ないのですが、携帯電話は改善する余地が残っていますよね。

ブログの表示速度

下にスクロールすると、改善できる項目も表示されているので、これを参考にスコア向上を目指してみてください。

ページの表示速度が上がって読者の離脱率が下がれば、SEOでのマイナス評価を避けることができますよ。

②:ユーザビリティーが向上するから

画像の大きさを最適化することで、読みやすい記事になります。

記事エリアに対して、画像が小さすぎたり大きすぎたりする記事は、読みづらくてストレスを感じますよね。

そして、ほとんどの読者はスマホで記事を読むため、最適化していない画像が掲載されているだけで離脱する可能性が高まります。

そのため、画像の大きさを調整することで、読者ファーストな記事に仕上げることができます。

常に読者のことを考えるよう意識しましょう。

ブログ画像を圧縮・リサイズして最適化する方法

ブログ画像を圧縮・リサイズして最適化する方法

つぎに、ブログ画像を圧縮・リサイズして最適化する方法を解説していきます。

  1. 画像をリサイズする
  2. 画像を圧縮する
  3. 画像を最適化する

①:画像をリサイズする

まず、画像のサイズが大きいものはリサイズしましょう。(※画像のサイズが小さい場合、この手順を飛ばしてもOKです。)

今回は、無料で使える「BULK Resize Photos」というWebサイトでリサイズしていきます。(Windowsなら「ペイント」、Macなら「プレビュー」でもリサイズできます。)

BULK Resize Photosの使い方

リサイズしたい画像をドラッグ&ドロップします。

BULK Resize Photosの使い方

幅を1200px(画像1200個)に選択して「開始」をクリックします。(横幅は自由に変更してください。)

BULK Resize Photosの使い方

完了しました」と表示されたら、リサイズの完了です。

②:画像を圧縮する

つぎに、画像の容量を圧縮しましょう。

こちらも無料で使える「Optimizilla」というWebサイトで、画像を圧縮していきます。

Optimizillaの使い方

画像をドラッグ&ドロップすると自動で圧縮がはじまります。

Optimizillaの使い方

圧縮が終わったら、ダウンロードをクリックして完了です。

③:画像を最適化する

EWWW Image Optimizer

さいごに、「EWWW Image Optimizer」というプラグインで、さらに画像を圧縮します。

EWWW Image Optimizer」とは、画像を劣化させずに圧縮できるプラグインで、WordPressにアップロードした画像を自動で圧縮してくれます。

また、すでにアップロードしてある画像も一括圧縮できるので非常に便利ですよ。

「EWWW Image Optimizer」の使い方は、下記記事を参考にしてください。

EWWW Image Optimizerの使い方・設定方法
EWWW Image Optimizerの使い方・設定方法【画像圧縮プラグイン】本記事では、プラグイン「EWWW Image Optimizer」の使い方・設定方法を画像付きでわかりやすく解説しています。この記事を読めば、ブログ初心者さんでも簡単にサイトの表示速度を改善できますよ。 ...

ブログ運営に役立つおすすめの素材サイト

ブログ運営に役立つおすすめの画像サイト

ブログに掲載する画像は、有料のものがおすすめです。

というのも、あなたの個性(オリジナリティ)を出したり、他のブログと差別化したりするのに役立つからです。

また、サイトのデザインが整っていると、それだけで読者に好印象を与えることができるので、離脱されにくい記事になります。

下記の記事では、ブログ運営におすすめのフリー素材サイトを紹介しているので、参考にしてみてください。

ブログに使えるおすすめのフリー画像素材サイト8選【商用利用OK】
ブログにおすすめのフリー画像素材サイト8選【商用利用OK】本記事では、ブログに使えるおすすめのフリー画像素材サイトを厳選して紹介しています。この記事を読めば、フリー素材を使うときの注意点やメリットがわかり、安心してブログに画像を使えますよ。 ...

まとめ:ブログに最適な画像サイズ・容量、圧縮方法について!

まとめ:ブログに最適な画像サイズ・容量、圧縮方法について!

今回は、ブログに最適な画像サイズ・容量とおすすめの圧縮方法をまとめました。

画像のサイズを最適化することで、表示スピードが改善してユーザビリティーが向上します。

記事数が増えれば扱う画像も必然的に増えるので、早い段階から画像を最適化しておきましょう。

その他、ブログ運営に役立つ記事を載せておきますね。

【2022年】アフィリエイト初心者におすすめのASP9選ブログを収益化していく上で、ASPへの登録は必須です。たくさんあるASPの中から、ブロガーみんなが使っている定番のASPをまとめました。この記事を読めば、ASPそれぞれの特徴がわかり、自分に合ったASPを見つけることができます。 ...
セルフバック(自己アフィリエイト)の仕組みとやり方
セルフバック(自己アフィリエイト)の仕組みとやり方|おすすめ案件4つ本記事では、セルフバック(自己アフィリエイト)の仕組みとやり方について詳しく解説しています。セルフバックを利用することで、ブログ初心者でもすぐにお金を稼ぐことができ、ブログのモチベーションUPにつながります。おすすめの案件もあわせて紹介しています。...
【初心者向け】ブログ運営に役立つおすすめ本12冊
【初心者向け】ブログ運営に役立つおすすめ本12冊本記事では、ブログ運営を2年ほどしてきて役にたった本を、実際に読んだ中から厳選して紹介しています。ブログ初心者さんは本を読みつつ、すぐにブログでアウトプットしていきましょう。1冊でもいいので、ぜひ読んでみてください。 ...
Rank Tracker(ランクトラッカー)の使い方
【最高】検索順位ツール「RankTracker」の料金と使い方を徹底解説本記事では、検索順位ツール「Rank Tracker」の導入から使い方までを画像付きでわかりやすく解説しています。ブログで稼いでいくには、検索順位ツールは必須です。詳しく知りたい方は、最後まで読んでみてください。...
ブログ記事の文章構成を作る7つの手順【初心者でも悩まず書ける】
ブログ記事の文章構成を作る7つの手順【初心者でも悩まず書ける】本記事では、ブログ記事の文章構成を作る7つの手順を解説しています。この記事を読めば、ブログ初心者でも悩まずにスラスラと記事を書けるようになります。文章構成は、読まれるブログ記事に必須です。...