ブログ運営

【ピクセル編】ブログに最適な画像サイズとは?画像サイズを小さくする方法を解説

「ブログで最適な画像サイズはなに?」

「最適な画像サイズに圧縮する方法を知りたい」

悩んでいる人

このようなお悩み解決します。

この記事で分かること

  • そもそも画像サイズ(ピクセル数)とは
  • 画像サイズを小さくすべき理由
  • おすすめの画像サイズ
  • 画像サイズを小さくする方法

よく画像サイズを小さくした方がサイトの表示速度が速くなってSEOにいいと聞きますが、実際どの画像サイズがいいのか分かりませんよね。

本記事では「おすすめの画像サイズと画像サイズを小さくする方法」をGoogleの意見を含め解説していきます。

この記事を読むと画像サイズで迷うことはないですよ。

\当サイト使用テーマ/

AFFINGER5

AFFINGER5を詳しく見る

そもそも画像サイズ(ピクセル数)とは

そもそも画像サイズ(ピクセル数)とは

画像は小さな点の集まりでできており、その点の数を表したのが画像サイズです。

その小さな点1つを1ピクセル(単位:px)といいます。

上の画像サイズは1200px×675pxであり、横に1,200個、縦に675個、合計810,000個の小さな点でできています。

50×28pxの画像
150×84pxの画像

上の画像を見ると画像サイズの数字が小さくなるとモザイクのような画質の荒い画像だとわかりますよね

逆に数字が大きくなると画質が良くなります

画質が良くなるのはいいことですが、画像のデータ量が大きくなるデメリットもあるのです。

ブログで画像サイズを小さくすべき2つの理由

ブログで画像サイズを小さくすべき理由は以下の2点です。

  • 画像のデータ量が小さくなる
  • サイトの読み込み速度がアップする

さらに深掘りしていきます。

画像のデータ量が小さくなる

画像サイズを小さくすると画像のデータ量も比例して小さくなります。

画像は小さな点の集まりでできていると解説しました。

その小さな点の「横が○番目、縦が○番目は○色」という情報が減るため画像のデータ量が減ります。

サイトの読み込み速度がアップする

画像サイズを小さくするとサイトの表示速度が速くなります。

なぜなら画像サイズを小さくすることで画像のデータ量が減り、画像の読み込みが楽になるからです。

サイトの表示速度はSEOで重要な点なので画像サイズを小さくしましょう。

画像を小さくするとサイトの表示速度が上がる

PageSpeed InsightにブログのURLを入力すると、サイトの表示速度が調べれます。

実際に画像サイズを小さくするとスコアが46から59にアップしました。

*個人差はあります。

ブログでおすすめの画像サイズ

ブログでおすすめの画像サイズ

画像サイズは100%の正解はないですが、ベストな画像サイズがあります。

おすすめの画像サイズは以下の2つです

  • Google推奨は横1200px or 696px以上
  • ブログの見出しの幅に合わせる

それぞれ深掘りして解説します。

Google推奨は横1200px or 696px以上

Googleは「Google 検索セントラル」で以下のように明言しています。

  • AMPページ:画像の幅は 1,200 ピクセル以上にする必要があります。
  • 非AMPページ:画像の幅は 696 ピクセル以上にする必要があります。

引用元:Google 検索セントラル:Article オブジェクト

AMPページとはブログでデザインなどが制限される代わりに、サイトの速度が速くなることです。

詳しくはググってみてください。

迷ったら画像の横幅は696px以上1200px以下にしましょう。

ブログの見出しの幅に合わせる

個人的におすすめの画像サイズは、ブログの見出しの横幅に合わせることです。

僕は記事で表示される画像は横幅690pxなので、キリがいい700pxで画像を合わせています。

ブログの見出しの横幅を調べる方法は次で解説します。

ブログの見出し幅を調べる方法


  • 手順1

     

    Google Chromeで自分の記事のページを開きます

    次に右クリックし「検証」を選択


  • 手順2

    右上らへんの赤丸をクリック


  • 手順3

    カーソルを見出しに合わせると「h2 〇〇 × △△」と表示されます。

    その〇〇の数字をで画像の幅を合わせます。


画像サイズを小さくする4つの方法

画像サイズを小さくする4つの方法

画像サイズを小さくするにはリサイズでピクセル数を変更します。

例えば画像サイズを2400×1350pxから1200×675pxに変更する感じです。

今回はリサイズする方法を以下の4つご紹介します。

  • WordPressでリサイズする方法(手動)
  • WordPressでリサイズする方法(プラグイン)
  • Macでリサイズする方法
  • Windowsでリサイズする方法

*読みたいところをタップ!

WordPressでリサイズする方法(手動)


  • ステップ1

    WordPressのメディアから画像を選択し「画像を編集」をクリック


  • ステップ2

    赤枠に好みの画像サイズ(ピクセル数)を入力し「縮尺変更」で完了


WordPressでリサイズする方法(プラグイン)


  • ステップ1

    「imsanity」というプラグインをインストールし有効化します。


  • ステップ2

    設定から「Imsanity」を選択


  • ステップ3

    赤枠に好みの画像サイズ(ピクセル数)を入力し「変更を保存」で完了。

    これで自動的にリサイズが行われます。


Macでリサイズする方法


  • ステップ1

    画像を「プレビュー」で開き上のバーの「ツール」から「サイズを変更」を選択


  • ステップ2

    赤枠に好みの画像サイズ(ピクセル数)を入力して「OK」で完了


さらに画像のデータ量を小さくする方法

TinyPNG

画像サイズ(ピクセル数)を小さくすると画像のデータ量が小さくなると解説しました。

ですが、画像サイズを小さくせずに画像のデータ量を小さくする方法もあるのです。

詳しくは「画像サイズ(データ量)を圧縮する方法」で解説しています。

少しネタバレすると「TinyPNG」を使うと画像サイズを小さくしなくてもデータ量を減らせます。

個人的には画像サイズ(ピクセル数)を小さくしつつ「Tiny PNG」で画像サイズ(データ量)を圧縮するのがオススメです。

【まとめ】ブログでおすすめの画像サイズ&画像サイズを小さくする方法

要約(summary)

今回は画像サイズ(ピクセル編)を小さくする方法をご紹介してきました。

画像はデータ量が大きいので画像サイズを小さくしてあげる必要があります。

画像サイズを小さくするとサイトの表示速度が改善されSEO的にもいいです。

オススメの画像サイズ(ピクセル数)は以下の通りです。

  • Google推奨:696px or 1200px以上
  • オススメの画像サイズ:見出しの幅に合わせる

画像サイズ(ピクセル数)を小さくする方法はリサイズでできます。

簡単に画像サイズを小さくできるので是非実践してみてください。

-ブログ運営

© 2021 taitaiblog