ブログの画像サイズはどうするのがおすすめ?【最適解】

ブログで使う画像の大きさや容量ってどうしておくのが正解だろう?

WordPressは大きさ毎に画像を生成しているけど、どこで使われているの?

ブログ用の画像ってどうしておくのがいいのかって、いざ実際に画像を作ろうと思うときに悩みませんか?

私は悩みました。色々調べてみた結果、こうしたらいい、と思える設定がわかったので紹介します。

このページの内容(目次)

ブログの画像サイズの目安

ブログ画像サイズの目安
サイズ幅800px以下
容量150KB以下

ブログの画像サイズは、メインカラムの横幅を基準にします

例えばメインカラムの横幅が650pxだったら、横幅は650pxで作ればOKです。

画像の容量は小さければ小さいほどいいですが、あまり極端に圧縮したりして画質が劣化しない程度であれば問題ありません。

どんなブログにも適用できる絶対的なサイズというのはないのですが、メインカラムの幅を基準に800px以下程度で150KB以内に収まっていればひとまずOKです。

作成方法別の画像サイズ設定

作成方法別の画像サイズの設定

素材画像の加工を行う場合 → 幅を基準に高さは成り行き

イメージ画像のような「元素材」がある画像の場合は、自分のブログのメインカラム幅を基準にリサイズし、縦(高さ)は成り行きで構いません。

容量の方も、最終的に150KBを超えてなければOKです。

1から自分で作る場合 → 16:9になるサイズで作成

図解やタイトル画像などで、自分で1から加工しながら作る場合は、縦横比を事前に決めておくと良いです。

よくあるアスペクト比(縦横比)とサイズは以下の通りです。

種類比率幅800px時の高さ
16:91.77:1800×450
黄金比1.618:1800×494
3:21.5:1800×533
白銀比1.414:1800×565
4:31.33:1800×600
スクエア1:1800×800

比率だけ見ても違いがわからないかもしれませんのですべて同じ横幅にしたときの大きさの感じが以下のようなものです。

画像の比率のイメージ

上記のうち、おすすめの縦横比は16:9です。

  • 人が最も美しいと感じる黄金比に近い
  • 黄金比に比べてサイズの計算がしやすい
  • 高さが最も少なく、ファーストビューを画像で埋め尽くさない
  • 十分な高さもあるので汎用的に使える
  • スマホで撮った写真を掲載しやすい
  • 多くのWordPressテーマで採用されている(乗り換え時に楽)

上記の理由から、16:9のサイズで作成するのをお勧めします。

16:9以外のアスペクト比であれば、3:2が比較的使いやすいはずです。

画像を使うときは幅いっぱいに使うのがおすすめ

画像を使うときは幅いっぱいで使うのがおすすめ

ブログで画像を使う際は、幅いっぱいで使う方がデザイン的に綺麗に見えます

メインカラムの幅を下回る画像幅を多用すると、両端が揃わずデザイン的に見栄えがやや悪くなりがちです。

幅いっぱいにして画像を使用すれば左右がそろうため、見た目がスッキリ綺麗に表示されます。

画像の役割別のサイズ

ブログで使われる画像については概ね下記の4つの役割があります。

1. アイキャッチ画像

アイキャッチ画像は、ブログ記事ではファーストビューで表示され、アーカイブページでは記事の顔として並ぶことになります。

アイキャッチ画像のサイズで気を付けるべきポイントは、容量を小さくすること、です。

また、ほとんどのWordPressテーマではアイキャッチ画像は拡大機能を付けていない場合が多いので、拡大を前提とせず、必要幅ギリギリで作成しておけばOKです。

3. イメージ画像

主にh2毎の直下に配置するようなイメージ画像を使用する場合です。

イメージ画像は文章の主旨を汲みながら、内容をイメージさせると同時に、目を休める場所に設置されることが多くなります。

このため、ある程度容量が大きくても、綺麗に表示されるようにする方が良いでしょう。

記事全体あるいはサイト全体で、イメージ画像のシリーズを統一しておくと、そのイメージがサイトのイメージになる場合もあるので、同じ作成者のイラストを使ったり、似たテイストがシリーズ化されているものを使用したり、写真を使う場合はテーマを統一すると良いです。

画像自体に拡大の必要はないため、メインカラム幅と同じサイズで作っておけばOKです。容量がやや大きくなりがちなので、しっかりロスレス圧縮しておくのがおすすめです。

