WordPress画像サイズの決め方｜本文・アイキャッチの寸法と画質を整える

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

WordPressへ画像を入れたら文字がぼけた、一覧では顔が切れた、ページが重くなった。どれも「画像サイズ」の悩みですが、直す場所は同じとは限りません。最初に、画像の縦横のピクセル数、表示枠の縦横比、ファイル容量を分けると、必要な作業が見えてきます。

この記事では、本文写真、アイキャッチ、文字入り図解を想定し、表示場所の確認から素材の加工、WordPressへの配置、端末での点検までを順番に説明します。特定テーマの必須サイズを断定する記事ではありません。数値を使う場面は独自の説明例で、制作画面や掲載図版は説明用の生成イメージです。実在サイトの速度を測定した結果ではありません。

WordPressの画像サイズは「寸法・縦横比・容量」を分けて考える

ピクセル数が大きいことと、画面で大きいことは違う

画像の寸法は、横と縦にいくつの点が並ぶかを表します。横1200ピクセル・縦800ピクセルの画像でも、ページ上で横600ピクセルの枠に収めれば、画面ではその枠に合わせた大きさになります。元ファイルの寸法と、ブラウザーでの表示幅を別々に控えてください。

ここを混同すると、見た目を小さくしただけで容量も減ったと思いがちです。大きな画像をページ上で縮めていても、読み込むファイルまで小さいとは限りません。反対に小さな画像を幅いっぱいに引き伸ばすと、輪郭や文字がぼけることがあります。編集画面の見かけだけで、素材が十分かどうかを決めないことが大切です。

まず画像ファイルの情報で寸法を確認し、次に掲載先の表示幅を確認します。初心者なら「原本2400×1600、本文枠は約800」といったメモで構いません。単位を書き添えるだけでも、容量の800KBと横幅800pxを取り違える事故が減ります。

縦横比は、何を切り取るかを決める条件

縦横比は画像の横と縦の割合です。横1200・縦800なら3対2、横1600・縦900なら16対9になります。同じ横幅でも比率が違えば高さが変わり、見える範囲も変わります。横幅だけを指定しても、記事カードの枠に合うとは限りません。

写真の外周を切り取る「トリミング」と、全体を小さくする「縮小」は別の操作です。人物の顔が切れるときは、容量を軽くするより、枠の比率や切り抜き位置を調べます。横長の写真を正方形のカードに使えば、左右が省かれる場合があります。大切な被写体を中央付近に残すなど、表示枠を見越した構図が必要です。

縦横比を無視して横と縦を別々に伸ばすと、顔や商品が不自然に変形します。指定された寸法と写真の比率が合わないときは、切り抜く、余白を足す、別素材へ替えるのどれが内容に合うかを考えましょう。商品形状を正確に伝える画像では、変形して枠を埋める方法を選ばないようにします。

ファイル容量は、画質との釣り合いで考える

ファイル容量はKBやMBで表示されるデータ量です。写真の細かさ、色の変化、保存形式、圧縮設定などによって変わります。同じ1200×800ピクセルでも、青空が大部分の写真と細かい葉が密集した写真では、同じ容量になるとは限りません。

「すべて100KB以下」のような数字だけを目標にすると、細い文字や図の線が崩れる場合があります。大切なのは、読者に必要な情報が読み取れる状態で、不要な大きさを減らすことです。画像一枚の軽さだけでなく、そのページに何枚置くか、説明に本当に必要かも見直します。

例えば200KBの画像を10枚置くと、画像ファイルの単純合計は約2MBです。これは通信時間の実測ではなく、画像に使っている量を把握するための計算例です。読み込み方式や通信環境で実際の挙動は変わりますが、一枚ずつ整えることと、ページ全体を見渡すことの両方が必要だと分かります。

※表は横にスクロールできます。

全サイト共通の正解サイズを探し続けない

WordPress.comの画像最適化の公式ガイドも、推奨サイズはテーマやレイアウトなどに左右されると説明しています。WordPress.comはホスティングサービスで、自分でサーバーへ設置したWordPressとは設定画面や利用機能が異なる場合がありますが、掲載先に合わせるという考え方は参考になります。

他サイトの「本文は横1200」という数字は、そのサイトの制作上の目安かもしれません。自分の本文幅が狭ければ必要以上に大きくなる可能性があり、全幅表示なら不足する可能性もあります。まず自分のテーマの説明を読み、通常の本文、横幅の広いブロック、一覧カードを一つずつ確認しましょう。

