Wordpressおすすめのメディア設定！最適な画像サイズとは？サムネイル、中、大、フルサイズ4種類の使い方！

既にサイト運営を行っている方でもサーバー容量を気にしすぎて画像の自動作成を全て停止し、フルサイズのみでサイトを作っていませんか？

WordPressおすすめのメディア設定とその理由

Wordpressのダッシュボードから設定できるメディア設定ですが、初めにサイトに合わせた設定にしておかないと後々とても面倒なことになります。

知らないで使っていると気が付いた時には、使わないサイズの画像まで自動生成されてサーバーの容量を圧迫していたり、画像サイズを変更したくなった時に画像を全てアップロードしなおす必要があったりと骨の折れる作業が待っています。

とにかく初めに設定して、なるべく変更したくないメディア設定。

画像アップロード時に作成される画像サイズの変更自体は数字を変更すればいいのですが、サムネイル、中サイズ、大サイズをどのような数値にしたらいいのかイマイチよく分かりませんよね…

筆者はブログをはじめたての時にフルサイズのみでサイトを作っていたこともありました…間違っていると気が付き、数日間かけて画像をアップロードしなおしました。もう二度とやりたくありません（笑）

このサイトを見てくださっている方にはこんな所に時間を使ってほしくないので、なぜ当サイトのメディア設定がこの設定になっているのか詳しく説明します。

アップロード時に自動作成される画像

まず画像をメディアにアップロードした際に自動作成される画像のおさらいです。

テスト用の画像「test.jpg」をアップロードしました。
画像のサイズは「4032×3024」と大きめのサイズ。

test.jpg(4032×3024)をアップロードした時

「-scaled」が付いた画像は2560px以上の画像をアップロードした時に自動的にリサイズされた画像です。Wordpressバージョン5.4から実装。
2560px以上の画像ではフルサイズはこの画像が使われます。
それ以下の場合、フルサイズはアップロードしたオリジナル画像が使われます。

「768px」の画像は「medium_large」と呼ばれるサイズでWordpressバージョン4.4から自動作成されるようになりました。スマホ用です。
functions.phpにコードを追加すると画像挿入時に選択できるようにできます。

その他「2048px」「1568px」「1536px」も自動生成された画像です。Wordpressバージョン5.3から実装。パソコンで表示倍率(スケーリング)を200%とかに変えているとこちらの画像が使われるのかな？使い方など詳細不明です。。。

後々必要になるかもしれない＆サーバー容量に余裕があるので、僕は一応残してます。現在は画像アップロード時に横幅の最大が1500pxにリサイズされるように設定したので生成されませんが…

その他使っているテーマによってはテーマ専用サイズの画像が自動作成されることもあります。

なお、メディアから画像を削除するとこれらの自動作成された画像も消えます。

これらの自動作成でサーバーの容量が気になる方はfunctions.phpやプラグインで作成しないようにも設定できます。（記事最下部に記事リンクあります。）

幅、高さともに0にすると自動作成されない

サムネイル、中サイズ、大サイズの画像はメディア設定で幅と高さを0にすると自動生成されなくなります。

でもちょっと待って！

フルサイズのみではダメなのか？

ここがミソになりまして、僕が画像サイズの決定時に迷っていた内容です。

ほとんどのテーマでは画像表示領域を超えるサイズの画像を記事に埋め込んだ時、表示領域に画像が収まるように勝手に画像が縮小表示されますよね。
巨大な画像をフルサイズで挿入していてもスマホで見ると途切れなくキッチリ全部表示されます。

どんな画面サイズでサイトを見てもサイトが適宜見やすく調整されるデザインをレスポンシブデザインといいます。

では、レスポンシブデザインならばフルサイズ(オリジナル画像)のみでサイトを構築してもよくない？

上の画像のように、記事内に画像をフルサイズで埋め込んでも、大サイズで埋め込んでも見た目は同じです。(縦が0.5px違うけどw)

ならば大サイズなんていらない。自動生成をOFFに…と思っていたのですが間違いでした。

見た目は同じでも画像の重さ、読み込みスピードが違います！

サムネ、中、大、フルサイズでの画像データ通信量の検証

埋め込んだ画像サイズによってページ内の画像のデータ通信量は変わるのか？
画像クリック時のリンク先がフルサイズであっても、通信量が少なくなるのであれば最適な画像を選んで記事内に挿入することでページを軽量化できるはずです。

長いこと検証しようとは思っていたのですが、この度やってみました！

