本記事では、ブログに最適な画像サイズ・容量と、おすすめの圧縮方法を解説しています。
ほとんどの人がブログ記事内に画像を掲載していると思いますが、画像を最適化しないで使うのはNGです。
というのも、重たい画像を使っていると表示速度が遅くなって読者が離脱しやすくなるだけでなく、SEOにも悪影響だからです。
つまり、ブログ画像を最適化することは、読者にとってもブロガーにとってもメリットのある作業です。
いちいち画像を圧縮・リサイズするのは大変ですが、やっておかないと後々大変な目に遭いますよ。
ブログに最適な画像サイズ・容量とは?
![ブログに最適な画像サイズ・容量とは?](https://www.yasutaroublog.com/wp-content/uploads/2021/05/undraw_Reminder_ypgp-e1659101088415.png)
ブログの画像サイズには、2つの意味があります。
- 画像の大きさ
- 画像のファイルサイズ
とくに重要なのが「画像のファイルサイズ」で、サイズが大きくなるほど読み込みに時間がかかります。
つまり、画像のサイズを圧縮・リサイズして最適化することで、サイトスピードを改善できます。
画像サイズは横幅1,000px程度にする
画像の横幅は、1,000px程度を目安にしましょう。
というのも、各WordPressテーマやブログサービスにおいて、記事エリアの横幅が1,000pxを超えないからです。
たとえば、当ブログの記事エリアの横幅は「699px」となっています。
![ブログに最適な画像サイズ・容量とは?](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-02-01-11.35.56.jpg)
このように、WordPressテーマごとに最適な画像の横幅は違ってきます。
もし、記事エリアの横幅を超えた画像を使ったとしても、自動的に調整されるので問題ありませよ。
画像容量は200KB以下にする
画像の容量は200KB以下を目安に、できる限り軽くしましょう。
なぜなら、画像の容量が大きいと表示速度が遅くなり、SEOでマイナス評価を受けるからです。
ページのパフォーマンスが重要な理由
引用:ウェブに関する主な指標レポート
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には、
ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。
ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加する。
また、ページの読み込み速度が遅いと読者にストレスを与え、直帰率も大幅に上昇してしまいます。
つまり、画像の容量は軽ければ軽いほど良いというわけです。
最適な画像サイズを調べる
自分のブログに最適な画像サイズは、Google Chromeのデベロッパーツールで調べることができます。
Google Chromeを使用していない方は、まずダウンロードしてくださいね。
最適な画像サイズを確認する方法
調べたいブログの画面上で右クリックして、「検証」をクリックします。
![ブログに最適な画像サイズを確認する方法](https://www.yasutaroublog.com/wp-content/uploads/2021/05/-2021-05-15-20.47.50-e1621079637687-1024x512.jpg)
すると、画面右側にデベロッパーツールが表示されるので、カーソルマークをクリックします。
![ブログに最適な画像サイズを確認する方法](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-15-20.49.15-1024x395.jpg)
そして、記事エリアにカーソルを合わせて青く表示されたら、クリックしてください。
![ブログに最適な画像サイズを確認する方法](https://www.yasutaroublog.com/wp-content/uploads/2021/05/-2021-05-15-20.49.43-e1621079714987-1024x512.jpg)
デベロッパーツールの中央付近にある「computed」をクリックします。
![ブログに最適な画像サイズを確認する方法](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-15-20.51.00-1024x419.jpg)
青い枠で囲まれた数字を確認してください。
当ブログの場合は、「699.125×367.031」と表示されています。
この数字は、記事エリアの「横幅×縦幅」を表していて、各WordPressテーマごとに違うので確認しておきましょう。
ブログ画像のサイズを最適化すべき理由2つ
![ブログ画像のサイズ・容量を最適化すべき理由3つ](https://www.yasutaroublog.com/wp-content/uploads/2021/05/undraw_Clean_up_re_504g-e1659101402911.png)
ここでは、ブログ画像のサイズを最適化すべき理由を解説していきます。
①:ページの表示速度が上がるから
画像のサイズを最適化することで、ページの表示速度が上がります。
自分のサイトのページ表示速度が気になる方は、PageSpeed Insightsで計測してみてください。
![ページの表示速度を計測する](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-07-30-18.05.44.png)
ブログのURLを入力して「分析」をクリックすれば、「0~100」のスコアで評価してくれますよ。
![ブログの表示速度](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-07-30-18.09.18.jpg)
![ブログの表示速度](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-07-30-18.09.42.jpg)
ちなみに、僕のブログのスコアは、デスクトップ「99」の携帯電話「85」という結果でした。
デスクトップのパフォーマンスは問題ないのですが、携帯電話は改善する余地が残っていますよね。
![ブログの表示速度](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-07-30-18.20.06.png)
下にスクロールすると、改善できる項目も表示されているので、これを参考にスコア向上を目指してみてください。
ページの表示速度が上がって読者の離脱率が下がれば、SEOでのマイナス評価を避けることができますよ。
②:ユーザビリティーが向上するから
画像の大きさを最適化することで、読みやすい記事になります。
記事エリアに対して、画像が小さすぎたり大きすぎたりする記事は、読みづらくてストレスを感じますよね。
そして、ほとんどの読者はスマホで記事を読むため、最適化していない画像が掲載されているだけで離脱する可能性が高まります。
そのため、画像の大きさを調整することで、読者ファーストな記事に仕上げることができます。
常に読者のことを考えるよう意識しましょう。
ブログ画像を圧縮・リサイズして最適化する方法
![ブログ画像を圧縮・リサイズして最適化する方法](https://www.yasutaroublog.com/wp-content/uploads/2021/05/undraw_online_stats_0g94-e1659101156448.png)
つぎに、ブログ画像を圧縮・リサイズして最適化する方法を解説していきます。
- 画像をリサイズする
- 画像を圧縮する
- 画像を最適化する
①:画像をリサイズする
まず、画像のサイズが大きいものはリサイズしましょう。(※画像のサイズが小さい場合、この手順を飛ばしてもOKです。)
今回は、無料で使える「BULK Resize Photos」というWebサイトでリサイズしていきます。(Windowsなら「ペイント」、Macなら「プレビュー」でもリサイズできます。)
![BULK Resize Photosの使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-15-16.06.03-1024x340.jpg)
リサイズしたい画像をドラッグ&ドロップします。
![BULK Resize Photosの使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-15-16.09.35-1024x398.jpg)
幅を1200px(画像1200個)に選択して「開始」をクリックします。(横幅は自由に変更してください。)
![BULK Resize Photosの使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2021-05-15-16.14.13-1024x422.jpg)
「完了しました」と表示されたら、リサイズの完了です。
②:画像を圧縮する
つぎに、画像の容量を圧縮しましょう。
こちらも無料で使える「Optimizilla」というWebサイトで、画像を圧縮していきます。
![Optimizillaの使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-02-01-14.17.20.png)
画像をドラッグ&ドロップすると自動で圧縮がはじまります。
![Optimizillaの使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/05/スクリーンショット-2022-02-01-14.19.53.png)
圧縮が終わったら、ダウンロードをクリックして完了です。
③:画像を最適化する
![EWWW Image Optimizer](https://www.yasutaroublog.com/wp-content/uploads/2020/11/スクリーンショット-2022-01-08-17.21.51.png)
さいごに、「EWWW Image Optimizer」というプラグインで、さらに画像を圧縮します。
「EWWW Image Optimizer」とは、画像を劣化させずに圧縮できるプラグインで、WordPressにアップロードした画像を自動で圧縮してくれます。
また、すでにアップロードしてある画像も一括圧縮できるので非常に便利ですよ。
「EWWW Image Optimizer」の使い方は、下記記事を参考にしてください。
![【2022年】EWWW Image Optimizerの設定方法・使い方](https://www.yasutaroublog.com/wp-content/uploads/2021/08/EWWW-Image-Optimizer-320x180.jpg)
ブログ運営に役立つおすすめの素材サイト
![ブログ運営に役立つおすすめの画像サイト](https://www.yasutaroublog.com/wp-content/uploads/2021/05/undraw_Editable_re_4l94-1-e1659101342269.png)
ブログに掲載する画像は、有料のものがおすすめです。
というのも、あなたの個性(オリジナリティ)を出したり、他のブログと差別化したりするのに役立つからです。
また、サイトのデザインが整っていると、それだけで読者に好印象を与えることができるので、離脱されにくい記事になります。
下記の記事では、ブログ運営におすすめのフリー素材サイトを紹介しているので、参考にしてみてください。
![ブログで使えるおすすめのフリー素材・画像サイト11選【商用利用OK】](https://www.yasutaroublog.com/wp-content/uploads/2021/06/vecteezy_seo-search-engine-optimization-with-graph-and-chart-analysis_-e1647333742296-320x180.jpg)
まとめ:ブログに最適な画像サイズ・容量、圧縮方法について!
![まとめ:ブログに最適な画像サイズ・容量、圧縮方法について!](https://www.yasutaroublog.com/wp-content/uploads/2021/05/undraw_Investor_update_re_qnuu-e1659101223608.png)
今回は、ブログに最適な画像サイズ・容量とおすすめの圧縮方法をまとめました。
画像のサイズを最適化することで、表示スピードが改善してユーザビリティーが向上します。
記事数が増えれば扱う画像も必然的に増えるので、早い段階から画像を最適化しておきましょう。
その他、ブログ運営に役立つ記事を載せておきますね。
![【2023年】初心者におすすめの定番アフィリエイトASP11選](https://www.yasutaroublog.com/wp-content/uploads/2020/12/shutterstock_1591770547のコピー-e1640226975239-320x180.jpg)
![セルフバック(自己アフィリエイト)の仕組みとやり方を徹底解説](https://www.yasutaroublog.com/wp-content/uploads/2021/06/selfback-e1644152156951-320x180.jpg)
![【2023年】ブログ運営に役立つおすすめの本13選【初心者向け】](https://www.yasutaroublog.com/wp-content/uploads/2021/02/29_generated-1-320x180.jpg)
![【2023年】Rank Trackerのおすすめ料金プラン・使い方を徹底解説](https://www.yasutaroublog.com/wp-content/uploads/2021/09/rank-tracker-320x180.png)
![ブログ記事の文章構成を作る7つの手順【初心者でも悩まず書ける】](https://www.yasutaroublog.com/wp-content/uploads/2022/01/78_generated-320x180.jpg)