ブログの運用を始めたばかりなら、写真・図解・アイキャッチの三種類について仮ルールを作り、代表的な一記事で点検する方法がおすすめです。問題がなければ次の記事にも使い、テーマ変更時に見直します。最初から全種類を細かく固定するより、実際の表示で調整できる余地を残します。

本文・アイキャッチ・記事カードの表示幅から寸法を決める

本文の最大幅とスマートフォンの表示を確認する

本文画像は、本文を読むための幅に合わせます。サイドバーがあるページと、サイドバーのないページで幅が違うテーマもあります。記事編集画面だけでなく、実際のページのプレビューで確認してください。テーマに画像の推奨寸法があれば、それを出発点にします。

分かる人はブラウザーの開発者ツールで表示寸法を調べられますが、初心者が最初から数値を細かく追う必要はありません。同じ写真を本文へ一枚入れ、パソコンの広い画面とスマートフォンの縦向きで、ぼけやはみ出しがないか見ます。何の画面で確認したかを記録すれば、後の比較がしやすくなります。

端末の画素密度によって、表示幅より多いピクセル数を用意すると輪郭がきれいに見えることがあります。ただし「必ず2倍」と機械的に決めず、原本の状態と容量を合わせて確認します。もともと小さな写真を拡大しても、失われていた細部がそのまま戻るわけではありません。

アイキャッチは一覧・記事上部・共有先を別々に見る

アイキャッチは、設定した画像が一か所だけで使われるとは限りません。記事一覧では横長カード、関連記事では小さな正方形、記事上部では大きな横長というように、テーマによって使い方が変わります。一つの表示だけを見て完成にしないことが重要です。

例えば、画像の左端へ長い見出しを置くと、一覧の中央トリミングで頭の文字がなくなるかもしれません。被写体も文字もぎりぎりまで詰めず、端に余裕を残します。余裕の量はテーマにより違うため、実際のカードで試して調整しましょう。単なる装飾の端が切れることと、結論の文字が切れることは重要度が違います。

SNSで共有した際の画像は、テーマやSEO機能のOGP設定が関係することがあります。アイキャッチを変えたのに共有画像が同じでも、直ちにWordPressへの保存失敗とは限りません。本文表示、一覧表示、SNS共有を別の確認項目にして、どの場所で違いが出たかを整理します。

文字入り図解は、縮めた後に読めるかを先に試す

図解で一番避けたいのは、元画像では読めるのに記事の中では小さすぎる状態です。横幅が十分でも、文字の量が多ければスマートフォンで読みづらくなります。画像全体の寸法を増やす前に、情報を分けられないか考えてください。

たとえば10工程を一枚に詰めた図は、5工程ずつ二枚にする、全体図は3区分にして細かい手順を本文へ出す、といった整理ができます。文字を画像へ埋め込むと、読者が文字サイズを変える操作に追従しない場合もあります。必須の条件や注意点は、図だけに閉じ込めず本文にも書きます。

制作中は、完成予定の画像を実際の本文幅に近い大きさで表示して確認しましょう。拡大表示のまま作業を続けると、細い補助線や小さなラベルに気づきにくくなります。「一番小さい文字を、拡大せずに読めるか」を確認するだけでも、修正すべき場所が明確になります。

※表は横にスクロールできます。

仮の寸法ルールを作り、例外を分ける

運用ルールは「すべて同じ寸法」より「同じ役割なら同じ出発点」にすると使いやすくなります。本文写真は横長、人物プロフィールは正方形、縦に長い操作説明は分割する、といった分け方です。見た目を揃えることと、必要な情報を削らないことを両立できます。

仮に本文の表示幅が800ピクセル前後のブログで、写真を1600ピクセル幅から比較する場合を考えます。これは独自の仮定例で、WordPressの必須値ではありません。写真一枚をアップロードして端末表示と容量を見たうえで、1200幅でも十分か、1600幅が必要かを判断します。

例外は台帳へ一行残します。「細かい配線図なので幅を大きくした」「縦の書類は読めないため部分拡大へ分割した」と理由を添えると、次の担当者も判断できます。理由のない例外を増やさない一方で、サイズ統一のために内容を読めなくすることも避けてください。

写真・文字・透過の違いから保存形式と画質を選ぶ

写真は輪郭とグラデーションを比較する

