ブログに合った画像サイズがわからない…とお困りでしょうか？
本記事では、ブログに最適な画像サイズと、サイズにこだわるメリットについてご紹介します。
早速ですが、こちらの画像をご覧ください。
この画像のサイズは、400×225px、34KBです。
このように、画像サイズには『横幅×高さ』と『ファイルの大きさ』という2つの要素あります。
- 横幅×高さ
- ファイルの大きさ
人間で言うと、身長と、体重みたいな感じですね。
それでは、あなたのブログに最適な画像の『横幅×高さ』と『ファイルの大きさ』を見ていきましょう。
もくじ
ブログに最適な画像サイズは？
ブログに最適な画像サイズを、3つのポイントでご紹介します。
- 横幅は1000px前後を目安に
- 高さはアスペクト比率を参考に
- ファイルの大きさは200KB以下
ひとつずつ見ていきましょう。
横幅は1000px前後を目安に
ブログに使用する画像の横幅は、1000px前後が目安となります。
ほとんどの場合、記事幅が1000px以内だからです。
たとえば、当ブログの記事幅は728pxです。横幅670pxの画像を置くと、足りない分左右に余白が生まれます。
仮に幅1000pxの画像をここに置いても、記事幅に自動調節される為はみ出す心配はありません。
自サイトの記事幅を確認する手順をご紹介します。
まず確認したいページを開いた状態で、キーボードの、alt/option ＋ cmd ＋ i を同時に押します。
そうすると、画面下にデベロッパーツールが表示されます。
開いたデベロッパーツールの左上にあるアイコンをクリックします。
画面上でカーソルを動かすと、対象エリアの色が変わります。確認したい記事エリアにカーソルを合わせ、青くなった部分をクリックします。
続いてデベロッパーツール右上の【計算済み】をクリックすると、上記のような図が表示されます。
中央の青枠内に表示されている数字が、先ほどカーソルを合わせたエリアのサイズです。
当ブログの場合【728×531.375】と表示されているため、記事幅は728pxだとわかります。
高さはアスペクト比率を参考に
画像の横幅が決まれば、高さはアスペクト比率を参考にしてみてください。
アスペクト比率とは、よく使われる横：縦の比率です。
ブログのアイキャッチ画像を、3つ代表的なアスペクト比で試してみるとこんな感じです。
特にスマホで閲覧する場合、縦が長い画像だとそれだけで画面が占領されてしまい、スクロールが必要になりますよね。
アイキャッチ画像におすすめの比率は、1画面の中に画像と文字がバランスよく目に入る16：９です。
ちなみにYouTubeの標準比率も16:9が採用されていますよ。
ファイルの大きさは200KB以下
画像1点あたりのファイルの大きさは、200KB以下が目安です。
ファイルが大きすぎるとページ読み込み速度が遅くなり、SEOに悪影響が出る可能性があります。
ファイルの大きい画像を200KB以下にしたい場合は、必要に応じてサイズを縮小したり、圧縮したりして軽量化しましょう。
ブログ画像を圧縮する方法
画像を圧縮する方法を、3パターンご紹介します。
- プラグインで圧縮する方法
- webサイトで圧縮する方法
- スマホアプリで圧縮する方法
プラグインで圧縮｜EWWW Image Optimizer
WordPressブログの場合、画像圧縮プラグインが便利です。
EWWW Image Optimizerというプラグインをインストールしておくと、新規で追加する画像だけでなく、すでに投稿している過去の画像も一括して圧縮できますよ。
webサイトで圧縮｜TinyPNG
プラグインを導入したくない場合は、画像圧縮サイトを利用する方法があります。
画像圧縮サイトのTinyPNGは、圧縮したい画像をドロップするだけで簡単に画像圧縮ができます。
スマホアプリで圧縮｜画像圧縮
スマホでブログ画像を撮影したり作成したりする人は、スマホアプリを使った画像圧縮もおすすめです。
スマホアプリの『画像圧縮』を使うと、複数の画像を一括で圧縮できますよ。
ブログの画像サイズにこだわるべき理由
ブログの画像サイズを最適化すべき理由は以下です。
- ページ読み込み速度が上がる
- SEO対策になる
- 見た目に統一感が出せる
ブログの画像サイズを最適化しておけば、見た目が整う上、SEO対策にもなります。
画像が軽量化されていないとページの読み込み速度が遅くなり、Googleなど検索エンジンからの評価も失いかねません。
自サイトのページ速度がどれくらいか知りたい方は、pagespeed Insightsでチェックできます。
URLを入力すれば、以下3段階評価で速度パフォーマンスを測定してくれます。
- 90〜100…良い
- 50〜89…普通
- 0〜49…悪い
モバイルとデスクトップ両方の速度測定ができますので、ぜひチェックしてみてください。
まとめ：ブログの画像サイズを最適化しよう
ブログに最適な画像サイズについてご紹介しました。
- 画像サイズは『幅×高さ』と『ファイルの大きさ』
- 高さに迷ったらアスペクト比率を参考に
- 画像を最適化するとSEO対策にもなる
とはいえ、ブログを始めたばかりの頃は画像軽量化にこだわりすぎなくても大丈夫です。
画像は後からいくらでも変更できるため、まずは記事を完成させることに集中するのがおすすめですよ。
最後までご覧いただきありがとうございました！