検証に使用した画像がこちら。大きい画像のほうが差が出てハッキリするはず。

これらの画像5枚をサムネイルサイズ、中サイズ、大サイズ、フルサイズと計4回それぞれ同じ埋め込みサイズで記事内に埋め込んで読み込み時の画像データ量をテスト。

ブラウザは何でもよかったのですが、日本語で分かりやすいEdgeを選択。
ブラウザ側もキャッシュを無効にし、画像のみの通信容量を測ります。

サムネイルサイズでの読み込み

5枚ともサムネイルサイズで記事に埋め込んで、ページを読み込んだ場合です。

サムネイルサイズでの読み込み

431KB中30.2KB転送済み。

中サイズでの読み込み

5枚とも中サイズで記事に埋め込んで、ページを読み込んだ場合です。

中サイズでの読み込み

467KB中63.8KB転送済み。

大サイズでの読み込み

5枚とも大サイズで記事に埋め込んで、ページを読み込んだ場合です。

大サイズでの読み込み

593KB中190KB転送済み。

フルサイズでの読み込み

5枚ともフルサイズで記事に埋め込んで、ページを読み込んだ場合です。

フルサイズでの読み込み

1.3MB中929KB転送済み。

続いてギャラリーでも計測してみます！

ギャラリーは枚数が多いとサムネイルでもフルサイズでも見た目があまり変わらないのだけれど、どうだろうか？

サムネイルサイズでの読み込み

ギャラリーで選択できるサイズをサムネイルにして記事に埋め込んだ場合です。

ギャラリーをサムネイルで埋め込んだ場合

サムネイルギャラリーの計測結果

432KB中30.2KB転送済み。
ページ内にサムネイルサイズで埋め込んだ時とほぼ変わらない！

フルサイズでの読み込み

ギャラリーで選択できるサイズをフルサイズにして記事に埋め込んだ場合です。

ギャラリーをフルサイズで埋め込んだ場合

フルサイズギャラリーの計測結果

1.3MB中929KB転送済み。
先ほど記事内に画像をフルサイズで埋め込んだ時と全く同じ結果になりました。
今回、中サイズと大サイズを割愛したのも全く同じ結果だったためです。

各画像サイズでの通信量計測結果

長くなったので結果をまとめます。

結論が出ました。フルサイズは大サイズの約5倍のデータ転送量。

見た目が同じでも画像をフルサイズで挿入するのと、大サイズで挿入するのでは、大サイズで挿入したほうがページが軽量に仕上がる。

ということは大サイズは自分のサイトの画像表示領域の横幅とちょうどに合わせるのが良いということになります。
(縦に関してはスクロールして見られるのでよっぽど縦長の画像ばかり使うサイトでもない限り制限しなくてもいいかと。)

さらに注目したいのがギャラリーを使用した場合。
今回の画像5枚の場合、サムネイルサイズでは一枚当たり122×122ピクセルだったのが、フルサイズだと122×91.5となっており。サムネイルでギャラリーを作ったほうが画像が大きくなった。

データ転送量がフルサイズより約30倍も少ないサムネイルでギャラリーを作ったほうが画像が大きく表示されるのか！

ということは記事に埋め込む画像の最大サイズは大サイズを使って、ギャラリーでもフルサイズを使わないとなるとフルサイズいらなくない？
と思ったのですが、実はこれも必要。

フルサイズの最適な使い方

先ほどの計測結果から大サイズをサイトの画像表示領域の横幅いっぱいにすればフルサイズを使うよりも見た目が同じなのに軽量！という結論に至りました。
ではフルサイズはどう使うのか？

それはズバリ画像をクリックしたときに表示される画像がフルサイズ！

当サイトではプラグインを使って画像をクリックしたときにライトボックスでフルサイズの画像が表示されるようにしております。
何も設定していないと画像のページが表示されますが、そちらに表示されるのもフルサイズの画像ですね。

画像を見ていただくと良くわかるのですが、フルサイズ画像(オリジナル画像)のサイズを変更した場合の表示の違いです。

現在多くのPCモニターがフルHDと呼ばれる「1920×1080ピクセル」の画面サイズを採用しており、主流です。
ある程度は画面サイズに合わせてプラグインが表示してくれるのですが、画面いっぱいに画像が表示されると逆に見にくくなるので、フルサイズはアップロード時に横幅が最大で1500pxになるようにfunctions.phpにてリサイズ設定しています。

Wordpressに4000pxなどの高画質画像をアップロードしても2560px(2K相当)に自動リサイズされるように、よっぽど画質にこだわったサイトでない限りそんなに巨大なフルサイズ画像は必要ないということ。