写真の保存では、JPEGやWebPなどの候補を実際に見比べます。圧縮の強さを変えたら、空のなだらかな色、髪の毛、木の葉、暗部のざらつきなどを確認してください。同じ設定値でも、素材によって劣化の目立ち方は変わります。

品質設定の数字は、ソフトをまたいで同じ意味になるとは限りません。「品質80なら大丈夫」と数字だけを使い回さず、そのソフトで作った出力結果を見ます。比較時は同じ寸法に揃え、ファイル名に候補A・Bなどを付けておくと取り違えにくくなります。

写真が記事の主な判断材料なら、細部の消失に注意します。製品の傷、手作業の状態、色の違いを説明しているのに、それが圧縮で見えなくなれば目的を果たせません。背景写真と検証用写真を同じ基準で扱わず、「読者はこの画像から何を知るか」に戻って判断します。

文字や線が多い画像は、縁のにじみを見る

表、操作画面、細い線を含む図では、文字の縁が重要です。JPEGで強く圧縮すると、白地に黒い文字の周囲が汚れたように見える場合があります。PNGや可逆圧縮の選択肢も含め、容量と読みやすさを比較しましょう。

MDNの画像形式ガイドでは、形式ごとの圧縮特性や透過などの対応が整理されています。ただし、形式名だけで最小容量や最高画質が決まるわけではありません。記事に使う画像そのもので比較することが、遠回りに見えて確実です。

図の文字が潰れるときは、形式変更だけでなく、文字を大きくする、線を太くする、背景の模様を減らす方法も検討します。拡大すれば何とか読める画像より、読者がそのまま理解できる図の方が扱いやすくなります。元データを残しておけば、文字や配置から直せます。

透過画像と背景付き画像を取り違えない

背景を透明にしたいロゴや切り抜き画像では、透過を維持できる形式を選びます。透明なつもりだった部分が白くなる、暗い背景に置いたときだけ縁が目立つ、といった問題は、書き出しと掲載背景の組み合わせで確認してください。

市松模様が見えている画像は、透明を示す編集画面の場合と、市松模様自体が画像に描き込まれている場合があります。見た目だけで判断せず、別の色の背景へ置いて確かめます。配布素材を使う場合は、プレビュー画像ではなく利用を許された元ファイルを入手しましょう。

写真の角を丸く見せるためだけに、無理に背景を透過させる必要はありません。テーマやブロックの装飾で対応できる場合もあります。画像側で焼き込む見た目と、サイト側で付ける見た目を分けておくと、テーマ変更後の修正量を減らせます。

※表は横にスクロールできます。

WebPやAVIFは、サイトの対応環境も確認する

新しい画像形式を使うときは、ブラウザーで開けることに加え、WordPressとサーバーが処理できるかを確かめます。原本のアップロードはできても、必要な縮小画像が作られないなど、処理段階で問題が出る場合があるためです。

WordPress公式のAVIF対応の案内では、WordPress 6.5以降の対応に加え、ホスティング環境の画像処理ライブラリによる対応条件を説明しています。バージョンの数字だけで使えると断定せず、サーバーの案内やサイトヘルス情報を確認してください。

最初は一枚で試し、メディア画面、本文、一覧、別端末まで表示を確認してから増やします。変換プラグインやCDNが別形式へ変えて配信しているサイトでは、手元のファイルと実際の配信形式が違うこともあります。仕組みを把握せず複数の変換機能を重ねないようにしましょう。

元に戻せる比較をしてから採用する

「軽くなった」という理由だけで、元画像をすぐ削除しないようにします。掲載後に図の文字を直したい、別の比率に切り抜きたい、別媒体へ使いたいという場面で、圧縮済み画像だけでは選択肢が狭くなります。

比較の記録は、原本名、出力寸法、形式、品質設定、容量、見た目の判定を一行にまとめるだけで十分です。写真は候補A、文字図は候補Bというように、素材ごとの判断を残します。どの設定がいつも優秀かを決めるためではなく、今回の画像を選んだ理由を説明するための記録です。

素材の利用許可や購入情報も、元ファイルと一緒に管理しましょう。形式を変えたり小さくしたりしても、権利の条件がなくなるわけではありません。記事への掲載、商用利用、加工の可否などを利用元の条件で確認し、必要な表示を本文やキャプションへ用意します。

原本から切り抜き・縮小・書き出しを進めてWordPressへ配置する

作業前に原本と完成品の置き場所を分ける