3. 解説画像

解説に使用する画像はものによって、拡大表示が必要なものも多いでしょう。

といってもスマホの場合は拡大表示ができない(それ以上大きくならない)可能性が高いので、拡大表示はPC向けの考え方です。

大半のブログはスマホの方がアクセス数が多くなる傾向があるので、そこまでバカでかい画像を使う必要はありません。

サイズで言えば1200×675pxくらいを目安にしておけば、しっかり大きく表示されつつ必要以上に容量が大きくなったりしないはずです。

OGP画像

SNSなどで記事を紹介する際に表示される画像がOGP画像です。

アイキャッチ画像と共用になっていることが多いのですが、個人的にはアイキャッチ画像とは別のサイズで作成することをお勧めします。

というのも、画像の縦横比がやや特殊である場合が多く、仕様変更が発生する可能性もゼロではないためです。

SNSの仕様が変更になったためにアイキャッチ画像を全部作成しなおさなければならくなった、とかちょっと不毛ですよね。

リサイズの処理だけなら後からでもできるのでサイズを決めてOGP専用画像にするのがおすすめです。

具体的なサイズとしては1200×630(1.91:1)が良いとされています(特にTwitter)。

OGP画像はテストすることが可能です。

Twitterの場合https://cards-dev.twitter.com/validator
Facebookの場合https://developers.facebook.com/tools/debug/sharing/

当ブログでの画像サイズ例

参考までに、このブログで使用している画像の種類とサイズ例です。

アイキャッチ画像672×378px(16:9)
それ以外の画像800×450px(16:9)
図解用画像1200×675px(16:9)
OGP画像1200×630px(1.91:1)

多くのテーマではアイキャッチ画像とOGP画像が同じ設定にしかできないのですが、SEO用のプラグインを導入すると個別に設定できるようになります(例:SEO SIMPLE PACK)

WordPressは複数のサイズを自動生成する

WordPressはオリジナル画像から自動的に複数の画像を生成する

WordPressは標準で下記のサイズを自動的に(勝手に)作るようになっています。

  • オリジナルサイズ(アップロードした画像)
  • サムネイルのサイズ(デフォルト:150px)
  • 中サイズ(デフォルト:300px)
  • 大サイズ(デフォルト:1024px)
  • ミディアムラージサイズ(デフォルト:768px)
  • 1536×1536px
  • 2048×2048px
  • 2560×2560px

生成された画像は、メディアの挿入画面での選択と、<img>タグのsrcset属性内で使用され、デバイスに合わせてに使用されます。

別にいいんじゃない?

と思うならそれでもいいんですが、1つの記事で例えば5枚の画像をアップすると40ファイルが作られ、200記事も作ったころには8000枚もの画像が出来上がることになります。

当然、サーバー容量を圧迫しますし、ロリポップのように、作成できるファイル数に上限を設定しているサーバーもあります。

一番困るのが画像圧縮プラグインを使用する場合です。

画像圧縮プラグインは1か月あたりの画像圧縮数に制限を書けている場合がほとんどです。画像枚数には自動生成された画像も含まれるため、枚数が増えると圧縮できる枚数に限りが出ます。

ですので、不要な画像を生成しない設定にしておくのがおすすめです。

自動生成された画像はレスポンシブイメージで使用される

レスポンシブイメージはWordPress4.4で標準採用された機能で、デバイスや画面の幅に応じて適切なサイズの画像を読み込む機能です。

例えば1000px幅の画像と300px幅の画像があった時、デバイスの幅によっては1000pxを大きく下回っているスマホなどの際には300pxの画像が自動的に選択されてダウンロードされます。

割といい機能なのですが、アップロードする元画像の最大サイズを800px以下にしておくと、恩恵はあまり出ない、というのが当サイトの見解です。

サイズの小さい画像を読み込むメリットは高速化です。ただ、事前に画像の圧縮などを行った元画像をアップすると、自動生成された画像の方がファイルサイズが大きくなってしまったりするケースが多々あり、それだと本末転倒です(元画像を読み込む方が速度が速かったということになります)。

また、画面によっては、使われる画像サイズの違いから、元画像と生成された画像の両方を読み込んでしまうケースも見られたことからむしろ通信量が増加してしまうような挙動が見られたため、当サイトの場合は自動生成を停止しています。