そう遠くない未来にディスプレイが4K,8Kが当たり前、ネット速度も今と比べ物にならないくらい速くなるのだと思いますが、そもそもうちのようなハウツーサイトや文章の間に画像をちょろちょろと入れるようなブログでは画質よりもスピードを重視したほうがSEO的にも良いでしょう。

うちのサイトの場合、設定画面などの文字が読めればそれで充分なので低画質の画像を用意しております←

大サイズの最適な使い方

先ほどの計測結果の通り、大サイズは自分のサイトの画像表示領域の横幅いっぱいに設定しておくのが良いかと思います。

使い方は記事内に最大サイズで画像を貼り付けたい場合です。

当サイトでこの文章が表示されているところの横幅(PC閲覧時の最大幅)は694pxなので、メディア設定の大サイズの横幅を694pxに設定しています。
縦はスクロールできるし、縦長の画像もめったに使うことがないので0にして制限していません。

繊細な画像など、どうしても高品質な画像を記事内に埋め込みたい時にフルサイズを埋め込み、普段は大サイズを使うといった感じで良いと思います。

大サイズはフルサイズよりも若干画質が悪くなる

大サイズはリサイズされた画像なのでフルサイズほど繊細ではありません。
例の画像があまり良くないですが、背景のグレーの色合いが結構違います。

ただ画像クリックでフルサイズが表示されるのでフルサイズはそんなに使いません。

メディア設定で設定したサイズと大サイズが異なる場合

メディア設定では1024なのに大サイズが異なる

最近のテーマでは少ないように思いますが、実験で使ったWordpressのデフォルトテーマでこのような事態になりました。

メディア設定は初期値の1024が入力されているのに、画像を挿入しようとすると大サイズが750pxになっている…

テーマ内functions.phpのcontent_widthが原因

デフォルトテーマ「twentytwentyone」ではcontent_widthという文字や画像を表示する領域(横幅)を指定するものが750pxに設定されているのが原因でした。

functions.php内のcontent_widthで大サイズが決まる

テーマのfunctions.phpを開いて、content_widthの値を書き換えることで大サイズが変わります。
画像の750となっているところを1024に変更し保存。

一度投稿ページから記事を閉じて、再度メディアを追加を押すと大サイズが1024に変わってました！

中サイズの最適な使い方

中サイズはサイトによっては使わないかもしれません。
当サイトでは中サイズはスマートフォンのスクリーンショットを記事内に埋め込むときや、大サイズで正方形に近い画像が記事内で巨大になるとき、そこまで重要ではない画像などに使っています。

特に縦長の画像が多い場合、大サイズで埋め込んでしまうと文章が離れてすぎて見た目が良くありません。

サムネイルサイズの最適な使い方

正直サムネイルサイズの使い方がイマイチよく分かりません。
初期値が150pxになっているので変更すると使いやすくなるかもしれません。
当サイトでは中サイズの300pxを最小サイズにしているので、サムネイルはメディア設定で幅と高さの両方を0にして自動作成されないようにしてます。

使う場合メディア設定の「サムネイルを実寸法にトリミングする」のチェックは不要でしょう。
画像が切れてしまい使いものになりません…このオプション使いこなしている人いるのかなぁ…

もっとも先ほどの実験ではサムネイル画像が一番軽量なので、枚数が多いギャラリーをたくさん使うサイトには良いかもしれません。

サムネイルとアイキャッチ画像は別物

アイキャッチ設定は記事を書くページの右側メニュー

筆者がWordpressを使い始めてしばらく混同していたので補足。

Wordpressにおいてサムネイル画像はいわば画像の「小サイズ」です。
アイキャッチ画像がトップページや関連記事に表示される画像となっています。
アイキャッチ画像が記事上部に表示されるテーマもありますね。

サムネイルはサムネ詐欺などYoutubeで有名になった言葉でもあり、Youtubeをよく使っているとサムネイル＝記事一覧ページの画像と思いがちですが、Wordpressではアイキャッチ画像ですのでお間違いなく。

メディア設定でサイズ指定できるサムネイルのサイズとは画像のサイズです。

なおWordpressのアイキャッチに設定した画像は、Twitterで記事がシェアされた時などの画像（OGP）にも使用されます。

結局メディア設定のおすすめは？

つらつらと長文になってしまいました。(全部読んでくれる人いるこれ？ｗ)

