WordPressで画像をアップロードするとぼやける原因と対処法

10回中9回は、画像そのものがぼやけているわけではありません。WordPressがアップロード時に画像を縮小し、その縮小版を配信しているのです。WordPress 5.3以降、幅または高さが2560pxを超える画像は、長辺を最大2560pxに抑えた -scaled 版へと自動的に置き換えられます。そして、この小さくなったファイルこそが、ヒーロー画像や全幅ブロック、Retinaディスプレイを埋めるためにテーマが引き伸ばして表示しているものなのです。対処法は、まず実際にそれが起きていることを確認したうえで、しきい値を引き上げるか、表示枠より大きなサイズを必要とする画像のアップロードをやめるかのどちらかです。

なぜ起きるのか

写真をアップロードすると、WordPressは wp_create_image_subsizes()（wp-admin/includes/image.php 内）を実行します。長辺が big_image_size_threshold（デフォルトは2560px）を超えていると、_wp_image_meta_replace_original() を呼び出して your-photo-scaled.jpg を生成し、full サイズがこの縮小版を指すように添付ファイルのメタデータを書き換えます。本来のオリジナルは your-photo.jpg としてディスク上に残り、wp_get_original_image_path() から参照できますが、フロントエンドでこれが配信されることはありません。すべての中間サイズ、そしてすべての srcset 候補は、アップロードしたファイルからではなく、2560pxの縮小版から生成されます。

これがぼやける原因です。全幅ヘッダー用に鮮明な4000pxの画像をアップロードしたとします。WordPressはこれを2560pxに抑えます。標準的なディスプレイで幅1600pxのコンテナに収めるなら問題ありません。しかし2倍のRetina画面では、そのコンテナを鮮明に埋めるためにブラウザはおよそ3200の実ピクセルを必要としますが、実際には2560しかないため、足りない分を引き伸ばして補います。結果として輪郭が甘くなり、画像内の文字がにじみ、まさに「アップロードするとぼやける」という症状が現れます。

同じ問題のもう半分は、srcset が小さすぎるサイズを選んでしまうケースです。テーマが報告するコンテンツ幅が実際の表示枠と一致していないと、WordPressはブラウザに -1024x683 や -1536x1024 の中間サイズを渡し、それが引き伸ばされてしまいます。原因は同じ（表示枠が利用可能なピクセル数より大きい）で、きっかけが違うだけです。

WordPressが実際に配信したものを確認する

推測で判断しないでください。ぼやけた画像を右クリックして新しいタブで開き、URLのファイル名を確認します。末尾が -scaled.jpg や -1024x683.jpg のような寸法サフィックスになっていれば、確定です。ブラウザはアップロードしたものではなく、縮小された派生画像を表示しています。要素を検証して currentSrc を読めば、ブラウザが実際に選んだ候補を正確に確認することもできます。

再アップロードに取りかかる前に全体像を把握したいなら、その画像を WordPress画像サイズツールにドロップしてみてください。そのファイルからWordPressが生成するすべての派生画像が表示され、-scaled 版が作られるかどうか、作られるならどの寸法かまで分かります。つまり、配置しようとしている場所に対して元画像が十分な大きさかどうかを、事前に把握できるのです。

サーバー上では、縮小されたファイルをすべて一覧表示できます。

find wp-content/uploads -name '*-scaled.*'

直す手順（この順番で）

1. 画像が本当に2560pxより大きい必要がある場合（大きなヒーロー画像、Retina、印刷品質のギャラリーなど）は、しきい値を引き上げます。

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

または、この上限を完全に無効にします。

add_filter( 'big_image_size_threshold', '__return_false' );

2. 該当する画像を再アップロードする。 ここが皆さんの飛ばしがちな手順です。しきい値の変更は新しいアップロードにしか影響しません。すでにライブラリにある画像は古いメタデータのままですし、サムネイル再生成を行っても、中間サイズは縮小された -scaled ファイルから再構築されるだけで、捨てられてしまった解像度が戻るわけではありません。確実な方法は、フィルターを変更し、添付ファイルを削除して、もう一度アップロードすることです。

3. 元画像がすでに2560px以下なのにまだぼやける場合、しきい値は問題ではありません。表示枠が画像より大きいのです。より大きな元画像をアップロードするか、コンテナを小さくしてください。Retinaでの鮮明さを得るには、元画像は表示枠のCSSピクセル幅のおよそ2倍が必要です。

4. 以上をすべて済ませてからサムネイルを再生成する。 これで中間サイズの整合性が取れます。ただし、これは治療ではなく後片付けだと理解しておいてください。

やってはいけないこと

JPEG品質を100まで上げない。 WordPressは wp_editor_set_quality を通じてデフォルト品質82で圧縮しており、ネット上のアドバイスの半分はこれを上書きするよう勧めてきます。

add_filter( 'wp_editor_set_quality', function () { return 90; } );

圧縮ノイズを減らす目的ならこれで構いませんが、引き伸ばされてアップスケールされた画像は圧縮の問題ではなく解像度の問題です。82から100に上げてもファイルが肥大化するだけで、目にしている甘さにはほとんど効果がありません。

反射的に -scaled を無効にしない。 上限をオフにするのは（そのためのツールもあります）、2560pxを超える画像を配信している場合には正しい判断です。ですが、本当の問題が小さすぎる中間サイズの引き伸ばしにあるなら、無効化しても何も変わらず、帯域幅の節約を無駄に失うだけです。まず診断してください。

キャッシュのせいにしたり、先にサムネイルを再生成したりしない。 再生成は同じ縮小済みの元画像から読み込むため、ディテールを復元できません。CDNやページキャッシュをクリアしても、そもそもディスク上で小さかったファイルには何の効果もありません。

テーマのCSSや object-fit に手を伸ばさない。 どれだけスタイルを当ててもピクセルは増えません。配信されているファイルの末尾が -scaled や寸法サフィックスなら、問題はレイアウトではなくファイルにあります。

それでも解決しない場合

配信されているファイルがフル解像度のアップロードそのもの（-scaled なし、寸法サフィックスなし）だと確認できたのにまだ甘い場合は、プラグイン（画像最適化ツール、CDNの画像リサイザー、遅延読み込みライブラリなど）が src を圧縮プロキシに書き換えていないか確認してください。画像を画像サイズツールに通してWordPressが本来生成すべきものを確認し、それをブラウザが実際に読み込んでいるものと比較します。この2つが食い違っているなら、WordPressとブラウザの間にある何かが原因です。