画像作業を始める前に、原本、編集中、掲載用の置き場所を分けます。複雑な管理ソフトは不要で、記事ごとのフォルダの中に三つの箱を作る程度でも役立ちます。掲載用だけを見れば、どの画像を使うか分かる状態にしてください。

例えば「記事名_本文01_1600x900.webp」のように、用途や順序が分かる名前を使います。個人名、顧客名、未公開案件名などをファイル名へ入れてよいかも確認しましょう。Webへアップロードした名前は、URLの一部として見える可能性があります。

スマートフォン写真や顧客から受け取った素材には、位置情報などのメタデータが含まれることがあります。公開用のファイルを作る際は、内容と付随情報の両方を点検してください。WordPressへ入れればあらゆる情報が必ず消える、とは考えない方が安全です。

切り抜き位置を決めてから最終寸法へ縮小する

先に表示枠の縦横比を決め、その比率で写真を切り抜きます。人物の顔、手元、商品、矢印の先など、説明の中心が残っているか確認してください。縮小後にもう一度大きく切り抜くと、必要なピクセル数が足りなくなる場合があります。

切り抜くと意味が変わる画像にも注意が必要です。作業の安全設備、製品のサイズ比較に使う物差し、条件が書かれた表示などを省くと、写真の受け取られ方が変わることがあります。見栄えのためのトリミングと、説明に必要な情報の保持を同時に考えましょう。

位置が決まったら、縦横比を固定して最終寸法へ縮小します。書き出した画像を何度も開いて再圧縮するより、原本や編集可能なデータから出力し直す運用にすると、変更の履歴を追いやすくなります。試し書き出し自体は何度しても構いませんが、毎回どの元データから作ったかを明確にします。

書き出したファイルを開いてからアップロードする

書き出し画面で設定しただけでは完了ではありません。実際の完成ファイルを開き、寸法、向き、透過、文字、容量を確認します。フォルダ内に古い版が混ざっていないか、同じ名前の別形式を取り違えていないかも見ましょう。

画像を開いたアプリが自動で縮小表示している場合、欠点に気づかないことがあります。実寸に近い表示と、記事に載る小さい表示の両方で見ます。前者は圧縮のにじみ、後者は文字の読みやすさや構図の確認に向いています。

アップロード時に警告が出たら、形式、容量、画像処理の対応などを一つずつ確認してください。拡張子だけを別形式へ書き換えても、画像データの変換にはなりません。エラーを避けるために名前だけ変更するのではなく、対応するソフトから正しい形式で出力します。

※表は横にスクロールできます。

メディア設定と挿入時のサイズを区別する

WordPressのメディア設定の公式説明では、サムネイル、中サイズ、大サイズの寸法や、サムネイルの切り抜き設定が整理されています。一方、テーマが独自の画像サイズを追加している場合もあります。設定画面の三つの値だけが、サイトの全画像を決めるとは限りません。

また、画像ブロックで小さい派生画像を選んだまま大きく表示すると、元ファイルが高解像度でもぼけて見える可能性があります。大きな画像を再制作する前に、挿入時に選んだ解像度や表示幅を調べましょう。原本、生成されたサイズ、選択中のサイズという三段階で見ると整理できます。

メディア設定の変更だけで、過去にアップロードした全画像が期待どおり作り直されるとは考えないでください。既存画像の再生成や一括変換は、バックアップ、保存容量、処理時間、テーマの利用サイズを確認してから検討します。新規一枚の問題のために、過去の全画像を一度に変更する必要はありません。

代替テキストとキャプションも役割で付ける

画像を配置したら、何を伝える画像なのかを文章でも整理します。代替テキストは、画像が伝える内容を文脈に合わせて説明するものです。記事のキーワードを機械的に何度も入れる場所ではありません。隣の本文と合わせて、画像がなくても重要な意味が伝わるか考えてください。

WordPressの画像ブロックの公式ガイドには、代替テキスト、キャプション、サイズや縦横比などの設定がまとまっています。利用中のバージョンやテーマにより表示される項目が違う場合があるため、名称と目的を照合しながら操作します。

たとえば「原本と切り抜き後の比較」という図なら、何が残り何が切れたかを説明します。出典、補足条件、生成イメージであることは、必要に応じて読者に見えるキャプションや本文へ書きます。代替テキストを設定しただけで、画面上の注意書きを省略しないようにしましょう。

ぼけ・切れ・重さを点検し、画像を増やしても管理できる状態にする

