自分のブログに適したサイズで画像を挿入するべき理由

ブログ記事内に画像を挿入するとき、

ってなってませんか？

それ、大きな間違いを犯していますよ。

実は、「自分のブログに適した画像サイズ」というものがあるんですが、ご存じでしたか？

自分の使っているテーマによって的確な画像サイズは異なってくるので、まずは「自分のブログに適した画像サイズはいくつなのか？」を知っておく必要があります。

なので今回は、

上記2点について解説していきます。

自分のブログに適した画像サイズを調べる方法

テーマエディタの「style.css」で調べることもできますが、大量のコードの中から調べ当てるのは結構大変です。

そんなことしなくても、Google Chromeに標準搭載されているツールを使うことで簡単に調べることができます。

なので、Google Chromeをまだインストールしていないよって方は、これを期にインストールしておいてください。

さて、Chromeが使える前提でこっからは話を進めていきますね。

Chromeのツールを使って、自分のブログに適した画像サイズを調べる方法については以下の通りです。

それでは、詳しく見ていきましょう。

1.Google Chromeで自分のブログ記事を開く

今回使うのは、Google Chromeにあるデベロッパーツールです。

Web開発者のための検証ツールなので少し画面が難しいかもしれませんが、画像を挿入する記事幅を調べるだけなので難しいことはありません。

記事幅を調べるために、何でも良いので適当な記事を開けましょう。

2.開いた記事のページで、「F12」キーを押してデベロッパーツールを開く

記事を開いたら、F12キーを押してみてください。

すると、右側にいっぱいコードが書かれた画面が表示されるはずですが、これがデベロッパーツールです。

ちなみに、ブログの画面上で右クリック→「検証」を選択することでもツールは開けます。

3.「Computed」をクリックして、左上の矢印マークをクリックする

ごちゃごちゃしてて見づらいと思いますが、画像の赤枠①の部分に「Computed」という表記があるので、これをクリック。

続いて、左上にある矢印マーク（赤枠②）をクリック。

4.マウスポインターを記事の上に持っていき、記事幅を測定するためのエリアを選択する

マウスポインターを記事上に持っていくと、マウスを置いた位置に応じて背景の色が変わるはずです。

今やっているのが範囲選択なので、画像のとおりに全体が青色で選択される位置にマウスを置いてみてください。

この青色で選択された範囲が、記事幅（＝的確な画像サイズ幅）になります。

5.「Computed」に記事幅の測定結果が表示される

青色選択される位置でマウスを置いたら、そこでクリック。

すると、「Computed」のところに測定結果が表示されます。

四角い枠がいくつも表示されている中の一番小さい枠に、「○○×○○」と出ているはずです。

僕のブログ記事の場合、「728×7725.520」という測定結果が出ました。

この中の「728」という数値が、記事幅になります。ちなみに「7725.520」は縦幅なので今回は必要ありません。

測定した「728」という記事幅に合うように、画像サイズを調整して挿入すれば、それが最適な画像サイズとなります。

一連の流れは、大体こんな感じです。

自分のブログに適した画像サイズで画像を挿入するべき理由

記事に画像を挿入する上で記事幅を超えるサイズで画像を挿入するのは無駄です。僕の例でいくと728を超えるフルサイズで挿入するなんてもっての他となります。ファイルサイズはできる限り最小限に抑えたいからです。

ファイルサイズが大きくなると、必然的にその分データも重くなり、結果としてサイトの表示速度が低下してしまいます。

サイトの表示速度については、Googleの中の人も提唱しているとおり、SEOにおいて非常に重要となる要素です。

過去記事でも解説しています→「サイトの表示速度を改善させるために必要なこと」

要は、

自分のブログの記事幅に適した画像サイズで画像を挿入しない一番のデメリットは、ファイルサイズが無駄に大きくなることでその分ページの読み込みが遅くなり、結果としてサイトの表示速度が低下してしまう

これが重要なところです。

注意するべきこと

的確な画像サイズを調べていただきましたが、２つ注意することがあります。

それは、

この2点です。

記事幅は、テーマエディタの「style.css」で変えることが可能です。

しかし、記事幅を変更しても、一度記事に挿入した画像サイズは自動的に変更されないという点に注意が必要です。

もし「今の記事幅よりも小さく設定し直した」場合、画像サイズはそのままなので「記事幅に対して無駄にファイルサイズが大きい」ということになってしまいます。

画像サイズというのは大きくても「記事幅以下」が理想なため、もし記事幅をいじるのであれば画像サイズも調整するのが理想です。

あと、他テーマに乗り換える時も同様に注意が必要です。

記事幅は「WordPressテーマによってそれぞれ異なる」からです。

何度も言いますが、最適な画像サイズで挿入するメインの理由は「サイトの表示速度を損なわないため」です。

アイキャッチ画像のサイズも記事幅以上にしないこと

アイキャッチ画像を記事内でも表示させる設定にしている場合は、記事幅以上に画像サイズを大きくしないようにしましょう。

ブログで使う画像の横サイズは全て「設定してある記事幅以下」にするようにしましょう。

まとめ

ここまで読んでいただき、ありがとうございました。

長くなりましたが、今回はこれで以上です。

それでは。

チャオ(･∀･)!