WordPressで記事に画像を挿入する際に「サムネイル」「中」「大」「フルサイズ」の4つが選べますが、きちんと使いこなしていますか？
筆者は数年間いくつものサイトを作る際にいつも迷いに迷っていたので、今回この４サイズの画像の使い方を徹底的に検証してみました！
もう迷わない！もう触らない！Wordpressを使うなら知っておきたいおすすめのメディア設定と各サイズの使い方です。
使う前に知っておきたかった内容などもありますので、長文です・ｗ・
既にサイト運営を行っている方でもサーバー容量を気にしすぎて画像の自動作成を全て停止し、フルサイズのみでサイトを作っていませんか？
100％正解はなく、大切な設定ですので熟考いただくようお願いします。
項目が多いので、お急ぎの方は目次でチェックしてくださいね。
この記事の目次
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にリサイズされるように設定したので生成されませんが…
その他使っているテーマによってはテーマ専用サイズの画像が自動作成されることもあります。
なお、メディアから画像を削除するとこれらの自動作成された画像も消えます。
2560px以上の画像をアップロードしたい方はこちらを参考に。
【関連記事】高画質画像の自動リサイズを停止する方法。
幅、高さともに0にすると自動作成されない
サムネイル、中サイズ、大サイズの画像はメディア設定で幅と高さを0にすると自動生成されなくなります。
でもちょっと待って！
フルサイズのみではダメなのか？
ここがミソになりまして、僕が画像サイズの決定時に迷っていた内容です。
ほとんどのテーマでは画像表示領域を超えるサイズの画像を記事に埋め込んだ時、表示領域に画像が収まるように勝手に画像が縮小表示されますよね。
巨大な画像をフルサイズで挿入していてもスマホで見ると途切れなくキッチリ全部表示されます。
どんな画面サイズでサイトを見てもサイトが適宜見やすく調整されるデザインをレスポンシブデザインといいます。
では、レスポンシブデザインならばフルサイズ(オリジナル画像)のみでサイトを構築してもよくない？
-
- フルサイズでの埋め込み
-
- 大サイズでの埋め込み
上の画像のように、記事内に画像をフルサイズで埋め込んでも、大サイズで埋め込んでも見た目は同じです。(縦が0.5px違うけどw)
ならば大サイズなんていらない。自動生成をOFFに…と思っていたのですが間違いでした。
見た目は同じでも画像の重さ、読み込みスピードが違います！
サムネ、中、大、フルサイズでの画像データ通信量の検証
埋め込んだ画像サイズによってページ内の画像のデータ通信量は変わるのか？
画像クリック時のリンク先がフルサイズであっても、通信量が少なくなるのであれば最適な画像を選んで記事内に挿入することでページを軽量化できるはずです。
長いこと検証しようとは思っていたのですが、この度やってみました！
検証に使用した画像がこちら。大きい画像のほうが差が出てハッキリするはず。
これらの画像5枚をサムネイルサイズ、中サイズ、大サイズ、フルサイズと計4回それぞれ同じ埋め込みサイズで記事内に埋め込んで読み込み時の画像データ量をテスト。
■メディア設定は初期値。
■プラグインレス。キャッシュ機能もなし。
■使用する画像は2MB～4MB、3000pxオーバー。
■2560px以上のリサイズを停止。
■読み込み時にはスーパーリロードする。
■広告やサイドバーウィジェットなど余計なものはなし。
ブラウザは何でもよかったのですが、日本語で分かりやすいEdgeを選択。
ブラウザ側もキャッシュを無効にし、画像のみの通信容量を測ります。
サムネイルサイズでの読み込み
5枚ともサムネイルサイズで記事に埋め込んで、ページを読み込んだ場合です。
サムネイルサイズでの読み込み
431KB中30.2KB転送済み。
中サイズでの読み込み
5枚とも中サイズで記事に埋め込んで、ページを読み込んだ場合です。
中サイズでの読み込み
467KB中63.8KB転送済み。
大サイズでの読み込み
5枚とも大サイズで記事に埋め込んで、ページを読み込んだ場合です。
大サイズでの読み込み
593KB中190KB転送済み。
フルサイズでの読み込み
5枚ともフルサイズで記事に埋め込んで、ページを読み込んだ場合です。
フルサイズでの読み込み
1.3MB中929KB転送済み。
続いてギャラリーでも計測してみます！
ギャラリーは枚数が多いとサムネイルでもフルサイズでも見た目があまり変わらないのだけれど、どうだろうか？
サムネイルサイズでの読み込み
ギャラリーで選択できるサイズをサムネイルにして記事に埋め込んだ場合です。
ギャラリーをサムネイルで埋め込んだ場合
サムネイルギャラリーの計測結果
432KB中30.2KB転送済み。
ページ内にサムネイルサイズで埋め込んだ時とほぼ変わらない！
フルサイズでの読み込み
ギャラリーで選択できるサイズをフルサイズにして記事に埋め込んだ場合です。
ギャラリーをフルサイズで埋め込んだ場合
フルサイズギャラリーの計測結果
1.3MB中929KB転送済み。
先ほど記事内に画像をフルサイズで埋め込んだ時と全く同じ結果になりました。
今回、中サイズと大サイズを割愛したのも全く同じ結果だったためです。
各画像サイズでの通信量計測結果
長くなったので結果をまとめます。
■中サイズでの画像挿入時： 467KB中63.8KB転送。
■大サイズでの画像挿入時： 593KB中190KB転送。
■フルサイズでの画像挿入時：1.3MB中929KB転送。
ギャラリーに埋め込んだ画像もほぼ同じ結果。
結論が出ました。フルサイズは大サイズの約5倍のデータ転送量。
見た目が同じでも画像をフルサイズで挿入するのと、大サイズで挿入するのでは、大サイズで挿入したほうがページが軽量に仕上がる。
ということは大サイズは自分のサイトの画像表示領域の横幅とちょうどに合わせるのが良いということになります。
(縦に関してはスクロールして見られるのでよっぽど縦長の画像ばかり使うサイトでもない限り制限しなくてもいいかと。)
さらに注目したいのがギャラリーを使用した場合。
今回の画像5枚の場合、サムネイルサイズでは一枚当たり122×122ピクセルだったのが、フルサイズだと122×91.5となっており。サムネイルでギャラリーを作ったほうが画像が大きくなった。
データ転送量がフルサイズより約30倍も少ないサムネイルでギャラリーを作ったほうが画像が大きく表示されるのか！
ということは記事に埋め込む画像の最大サイズは大サイズを使って、ギャラリーでもフルサイズを使わないとなるとフルサイズいらなくない？
と思ったのですが、実はこれも必要。
フルサイズの最適な使い方
先ほどの計測結果から大サイズをサイトの画像表示領域の横幅いっぱいにすればフルサイズを使うよりも見た目が同じなのに軽量！という結論に至りました。
ではフルサイズはどう使うのか？
それはズバリ画像をクリックしたときに表示される画像がフルサイズ！
当サイトではプラグインを使って画像をクリックしたときにライトボックスでフルサイズの画像が表示されるようにしております。
何も設定していないと画像のページが表示されますが、そちらに表示されるのもフルサイズの画像ですね。
-
- 1500×622
-
- 1600×663
-
- 1851×766
画像を見ていただくと良くわかるのですが、フルサイズ画像(オリジナル画像)のサイズを変更した場合の表示の違いです。
現在多くの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ではアイキャッチ画像ですのでお間違いなく。
メディア設定でサイズ指定できるサムネイルのサイズとは画像のサイズです。
AMPページに対応する場合アイキャッチ画像は1200px×1200px以上に設定しないと画像が小さすぎると警告が来るようです。
結局メディア設定のおすすめは？
つらつらと長文になってしまいました。(全部読んでくれる人いるこれ？ｗ)
SEO的にもページの速さは重要です。
ページの重さ(容量=データ通信量)ランキングで動画に次いで2位に上がるのが画像です。
Googleが推奨するサイト診断スピードテストのFCP(FirstContentfulPaint)を考えると記事に使う画像にも気を使ったほうがいいです。
見やすさとサイトの軽量化は今後も永遠の課題となりそうですね…
そこにきてWordpressの画像自動生成やリサイズといった内容、サーバー容量の問題も噛んできてさらに悩みますね。
できればメディア設定は一度決めたら変えないほうが良いのでしょう。
そうなってくると使用するテーマ、画像表示領域のサイズ、それに伴う広告の場所とサイズ、どのような目的でどのようなサイズの画像を自分のサイトで多く使うのか？
そこら辺までよく考えておかないと二度手間となります。
各サイズの最適な？使い方とメディア設定値のまとめ
当然サイトによって”最適”が変わるので？が付いています。
各画像サイズをメディア設定の初期値で一般サイトに使用する場合はおおむね以下の通りでしょうか。
■中サイズ：大サイズでは大きすぎる画像(縦長の画像など) or 大サイズほど大きさが必要ではない画像(大より軽量)
■大サイズ：記事内に画像を最大サイズで埋め込むとき
■フルサイズ：画像クリック時など拡大用、最大表示用
当サイトのメディア設定
以上を踏まえてテキストの割合の方が画像よりも多い一般的なサイト(画質よりも速度重視)にオススメのメディア設定です。
小さい分最も軽量。小さすぎて使わない！という場合は幅と高さを0にして自動生成を停止する。
■中サイズ：大サイズよりもある程度小さいサイズを指定
大サイズと差別化を図るために高さの制限はした方が良いと思います。
使わない場合は幅の上限と高さの上限を0に設定して自動生成を停止する。
■大サイズ：サイトの画像表示領域の横幅いっぱいのサイズを指定
フルサイズで埋め込むよりも軽量。縦サイズの制限は任意。
■フルサイズ：画像が他サイズよりも小さすぎる場合を除いて、画像をクリックしたときに表示される画像。
拡大用か最大限綺麗に画像を埋め込みたい場合(ページは重くなる)
※メディア設定では設定できないので、functions.phpなどでアップロード時に自動リサイズされるように設定しましょう。
副産物としてリサイズされた画像以上のサイズの画像はWordpressによって自動生成されなくなります。
今後一切使う可能性のないサイズには幅と高さに0を入力して画像アップロード時の自動生成を停止する。
サーバーの容量を気にしない場合は、そのままでもOKです。(圧縮した画像でサーバー容量を全部使おうとすると相当な気もする。サーバー移動は案外簡単です。)
とはいえサーバーの容量を食うので、今後使いそうなサイズにしておくと初期設定よりいいかと思います。
また、後々0に設定していたサイズを使いたくても画像アップロード時に0に設定されていたのならサイズ設定後にアップロードしなおさないとそのサイズは使えません。
上限を設定している幅か高さに合うように自動調整されます。
サイトの画像表示領域を調べる方法
大サイズに指定する横幅が分からない！という方向け。
ChromeでもEdgeでもFirefoxでも大丈夫です。
サイト上で右クリックし「検証」や「要素を調査」「開発者ツールで調査する」をクリックして開発者ツールを立ち上げます。
マウスカーソルをサイトの画像を埋め込みたい場所に合わせましょう。
※PC閲覧でサイトコンテンツ(横幅)が最大幅になっている状態で確認する。
例では文章を囲んでいるPタグを検証することにより610×68という数字が見つかりました。この610を大サイズの横幅に指定すると横幅ぴったりの大サイズが完成します。
フルサイズではなくコチラを記事に使いましょう。
ちなみに当サイトは694px(PC閲覧時)が文章＆画像の表示領域の横幅です。
【関連記事】Webページに使われているCSSやHTMLをブラウザで確認する方法！Chrome、Edge、Firefoxの開発ツール。
まとめ
超大作となりました（笑）
記事に使う画像サイズの設定であるメディア設定にはもうかれこれ5年ほど迷っていたのですが、自分で検証してみてしっくりきました！(間違ってたら絶望ｗ)
さらに上を目指すならスマホに最適な幅の画像も用意してアクセスに応じて切り替えるとかもできそうな…トラブルの元なのでやりませんがｗ
先日このサイトのPC閲覧時のサイトの幅を1060px→1114pxに変更し、記事の表示領域幅＝画像の表示領域幅が640px→694pxになったのですが、それはもう大変でした…
デフォルト設定では横幅が足りなくて広告をダブルレクタングル表示できないようで、仕方なくメディア設定を触りました。
できれば皆さんにはこんな苦労を掛けてほしくない。
それならば記事の執筆に時間を割いてほしいとの思いでこの記事を書きました。
間違っていても責任はとれない(時間は返せない)ので、くれぐれも参考ということにしておいて下さいね。ｗ。