WordPressの画像が切れる・ぼけるとき｜原本・派生画像・表示枠の確認手順

WordPressの画像が切れる、ぼける、横に伸びるときは、写真を何度も入れ直す前に、元の画像、WordPressが作るサイズ別画像、ページ上の表示枠を分けて確認します。PCでは正常でも、スマホの枠や読み込む画像が違う場合があります。

この記事では、企業の更新担当者が素材と表示を比べる方法と、制作担当が画像サイズ・CSS・読み込む候補を調べる手順を整理します。最大サイズをすべてのページへ配る、原本を上書きする、といった一律の対応を避け、読者が必要な内容を見られる状態を検収します。

1. 切れる、ぼける、ゆがむを分ける

まず、困っているURL、画像の位置、端末と画面幅を記録します。顔や文字が欠けているのか、全体は見えるがぼけているのか、縦横の比率が変わっているのかを分けると、調べる設定が明確になります。

ぼけは、WordPressだけが原因とは限りません。元から低解像の写真、圧縮された素材、小さい画像の拡大、表示枠等を確認します。別の古い画像が出る問題は、画像差し替えが反映されないときと分けて調べてください。

2. 手元原本、メディア画像、公開枠を比べる

手元の原本を保存したまま、メディアに登録された画像と、公開ページで読み込んだ画像を比べます。画像URLを直接開いた見え方と、ページの枠の中での見え方が違うかを確認してください。

更新担当者が確認できること

元の写真に必要な範囲が写っているか、選んだメディアが正しいか、切れる場所が一覧と本文で違うかを見ます。原本に写っていない範囲は、表示設定を変えても戻りません。先に必要な写真を選び直す場合もあります。

制作担当が確認すること

登録したメディア、出力した画像URL、使ったサイズ、表示枠の寸法とCSS、ブラウザーが実際に読んだ画像を照合します。同じ画像名でも、用途によって別サイズを参照します。対象のURLやIDを記録し、画像を入れ直して調査状況を消さないようにします。

画像URLを直接開く際も、公開してよい素材かを確認してください。非公開の資料を、問題確認のために公開メディアへ上げる必要はありません。商品、人物、資料のどこを読者へ見せるかを自社で決め、実装側へ渡します。

3. WordPressの派生サイズと切り出しを確認する

WordPressでは元の登録画像だけでなく、テーマ等で使うサイズ別画像が作られます。一覧では切り出した画像、本文では大きな画像を使うなど、同じメディアから違う表示が出ることがあります。

WordPress公式のadd_image_sizeは、追加サイズの幅と高さ、切り出しの有無や位置を扱います。wp_get_attachment_imageは、指定したサイズ等から画像要素を出力する関数です。何を生成し、どれを公開側へ出すかを制作担当が確認します。

サイズの設定を変えたら、必要な派生画像が対象メディアにあるかも確かめます。設定値を変えただけで、すべての既存画像の見え方が変わったと判断しないでください。再生成が必要なら、原本と現在の参照先を残し、対象と方法を決めて試します。

不要に見える派生画像も、他の記事や共有部品から使われている可能性があります。容量削減のための一括削除を先に行わず、未添付画像の使用先と派生画像の確認で参照を調べます。

4. object-fitと位置は、画像の用途から決める

登録された画像が正しくても、表示枠の幅と高さ、CSSでの収め方によって端が見えなくなる場合があります。写真を枠全体へ見せたいのか、枠を埋めたいのかを先に決めてください。

MDNのobject-fit説明では、containは比率を保って全体を枠内へ収め、coverは比率を保って枠を満たすため、枠と比率が違えば一部が切れます。fillは枠へ合わせて伸びるため、元の比率を維持しません。

object-positionは枠内の配置位置を調整するために使います。切り出し済みの画像へ位置を変えても、失われた部分は戻りません。必要なら別の派生サイズや素材を選びます。共通CSSを変える場合は、この画像以外にも適用される範囲を確認してください。

5. srcsetとsizes、実際に読んだ画像を照合する

画像要素に複数の候補を指定していても、ブラウザーがどれを読むかを確かめなければ、表示する画像を判断できません。画面幅や端末条件が違うと、同じURLのページでも選択が変わる場合があります。

候補と、表示幅の説明を確認する

MDNのレスポンシブ画像の説明は、srcsetとsizesを使って画像候補と表示に必要な条件を伝える方法を示しています。制作担当は、ページの実際の表示幅と、指定した条件が一致しているかを見ます。

WordPressの画像出力関数もsrcsetとsizesを扱いますが、独自テンプレートや追加コードの出力が同じとは限りません。全画像が自動で適切になると決めず、公開HTMLと実際の読み込みを確認します。

拡大と画質、容量を一緒に見る

小さい画像を大きく表示すると、必要な細部が読めない場合があります。表示幅だけでなく、端末の画素密度や元素材の画質も確認します。ただし、最大の原本をすべての用途へ配ればよいわけではありません。必要な見え方と通信量を用途ごとに比較します。

画像が大きすぎる問題やページ全体の測定は、表示速度改善の確認手順を使えます。画質の修正とページ速度の改善を、それぞれ必要な測定で評価してください。

6. 一覧、本文、スマホと境界幅を検収する

素材や実装を変更する前に、原本、現在の出力と設定、対象ページ、戻し方を保存します。反映後は、直した枠だけでなく、同じメディアやCSSを使う一覧、本文、関連部品も確認します。

代替テキストは画像の意味を伝えるもので、切れた文字を読める状態にする代わりではありません。画像中の重要情報が小さすぎるなら、本文に内容を併記する、読みやすい資料形式へ分ける等も検討します。

キャッシュを消したという報告だけで終えず、公開ページで出力値と見え方を読み戻します。未確認の幅や残る制限は、次の担当へ残してください。

7. Acquaへは、用途と必要な見え方を共有する

企業は、画像で何を伝えるか、どの部分を欠かせないか、差し替え可能な素材があるかを整理します。企業のWeb運用支援として、写真と掲載位置、更新の条件、公開表示の確認を相談できます。

制作会社は、WordPress等の実装支援として、デザインの枠、登録するサイズ、切り出し位置、幅ごとの出力、再生成と検収の範囲を共有できます。素材の承認、デザインの判断、実装作業を分け、顧客へ必要な確認を返します。

相談窓口には、対象URL、画像の位置、端末と幅、切れる・ぼける箇所、必要な見え方を概要で伝えてください。原本の受け渡しや権限、対応範囲、費用は個別に確認します。現状と必要な見え方を比べられる資料があると、対象と検収条件を整理しやすくなります。

8. 読者が画像の内容を判断できる状態にする

完了は、写真を入れ直したことや、見た目がそろったことだけではありません。必要な対象や文字が見え、用途に合う画質と表示があり、更新担当が次の画像でも方法を再現できる状態を確かめます。

原本、登録条件、枠と焦点、確認結果、残る制限を引き継ぎます。画像を使って読者が理解できたか、更新のやり直しが減ったか、表示の負担が変わったかは別の実測で確認します。画像の差し替え件数を、検索順位や受注成果へ置き換えません。

参考にした一次資料：

• WordPress：add_image_size
• WordPress：wp_get_attachment_image
• MDN：object-fit
• MDN：レスポンシブ画像