Hara Daizo 
WordPressでいう画像サイズには、元ファイルのピクセル数、画面上の表示幅、ファイル容量という3つの意味があります。エディターで幅を小さくしても、配信するファイルが軽くなるとは限りません。
本文の表示枠を基準に元画像を準備し、WordPressが生成した適切な解像度を選ぶことが基本です。挿入、横並び、背景利用、圧縮までを一つの流れで説明します。
WordPressの画像サイズで押さえる3つの意味
混同しやすい3要素を分けます。
| 要素 | 単位・例 | 何に影響するか |
|---|---|---|
| ピクセル寸法 | 1200×800px | 細部の解像感、生成できる表示サイズ |
| 表示寸法 | CSS上で幅720px | レイアウト、スマートフォンでの収まり |
| ファイル容量 | KB・MB | 転送時間、保存容量、バックアップ |
解像度の大きい画像でも圧縮すれば容量を抑えられます。反対に、小さい画像をCSSで拡大しても細部は増えません。まず用途に必要なピクセルを決め、その後に圧縮と表示幅を調整します。
WordPress画像サイズの目安を決める方法
本文エリアの最大幅を基準にします。たとえば本文がPCで720pxなら、通常画面向けはその幅以上、高密度画面も鮮明に見せたい写真はおおむね2倍までを候補にし、画質と容量の釣り合いを取ります。常に2倍が必要ではなく、図の細線や写真の内容、アクセス端末で判断します。
- テーマの本文、幅広、全幅それぞれの表示幅を測る
- 画像を通常表示、2列、全幅のどれで使うか決める
- 元画像を必要以上に大きくしない寸法へ書き出す
- WordPress挿入時に表示枠へ合う解像度を選ぶ
- PCとスマートフォンで鮮明さと転送量を確認する
アイキャッチは別の比率・OGP要件があるため、この基準だけで決めません。
WordPressが自動生成する画像サイズ
画像をメディアライブラリへアップロードすると、WordPressはサムネイル、中、大などの中間サイズを生成します。テーマやプラグインが独自サイズを追加することもあり、元画像1枚から複数ファイルが作られます。
画像を出力するときは、利用可能な候補をsrcsetへ含め、ブラウザーが画面幅や解像度に合うファイルを選べる構成があります。本文に毎回フルサイズを指定するより転送量を抑えやすい仕組みです。ただし、テーマのsizes指定やHTMLを最適化プラグインが書き換える場合は、実際に選ばれたファイルを開発者ツールで確認します。
画像サイズ設定を確認・変更する
「設定」→「メディア」では、サムネイル、中、大の最大幅・高さを設定できます。サムネイルの切り抜きを有効にすると指定寸法へ合わせたクロップになり、中・大は通常、縦横比を保ちながら最大寸法内へ縮小されます。
数値を変更しても、すでにアップロード済みの中間画像は自動で作り直されません。過去画像へ反映するには再生成が必要です。実行前にバックアップを取り、テーマ独自サイズを含めた生成数、処理時間、ディスク空き容量を少数の画像で試します。使わないサイズを0にする前にも、テーマが参照していないか確認してください。
WordPressに画像を挿入してサイズを変更する
投稿で画像ブロックを追加し、アップロードまたはメディアライブラリから選びます。ブロック設定の「解像度」でサムネイル、中、大、フルサイズなど利用可能な候補を選び、スタイル欄の幅・高さやドラッグハンドルで表示寸法を調整します。
幅を変えるときは高さを自動にし、縦横比を保ちます。エディターで300px表示へ縮めても、解像度がフルサイズのままなら大きなファイルを配信する場合があります。画像の表示幅と「解像度」の両方を見てください。外部URLから挿入した画像は元サイトの移動で消える可能性があるため、利用許可を確認したうえでメディアライブラリへ保存します。
画像を横並び・画像の横に文字を配置する
画像を複数並べるならギャラリーブロックかカラムブロックを使います。ギャラリーは同種の写真一覧、カラムは画像と異なる部品を組み合わせるレイアウトに向きます。列数を増やすほど1枚の表示幅は小さくなるため、フルサイズを並べる必要はありません。
画像の横に文章を置くなら「メディアとテキスト」ブロックが扱いやすく、モバイルで縦積みにする設定も確認できます。画像ブロックの左・右寄せで段落を回り込ませる方法は、短い文章と小画像に限ると崩れにくくなります。スマートフォンで文字が一列に細くならないか必ず確認します。
背景画像・画像の上に文字・背景色を設定する
カバーブロックを使うと、背景画像または背景色の上に見出しや文章を置けます。画像ブロックの「画像上にテキストを追加」からカバーブロックへ変換することもできます。カバーでは最小高さ、焦点位置、オーバーレイ色と不透明度を調整し、文字とのコントラストを確保します。
投稿を代表する画像を背景へ使う場合は「アイキャッチ画像の設定」とカバーブロックの「アイキャッチ画像を使用」を組み合わせられるテーマがあります。背景はCSSで切り抜かれやすく、img要素のレスポンシブ画像とは配信の仕組みが異なる場合があります。大画面用の巨大画像を無条件にモバイルへ配信していないか確認します。
画像をスマホへ最適化する
固定ピクセル幅だけでレイアウトを組まず、テーマのコンテンツ幅とWordPressのレスポンシブ画像機能を活かします。画像へ幅100%、高さautoを適用する一般的な構成なら、容器より横へはみ出しにくくなります。
PCとスマートフォンで別の構図が必要な場合は、テーマやブロックが端末別画像を正式にサポートするか確認します。CSSで一方を非表示にするだけだと両方をダウンロードすることがあります。縦長画面でのトリミング、画像内文字の大きさ、タップ可能なリンクとの間隔も実機で試します。
画像を圧縮・WebP化して容量を減らす
アップロード前に、写真編集ツールで必要なピクセル寸法へ縮小し、見た目を確認しながら品質を下げます。JPEGは写真、PNGは透過や輪郭の明確な図に向き、WebPは写真・図の両方で容量を抑えられる場合があります。「WebP変換」では作成方法と既存画像への適用を詳しく説明しています。
最適化プラグインで自動圧縮するなら、元画像を残すか、既存画像へ一括適用するか、外部サーバーへ送信するかを確認します。一括変換の前にバックアップを取り、代表的な写真、透過画像、文字入り図で画質を比較します。画質だけでなく、実際のページがWebPを配信しているかもネットワーク欄で確認してください。
WebPへの変換方法、既存画像への適用、実際にWebPが配信されているかの確認手順は、次の記事で詳しく解説しています。
ファイル名・alt・キャプションを設定する
アップロード前のファイル名は、画像内容が分かる半角英数字とハイフンを使うと管理しやすくなります。アップロード後にメディアのタイトルだけを変えても、通常はファイルURL自体が自動変更されません。
altは画像が伝える情報を、周囲の文章と重複し過ぎない短い言葉で表します。装飾だけなら空のaltが適切です。キャプションは撮影条件、出典、図の補足など、画面上で読者に見せる説明に使います。画像タイトル属性をaltの代わりにしないでください。
画像がぼやける・重い・表示されない場合
ぼやけるときは、表示幅より小さい元画像や中間サイズを拡大していないか、強い圧縮をかけていないかを確認します。重いときは開発者ツールで転送された画像の寸法と容量を調べ、フルサイズ指定、背景画像、未圧縮PNGを見直します。
表示されないときは「画像がアップロードできない場合」を参考に、まずメディアライブラリにファイルが存在するか、URLが404になっていないか、形式・権限・アップロード上限に問題がないかを調べます。最適化CDNを使う場合は、元画像では表示できるかを試します。HTTPページにHTTPSでない画像を埋め込むなど、混在コンテンツやセキュリティ設定による遮断もブラウザーコンソールで確認できます。
よくある質問
可能かどうかはWordPressの画面に表示される最大アップロードサイズ、PHP、Webサーバー、ホスティング契約で変わります。アップロードできても本文画像としては重いことが多いため、寸法と容量を最適化します。
拡大表示や細部確認が必要なら選ぶ場合があります。通常の本文表示では、枠に合う大・中サイズを選び、ブラウザーが適切な候補を取得できる状態を確認します。
テーマ、ブロック、picture要素などで実装できます。ただし、単に2枚を非表示切り替えすると両方を取得する場合があるため、配信方法と代替テキストも含めて設計します。
まとめ
WordPressの画像は、ピクセル寸法、画面上の表示幅、ファイル容量を分けて調整します。本文幅と用途から元画像を準備し、挿入時には適切な解像度を選びましょう。横並びや背景利用は専用ブロックを使い、スマートフォン表示と実際の転送ファイルを確認します。圧縮とWebP化は代表画像で画質を試してから一括適用するのが安全です。