写真の見やすさを保ちながら、不要な画像データを減らせます。
作業を始める前に
- 元画像は上書きせず残し、公開用のコピーを用意します。
- 使用する写真の掲載許可・利用条件を確認します。
- 01掲載場所
- 02幅と画質
- 03形式を試す
- 04実際の表示
下の各項目で、判断のポイントと確認方法を説明します。
進め方・判断のポイント 04 STEPS
表示場所の大きさを調べる
トップの横長写真、記事本文、一覧のサムネイルでは必要な比率が違います。まずテーマの説明書と実際の表示幅を確認します。写真を小さく表示していても、元ファイルが大きければ転送量が減るとは限らないため、読み込まれる画像も確認します。
使う場所ごとの比率と幅を整理できました。
公開用の幅と圧縮率を調整する
例えば本文の写真なら横幅1,200px程度を試し、拡大時や高密度画面で不足するかを見て調整します。これは一律の正解ではありません。文字を含む図は輪郭、人物写真は顔の細部を確認し、画質が崩れるほど圧縮しないようにします。
| 項目 | 入力する内容・例 |
|---|---|
| ピクセル数 | 画像の縦横の大きさ掲載場所と高密度表示を考える。 |
| 容量 | KB・MBで表すデータ量画質と読み込みの両方を確認。 |
| 比率 | 横長・正方形・縦長切り抜かれる位置も確認する。 |
必要な画質を保つ公開用画像を用意できました。
形式を内容と環境に合わせる
写真はJPEGやWebP、透過が必要な素材は対応する形式を検討します。WebPの取り扱いはWordPressだけでなくサーバーの画像処理にも関係するため、アップロードとサムネイル生成を一枚で試します。拡張子を変えるだけでは画像形式の変換にはなりません。
選んだ形式でアップロードと表示を確認できました。
本文と一覧で確認する
メディアへ追加して本文に配置し、代替テキストを内容に合わせて設定します。公開後はスマートフォンとPCの両方で、ぼやけ・切れ・縦横比を点検します。画像を差し替えても古い表示が残る場合は、ブラウザーやサーバーのキャッシュを切り分けます。
本文・一覧の両方で適切な画質になりました。
終わったら確認すること
- ページ先頭の重要な画像と、下部の画像では読み込み方も分けて検討します。
途中で困ったときは
何KB以下なら正解ですか？
内容や表示サイズで変わります。同じ見た目を保てる範囲で軽くし、ページ全体の転送量と実際の読み込みを確認してください。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 読む時間は目安です。操作に必要な時間は環境によって異なります。