画像編集

WordPressブログでおすすめな、画像サイズ(ピクセル数)ってどのくらい?【リサイズの基準】

WordPressブログにおすすめな画像サイズ アイキャッチ



あずきです🐥

WordPressブログにおける…

画像サイズのおすすめなpx(ピクセル数)

について、ブログ初心者さん向けに1から解説していきます

具体的には、ブログに貼る画像の…

  • Width(横幅)のサイズ

です

まず、ブログ画像における「Width(横幅)」の上限というのは、基本的に統一させておくのがおすすめ

理由としては…

  • 画像サイズが大きいと容量も重たくなるので、サイトスピード(ページ表示の速さ)に悪影響がある
  • 画像サイズを統一せずにテキストや図形を描き加えると、サイズ比率が画像によってバラバラになる

こういった点が挙げられます

ということで、今回のポイントは4つです

  • ブログにおすすめな画像サイズの目安
  • 理想の画像サイズを決める際のポイント
  • メインカラム(記事エリア)の横幅の調べ方
  • 画像サイズを変更(リサイズ)する方法について

さっそく見ていきましょー🐥

▼ 画像サイズの変更(リサイズ)についてはこちら ▼

ブログ用の画像編集 まず押さえておきたい「リサイズ」とは? アイキャッチ
【ブログ向け】画像編集を始めるなら真っ先に覚えておきたい「リサイズ」とは?【超基本】

続きを見る

「ペイント」における、リサイズ&ファイル形式の変換方法 アイキャッチ
【画像編集】ペイントで、「画像サイズのリサイズ」&「ファイル形式の変換」をする方法【jpg・pngなどの拡張子変更】

続きを見る

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

今回の記事はこちらの章に属しています

WordPressブログガイド 第9章「豆知識」編 

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressブログにおける、おすすめな画像サイズ=ピクセル数【4つのポイント】

ブログにおすすめな画像サイズの目安【抑えめ 600~800px / 大きめ 1000~1200px】

ブログガイド_見出し_01

ブログにおすすめな画像サイズ(正確には、その横幅)については、調べてみてもけっこうバラバラな感じです

ただそのなかでも、「ざっくりな目安」というのはやっぱりあります

次の通りです

  • 抑えめの目安 → 600~800px
  • 大きめの目安 → 1000~1200px

サイズが大きい方が、当然画質はキレイに映りますが、その分ページ読み込みを重たくしてしまいます

ちなみに、このブログでは…

  • 通常の画像 → 700px(たまに1024px)
  • アイキャッチ画像 → 1024px

こちらの数字に上限を統一してます

※あくまで「上限」となるサイズです。 そもそも小さい画像を載せる場合、当然これより小さい数値になります

ちなみに「1024px」というのは、一般的にメジャーな画像サイズの1つです

あともう1点!

「Facebook」で記事がシェアされる際のサムネ表示を「通常サイズ」ではなく「大きいサイズ」で表示させたい場合、その記事のアイキャッチ画像は…

  • 横幅 1200px
  • 縦幅 630px

以上のサイズが推奨されてます

ここまでの目安をふまえたうえで、お次は「理想の画像サイズの決め方」について見ていきましょう🐥

理想の画像サイズを決める際のポイント【メインカラムにムダなく収める】

ブログガイド_見出し_02

ブログに使う画像で、「理想の画像サイズ」を決めるポイントは個人的に3つあると考えてます

  • メインカラムの幅いっぱいには、最低限届くサイズにする(通常、700pxくらい)
  • かつ、それ以上大きすぎない(容量をセーブ)
  • その2点を基本としつつ、一部例外として「綺麗に見せたい画像」だけは大きいサイズをあえて使う(例えば1200pxとか1920pxとか)

「メインカラム」というのは、「サイドバー」などを除いた記事スペースを指します

まとめると、「ユーザーが快適に見れるための当たり前のポイント」を押さえつつ、そのうえであとは「柔軟な使い分け」が大切なのかなと思ってます

リクナビNEXT

30代向け

約85%がリクナビNEXT限定求人

正社員求人は9割以上

無料登録はたった5分で完了!!!

メインカラム(記事エリア)の横幅の調べ方【Google Chromeのデベロッパーツールなら一瞬】

ブログガイド_見出し_03

ブログにおける「メインカラムの横幅」は、「Google Chrome」ブラウザなら簡単にチェック可能です

「デベロッパーツール(別名:検証モード)」というのを使います

まずは「Google Chrome」のブラウザで、ブログにアクセスしましょう

WordPress管理画面にはログインしなくてもOK!

