ブログ

ブログに最適な画像容量・サイズと圧縮方法をわかりやすく解説

ブログに最適な画像容量・サイズと圧縮方法をわかりやすく解説

疑問

ブログに使う画像の最適な容量・サイズを知りたい。画像を圧縮する方法もあわせて教えてほしい。

こんな疑問に答えます。

ブログの画像容量・サイズを軽量化するのは、読者にとってもブロガーにとってもメリットのあることです。

なぜなら、表示スピードが上がり読者の負担が減って、その結果SEOでも評価されるからです。

画像を何もせずWordPressにアップすると、ブログの表示速度が遅くなるので注意しましょう。

本記事では、ブログに最適な画像容量・サイズと、圧縮方法についてわかりやすく解説します。

この記事を読めば、画像を最適化して読者に優しいブログ運営ができますよ。

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

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

さいしょに、ブログに最適な画像容量とサイズについて解説します。

画像サイズの目安は横幅1,000px以下

ブログに使う画像の横幅は1,000px以下を目安にしましょう。

なぜなら、ほとんどのブログの記事エリアは、横幅600〜900pxほどで収まるからです。

たとえば、当ブログ(WordPressテーマ:JIN)の横幅は699pxとなっています。

画像サイズ

上記のように、記事エリアの横幅が最適な画像サイズとなります。

もし、画像の横幅がオーバーしてしまっても、自動で調整されるので問題ありませんが、見切れる可能性はあります。

また、使っているブログテーマによって、最適な画像サイズは異なるので注意してください。

画像容量の目安は100~200KB以下

画像容量は、100〜200KB以下を目安にしましょう。

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

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

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

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

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

※ちなみに、サイトスピードはPageSpeed Insightsというツールで確認できますよ。

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

つぎに、自分のブログに最適な画像サイズを確認する方法を解説します。

Google Chromeを使用するため、あらかじめダウンロードしておいてください。

まず、確認したいサイトの画面上で右クリックして、「検証」をクリックしてください。

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

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

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

記事本文にカーソルを合わせて青く表示されたら、クリックします。

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

ツール中央付近の「computed」をクリックしてください。

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

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

当ブログ(WordPressテーマ:JIN)の場合は、「699.125×367.031」です。この数字はブログの記事エリアの「横幅×縦幅」を示しています。

当ブログの場合、横幅699px以上の画像を使えば、記事の幅より小さく表示されることはありません。

上記の方法で、WordPressテーマ毎のサイズを確認することができます。

ブログ画像を圧縮する方法|3ステップ

つぎに、ブログ画像を圧縮する方法を解説します。

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

ひとつずつ見ていきます。

ステップ①:大きい画像はリサイズする

まず、画像サイズが大きいものはリサイズしましょう。

リサイズとは画像の大きさを変更することで、Windowsなら「ペイント」、Macなら「プレビュー」で変更できますよ。

はじめから画像サイズが小さい場合は、この手順を飛ばしてもOKです。

今回は、無料で使える「BULK Resize Photos」というWebサイトでリサイズしていきます。

BULK Resize Photosの使い方

ドラッグ&ドロップして画像を選択します。

BULK Resize Photosの使い方

幅を1200px(画像1200個)に選択して「開始」をクリックします。

他にも、「パーセンテージ」「画像の寸法」などを選ぶことができます。

BULK Resize Photosの使い方

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

画像がダウンロードされファイルサイズが小さくなっています。

ステップ②:画像を圧縮する

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

Optimizillaの使い方

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

Optimizillaの使い方

圧縮が終わったら、ダウンロードをクリックしましょう。

ステップ③:画像を最適化する

EWWW Image Optimizer

EWWW Image Optimizerとは、画像を劣化させることなく圧縮してくれるプラグインです。

このプラグインをインストールしておけば、新しくアップロードする画像は自動で圧縮されます。

また、すでにアップロードしている画像も一括で圧縮してくれるので便利です。

WordPressの管理画面から「設定 → EWWW Image Optimizer」をクリックします。

EWWW Image Optimizerの設定

画像のリサイズで「幅の上限・高さの上限」を設定できますよ。

すでにアップロードした画像を一括圧縮したいときは、WordPressの管理画面から「メディア→一括最適化」をクリックします。

EWWW Image Optimizerの設定

最適化されていない画像をスキャンする」をクリックすると、画像圧縮が始まりますよ。

EWWW Image Optimizerについては、EWWW Image Optimizerの使い方・設定方法【画像圧縮プラグイン】をどうぞ。

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

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

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

記事数が増えれば、画像も増えるので、できるだけ画像サイズは軽くしておきましょう。

あとで直すのはかなり大変なので、めんどくさいと思いますがやってみてください。

画像を最適化できたら、高品質な記事を書くだけです。

おわり

ブログ記事の文章構成を作る7つの手順【初心者でも悩まず書ける】
ブログ記事の文章構成を作る7つの手順【初心者でも悩まず書ける】本記事では、ブログ記事の文章構成を作る7つの手順を解説しています。この記事を読めば、ブログ初心者でも悩まずにスラスラと記事を書けるようになります。文章構成は、読まれるブログ記事に必須です。...