ぼけるときは、原本から配信まで順に見る

ぼけを見つけたら、まず手元の完成ファイルを開きます。ここで既にぼけているなら、原本の解像度、切り抜き後の寸法、圧縮設定を確認します。手元ではきれいなら、WordPressで選んだ画像サイズや、テーマによる表示の拡大を調べます。

次に、どの端末、どのページ、どの表示場所で起きるかを記録します。本文では鮮明で関連記事だけぼけるなら、カード用画像の選択が関係しているかもしれません。どこでもぼける場合と分けることで、変更する範囲を小さくできます。

キャッシュや画像配信機能がある場合は、古い版を見ている可能性も確認します。ただし、キャッシュを消せば必ず直るわけではありません。画像URLや更新時刻などを見て、新しい画像が読み込まれているかを確かめてから、次の原因へ進みます。

切れるときは、枠と被写体の位置を調べる

画像の端が欠ける場合、元ファイルそのものが切れているのか、表示枠の中で一部が隠れているのかを区別します。メディアライブラリで全体が見えていても、一覧カードでは特定比率に切り抜かれることがあります。

修正方法は、被写体を中央へ寄せる、余白を足す、別の比率の画像を用意する、テーマの表示方法を調整するなどです。どれを選ぶかは、他の画像への影響も含めて判断します。一枚のためにサイト全体のカード比率を変えると、別記事の見え方が崩れる可能性があります。

文字入り画像では、表題を短くして内側へ置く方法が有効なことがあります。それでも一覧で読みにくければ、文字を減らして写真の役割を中心にし、記事タイトルで説明します。カードの中に本文の要約をすべて入れる必要はありません。

重いときは、一枚の容量とページ全体を分ける

画像が重いと感じても、ページが遅い原因を画像だけに決めつけないようにします。大きいファイル、画像枚数、外部の埋め込み、サーバーの応答など、複数の要素が関わります。まず画像の寸法と容量を確認し、不要な大きさや重複掲載がないかを見ます。

改善前後を比べるときは、同じページ、同じ端末、できるだけ近い通信条件で確認します。パソコンの高速回線で見た結果と、移動中のスマートフォンの結果をそのまま比較してはいけません。数値を使う場合も、計測条件を一緒に残すと判断しやすくなります。

画像を整えても運用上の不足が続く場合は、利用中のサーバーの制限やサポート内容を確認します。環境を見直す必要がある方は、副業ブログ向けレンタルサーバーの比較ガイドで、容量だけでなくバックアップやサポートの条件も整理できます。画像一枚が遅いだけで、すぐに契約変更を決める必要はありません。

※表は横にスクロールできます。

引き継ぎでは、サイズの数字と判断理由をセットにする

共同でブログを運用するなら、「横1200でお願いします」だけでは不足することがあります。本文用かアイキャッチか、どの範囲が切れてもよいか、文字を入れるか、原本をどこへ残すかまで渡すと、修正の往復を減らせます。

依頼例は「本文の作業写真3枚。表示枠を確認し、横幅候補を比較。手元の道具が分かる構図を維持。原本と掲載用を分け、最終ファイルの寸法・容量・確認端末を一覧へ記録」といった形です。これは架空の依頼例で、特定の制作会社の標準仕様ではありません。

検品側も「何となく荒い」ではなく、「スマートフォン縦向きで図の右下の注釈が読めない」「記事一覧だけ左端の文字が切れる」と具体化します。再現する場所が分かれば、画像の作り直しとテーマ調整のどちらが必要かを話し合いやすくなります。

最初の一記事で運用ルールを確かめる

画像管理を整えるときに、過去の全記事を一日で直そうとする必要はありません。まず本文写真と図解、アイキャッチがある一記事を選びます。原本を控え、掲載場所を確認し、加工と書き出しを行い、別端末で見て記録するところまで一周しましょう。

その結果から「写真はこの候補を先に試す」「図解は小さく表示してから採用する」「顔と文字はカードの切り抜きを確認する」といったルールを残します。ルールが使えると分かってから、閲覧の多い記事や問題のある記事へ広げれば、無理なく作業を進められます。

ブログ全体の開設や記事運用から整理したい方は、会社員向けの副業ブログの始め方も合わせて確認してください。画像は飾るためだけの作業ではなく、内容を理解してもらうための道具です。寸法、縦横比、容量を分け、最後に読者が見る画面で確かめることを、毎回の完成条件にしましょう。