「ブログで最適な画像サイズはなに？」
「最適な画像サイズに圧縮する方法を知りたい」
このようなお悩み解決します。
この記事で分かること
- そもそも画像サイズ（ピクセル数）とは
- 画像サイズを小さくすべき理由
- おすすめの画像サイズ
- 画像サイズを小さくする方法
よく画像サイズを小さくした方がサイトの表示速度が速くなってSEOにいいと聞きますが、実際どの画像サイズがいいのか分かりませんよね。
本記事では「おすすめの画像サイズと画像サイズを小さくする方法」をGoogleの意見を含め解説していきます。
この記事を読むと画像サイズで迷うことはないですよ。
そもそも画像サイズ（ピクセル数）とは
画像は小さな点の集まりでできており、その点の数を表したのが画像サイズです。
その小さな点１つを１ピクセル（単位：px）といいます。
上の画像サイズは1200px×675pxであり、横に1,200個、縦に675個、合計810,000個の小さな点でできています。
上の画像を見ると画像サイズの数字が小さくなるとモザイクのような画質の荒い画像だとわかりますよね
逆に数字が大きくなると画質が良くなります
画質が良くなるのはいいことですが、画像のデータ量が大きくなるデメリットもあるのです。
ブログで画像サイズを小さくすべき２つの理由
ブログで画像サイズを小さくすべき理由は以下の２点です。
- 画像のデータ量が小さくなる
- サイトの読み込み速度がアップする
さらに深掘りしていきます。
画像のデータ量が小さくなる
画像サイズを小さくすると画像のデータ量も比例して小さくなります。
画像は小さな点の集まりでできていると解説しました。
その小さな点の「横が○番目、縦が○番目は○色」という情報が減るため画像のデータ量が減ります。
サイトの読み込み速度がアップする
画像サイズを小さくするとサイトの表示速度が速くなります。
なぜなら画像サイズを小さくすることで画像のデータ量が減り、画像の読み込みが楽になるからです。
サイトの表示速度はSEOで重要な点なので画像サイズを小さくしましょう。
PageSpeed InsightにブログのURLを入力すると、サイトの表示速度が調べれます。
実際に画像サイズを小さくするとスコアが46から59にアップしました。
＊個人差はあります。
ブログでおすすめの画像サイズ
画像サイズは100%の正解はないですが、ベストな画像サイズがあります。
おすすめの画像サイズは以下の2つです
- Google推奨は横1200px or 696px以上
- ブログの見出しの幅に合わせる
それぞれ深掘りして解説します。
Google推奨は横1200px or 696px以上
Googleは「Google 検索セントラル」で以下のように明言しています。
- AMPページ：画像の幅は 1,200 ピクセル以上にする必要があります。
- 非AMPページ：画像の幅は 696 ピクセル以上にする必要があります。
AMPページとはブログでデザインなどが制限される代わりに、サイトの速度が速くなることです。
詳しくはググってみてください。
迷ったら画像の横幅は696px以上1200px以下にしましょう。
ブログの見出しの幅に合わせる
個人的におすすめの画像サイズは、ブログの見出しの横幅に合わせることです。
僕は記事で表示される画像は横幅690pxなので、キリがいい700pxで画像を合わせています。
ブログの見出しの横幅を調べる方法は次で解説します。
ブログの見出し幅を調べる方法
手順１
Google Chromeで自分の記事のページを開きます
次に右クリックし「検証」を選択
手順２
右上らへんの赤丸をクリック
手順３
カーソルを見出しに合わせると「h2 〇〇 × △△」と表示されます。
その〇〇の数字をで画像の幅を合わせます。
画像サイズを小さくする４つの方法
画像サイズを小さくするにはリサイズでピクセル数を変更します。
例えば画像サイズを2400×1350pxから1200×675pxに変更する感じです。
今回はリサイズする方法を以下の４つご紹介します。
- WordPressでリサイズする方法（手動）
- WordPressでリサイズする方法（プラグイン）
- Macでリサイズする方法
- Windowsでリサイズする方法
＊読みたいところをタップ！
WordPressでリサイズする方法（手動）
ステップ１
WordPressのメディアから画像を選択し「画像を編集」をクリック
ステップ２
赤枠に好みの画像サイズ（ピクセル数）を入力し「縮尺変更」で完了
WordPressでリサイズする方法（プラグイン）
ステップ１
「imsanity」というプラグインをインストールし有効化します。
ステップ２
設定から「Imsanity」を選択
ステップ３
赤枠に好みの画像サイズ（ピクセル数）を入力し「変更を保存」で完了。
これで自動的にリサイズが行われます。
Macでリサイズする方法
ステップ１
画像を「プレビュー」で開き上のバーの「ツール」から「サイズを変更」を選択
ステップ２
赤枠に好みの画像サイズ（ピクセル数）を入力して「OK」で完了
さらに画像のデータ量を小さくする方法
画像サイズ（ピクセル数）を小さくすると画像のデータ量が小さくなると解説しました。
ですが、画像サイズを小さくせずに画像のデータ量を小さくする方法もあるのです。
詳しくは「画像サイズ（データ量）を圧縮する方法」で解説しています。
少しネタバレすると「TinyPNG」を使うと画像サイズを小さくしなくてもデータ量を減らせます。
個人的には画像サイズ（ピクセル数）を小さくしつつ「Tiny PNG」で画像サイズ（データ量）を圧縮するのがオススメです。
【まとめ】ブログでおすすめの画像サイズ＆画像サイズを小さくする方法
今回は画像サイズ（ピクセル編）を小さくする方法をご紹介してきました。
画像はデータ量が大きいので画像サイズを小さくしてあげる必要があります。
画像サイズを小さくするとサイトの表示速度が改善されSEO的にもいいです。
オススメの画像サイズ（ピクセル数）は以下の通りです。
- Google推奨：696px or 1200px以上
- オススメの画像サイズ：見出しの幅に合わせる
画像サイズ（ピクセル数）を小さくする方法はリサイズでできます。
簡単に画像サイズを小さくできるので是非実践してみてください。