WordPressブログにおすすめな画像サイズ 1-3-01

↑ いずれかの記事ページを開いて、キーボードの「F12」キーを1度押します(右クリック → 検証でもOK!)

すると…

WordPressブログにおすすめな画像サイズ 1-3-02

↑ 右側に、「デベロッパーツール」という画面が開きます

「検証モード」とも言うよ!

このデベロッパーツール内における…

WordPressブログにおすすめな画像サイズ 1-3-03

↑ 左上の「矢印」ボタンを1度クリックし、それから…

WordPressブログにおすすめな画像サイズ 1-3-04

↑ ブログのページ上に、カーソルをもっていきます

すると画面上がブルーに切り替わるので、画像例のように「メインカラム」部分がブルーになった状態で、1度クリックします

普通に左クリックでOK!

すると、右側の「デベロッパーツール」内における…

WordPressブログにおすすめな画像サイズ 1-3-05

↑ ブルーの網掛けエリアに、「メインカラム」の横幅(ピクセル数)が表示されます

今回の例では、横幅は「694px」だとわかりました

この場合、画像サイズの基本的な横幅を「700px」とかで統一しておけば…

  • メインカラムの幅いっぱいに、ちゃんと表示される
  • かつ、それ以上ムダに大きすぎない

のでおすすめです

ちなみに、このデベロッパーツールを閉じるには…

WordPressブログにおすすめな画像サイズ 1-3-06

↑ 右上の「×」をクリックすればOKです

最後に、「画像サイズを指定の大きさに変更(リサイズ)する方法」を見ていきましょう🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

画像サイズを変更(リサイズ)する方法について【自動より手動がおすすめ】

ブログガイド_見出し_04

ブログに貼る画像のサイズを変更(リサイズと言います)する方法は、大きく次の2パターンです

  1. 「自動リサイズ」用のプラグインに任せる
  2. アップロードの前に、自分でリサイズしておく

それぞれメリット・デメリットがあるので、順に見ていきますね🐣

ちなみに結論から言ってしまうと、僕のおすすめは断然「②」です

リサイズ方法①:「自動リサイズ」用のプラグインに任せる【「Imsanity」が便利】

1つ目のリサイズ方法は…

「自動リサイズ」用のプラグインに任せる

です

WordPressには、ブログに画像をアップロードする際に「指定したピクセル数」へ自動でリサイズしてくれるプラグインがあるんですね

有名どころだと…

  • Imsanity

というプラグインが、まさにそうです

メリットは次の通り

  • 自分で1枚1枚リサイズする手間が省ける

ただ一方で、この「自動リサイズ」にはデメリットもあります

  • あえてリサイズせずに載せたい(例えば景色が綺麗な写真とか)写真まで、まとめてリサイズされてしまう
  • プラグインを入れるので、サイトスピード(ページの表示速度)に少なからず悪影響がある

今度は、もう1つのリサイズ方法「自分でリサイズ」について見ていきますね🐣

リサイズ方法②:アップロードの前に、自分でリサイズしておく【Windowsなら「ペイント」が便利】

2つ目のリサイズ方法は…

アップロードの前に、自分でリサイズしておく

です

「自分でリサイズ」と言うと、凄く面倒なイメージかもですが、実際には画像のリサイズは「超簡単」です

そしてメリットもあります

  • なんらかの編集を加えてから載せる場合、どちらにしろ画像編集の前に「リサイズ」が必須になる
  • 自分でリサイズをすればプラグインも不要なので、サイトスピードも重たくならない
  • リサイズしたくない画像については、(自動リサイズと違って)そのまま載せられる

デメリットは、最初にお伝えした通り

  • 自動リサイズより、ちょこっとだけ面倒な気がする(実際は超簡単)

▼ 画像サイズの変更(リサイズ)についてはこちら ▼

ブログ用の画像編集 まず押さえておきたい「リサイズ」とは? アイキャッチ
【ブログ向け】画像編集を始めるなら真っ先に覚えておきたい「リサイズ」とは?【超基本】

続きを見る

「ペイント」における、リサイズ&ファイル形式の変換方法 アイキャッチ
【画像編集】ペイントで、「画像サイズのリサイズ」&「ファイル形式の変換」をする方法【jpg・pngなどの拡張子変更】

続きを見る

おしまい♪

あずき🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

今回の記事はこちらの章に属しています

WordPressブログガイド 第9章「豆知識」編 

あずきのWordPressブログガイド 総合TOP 

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-画像編集

© 2020 あずきのぶろぐ。