自動生成を停止する方法1:設定 >メディア

サムネイル・中サイズ・大サイズは設定>メディアの数値を全て0にすれば生成されなくなる
  • サムネイル
  • 中サイズ
  • 大サイズ

はWordPressの設定>メディアで値を0にすれば生成が止まります。

サイトをこれから作る場合は初期設定としてすべて0にすればOKです。

既に運用中のブログの場合は使っているサイズがないか確認して使っていないものを0にすればよいでしょう

自動生成を停止する方法2:options.php

ミディアムラージサイズの画像はmedium_large_size_wの値を768から0にすれば生成されなくなる
  • ミディアムラージサイズ

は設定>メディアではすべての停止ができず、別のところで設定する必要があります。WordPressにはほとんどの設定をまとめた画面があるのでそこで設定します。

(サイトのURL)/wp-admin/options.php

にアクセスし、WordPressで設定できるすべての設定画面を表示します。

[CTRL]+[F]で検索窓を出し、「medium_large_size_w」を検索します。

横のボックスに初期設定では「768」となっているのを「0」に変更し、画面の一番下にある<変更を保存>ボタンを押します。

自動生成を停止する方法3:function.php

  • 1536×1536px
  • 2048×2048px
  • 2560×2560px

のサイズの画像は、設定画面などがなく、下記のコードを function.php に記載して生成されるのを停止します。

使用しているテーマ(子テーマの人は子テーマ)のフォルダにアップすれば適用されます(テスト環境などで事前にテストされることをお勧めします)。

function disable_image_resizes( $new_sizes ) {
  unset( $new_sizes['1536x1536'] );
  unset( $new_sizes['2048x2048'] );
  return $new_sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'disable_image_resizes' );
add_filter( 'big_image_size_threshold', '__return_false' );

そもそも、1536px以上の幅の画像はかなり大きい画像で、ブログの総幅を超えているはずです(PC版でも1200~1400pxまでのはずなので)。

画像をアップロードする際に「1536px以下の画像しかアップしない」というルールにしておけば上記のコードを入れておく必要はありません。

アップロードされた画像を記事のスラッグ毎にディレクトリを作って仕分ける方法

WordPressではデフォルトでは

/wp-content/uploads/

に画像がアップロードされるようになっています。

サブディレクトリを作るかどうかをメディアの設定ですることができます。

  • アップロード先直下にすべての画像を保存する場合
  • 年月でサブディレクトリを作ってそこに保存する場合

上記のようにした場合では、どちらを選んでもデメリットがあります。

アップロード先の直下にすべての画像を保存していく場合

ファイル名の重複が頻繁に発生する(名前が勝手に変わる)

月別ディレクトリに保存する場合

後で探したくなった時にどのディレクトリに保存されているのか探しにくくなる

上記を解決するために、スラッグ毎にディレクトリを作成してそこにアップされるようにするとスッキリします。

/wp-content/uploads/記事スラッグ/アップした画像ファイル名

標準では上記の機能はないため、プラグインで実現します。

Custom Upload Dir

というプラグインをダウンロード・有効化します。

Custom Upload Dirの設定

WordPressの設定 → <Custom Upload Dir>を選択し、設定画面を開きます。

「Build a path template」欄に「/%postname%」と入力すれば記事毎にディレクトリが作成されて画像はそこにアップされます。

将来的なカテゴリ変更や、カテゴリを複数選んだ時にアップロード先が別のカテゴリになってしまうトラブルを避けるためにも記事単位でディレクトリを作成されることをお勧めします。

このページのまとめ

ブログで使う画像のサイズについて、再度整理しておきます。

  • 幅の目安は、メインカラムの幅を基準にし、幅800px以下にしておくと良い
  • ファイルの容量は150KB以下にしておくと良い
  • ブログで使う画像の種類を理解し、役割毎に作成する画像サイズを決めるのがおすすめ。
  • 画像を使うときは幅いっぱいで使った方が統一感もありデザイン的にもきれいにまとまりやすい
  • WordPressはデフォルトで様々なサイズの画像を自動生成するので、使っていないのであれば自動生成は止めてしまった方がサーバー容量を圧迫せず管理もしやすくなる
  • アップロードした画像を管理しやすいように、記事スラッグ毎にディレクトリが作られるようにするとスッキリ整理しやすい
このページの内容(目次)
閉じる