SEO的にもページの速さは重要です。
ページの重さ(容量=データ通信量)ランキングで動画に次いで2位に上がるのが画像です。

Googleが推奨するサイト診断スピードテストのFCP(FirstContentfulPaint)を考えると記事に使う画像にも気を使ったほうがいいです。
見やすさとサイトの軽量化は今後も永遠の課題となりそうですね…

そこにきてWordpressの画像自動生成やリサイズといった内容、サーバー容量の問題も噛んできてさらに悩みますね。

できればメディア設定は一度決めたら変えないほうが良いのでしょう。
そうなってくると使用するテーマ、画像表示領域のサイズ、それに伴う広告の場所とサイズ、どのような目的でどのようなサイズの画像を自分のサイトで多く使うのか？
そこら辺までよく考えておかないと二度手間となります。

各サイズの最適な？使い方とメディア設定値のまとめ

当然サイトによって”最適”が変わるので？が付いています。

各画像サイズをメディア設定の初期値で一般サイトに使用する場合はおおむね以下の通りでしょうか。

当サイトのメディア設定

以上を踏まえてテキストの割合の方が画像よりも多い一般的なサイト(画質よりも速度重視)にオススメのメディア設定です。

今後一切使う可能性のないサイズには幅と高さに0を入力して画像アップロード時の自動生成を停止する。

サーバーの容量を気にしない場合は、そのままでもOKです。(圧縮した画像でサーバー容量を全部使おうとすると相当な気もする。サーバー移動は案外簡単です。)
とはいえサーバーの容量を食うので、今後使いそうなサイズにしておくと初期設定よりいいかと思います。

また、後々0に設定していたサイズを使いたくても画像アップロード時に0に設定されていたのならサイズ設定後にアップロードしなおさないとそのサイズは使えません。

サイトの画像表示領域を調べる方法

大サイズに指定する横幅が分からない！という方向け。
ChromeでもEdgeでもFirefoxでも大丈夫です。
サイト上で右クリックし「検証」や「要素を調査」「開発者ツールで調査する」をクリックして開発者ツールを立ち上げます。

マウスカーソルをサイトの画像を埋め込みたい場所に合わせましょう。
※PC閲覧でサイトコンテンツ(横幅)が最大幅になっている状態で確認する。

例では文章を囲んでいるPタグを検証することにより610×68という数字が見つかりました。この610を大サイズの横幅に指定すると横幅ぴったりの大サイズが完成します。
フルサイズではなくコチラを記事に使いましょう。
ちなみに当サイトは694px(PC閲覧時)が文章＆画像の表示領域の横幅です。

知っておきたいRetinaディスプレイ

Wordpressに使うのに最適な画像、最適なメディア設定が分かったところでもう１つ知っておきたい内容があります。

それはスマートフォンやMacに搭載されているRetinaディスプレイです。
このRetinaディスプレイでアクセスされると画面サイズの２～３倍の画像が読み込まれるため、こちらも知っておいた方が良いかと思います。
スマホで画像がぼやけるのはRetinaディスプレイが原因かも？

対応にはsrcsetというHTML属性を使います。
Wordpressでは画像に自動的に付与されますが、重要な内容です。

こちらの記事もかなりのボリュームになりましたので、分けました。↓

WordPressの画像がぼやける原因

Wordpressで画像がぼやける原因についても詳しく書きました。
大サイズを表示領域ギリギリに設定し、CSSで画像に枠線をつけると画像がぼやけるかもしれません。

当サイトでは長らくこれが原因で画像がぼやけていましたので、メディア設定変更と共に一読いただければと思います。

まとめ

超大作となりました（笑）
記事に使う画像サイズの設定であるメディア設定にはもうかれこれ5年ほど迷っていたのですが、自分で検証してみてしっくりきました！(間違ってたら絶望ｗ)

さらに上を目指すならスマホに最適な幅の画像も用意してアクセスに応じて切り替えるとかもできそうな…トラブルの元なのでやりませんがｗ

先日このサイトのPC閲覧時のサイトの幅を1060px→1114pxに変更し、記事の表示領域幅＝画像の表示領域幅が640px→694pxになったのですが、それはもう大変でした…
デフォルト設定では横幅が足りなくて広告をダブルレクタングル表示できないようで、仕方なくメディア設定を触りました。

できれば皆さんにはこんな苦労を掛けてほしくない。
それならば記事の執筆に時間を割いてほしいとの思いでこの記事を書きました。

間違っていても責任はとれない(時間は返せない)ので、くれぐれも参考ということにしておいて下さいね。ｗ。