WordPress 4.4で、スマホやタブレットで画像がぼやけるのを治す方法（レスポンシブイメージの停止方法）

WordPress4.4で実装されたレスポンシブイメージ。

レスポンシブイメージを簡単に説明すると、
画像をアップロードして記事投稿する時に、
ワードプレスが自動的に様々な端末に合わせたサイズの画像を複数作成してくれて、
見てる端末に合わせて表示を切り替えてくれる、というものです。
（現状まだ対応していないブラウザがあったり、環境によって挙動が怪しかったりします）

画像をアップした時に自動で作成されるHTMLコードの例

例えばMinimal WPのテーマで一番使いやすい960×640pxのimg画像を記事に投稿すると、

<img src="http://exsample.com/upload/img.jpg" alt="img" 
width="960" height="640" class="alignnone size-full wp-image-xxxxx">

という感じに今までのHTMLコードは出力されていたのが、
WP4.4からはコードが以下のように自動で書き変わります。

<img src="http://exsample.com/upload/img.jpg" alt="img" 
width="960" height="640" class="alignnone size-full wp-image-xxxxx" 
srcset="http://exsample.com/upload/img-420x280.jpg 420w, 
http://exsample.com/upload/img-630x420.jpg 630w, 
http://exsample.com/upload/img.jpg 960w" 
sizes="(max-width: 960px) 100vw, 960px">

『srcset』以下に端末振り分け用の各サイズの画像リストが自動で用意されます。

「コンテンツ幅が420pxまでの時はimg-420×280.jpgを表示して、
630pxの時はimg-630×420.jpgを表示して、最大は元画像の960pxを表示する」という感じで、
見てる端末に合わせて自動的に表示する画像を変更してくれます。
まさにレスポンシブ画像なわけです。

★

さらに例えば、960px四方のimg画像をアップすると、コードが以下のようになります。

<img src="http://exsample.com/upload/img.jpg" alt="xxxxx" 
width="960" height="960" class="alignnone size-full wp-image-xxxxx" 
srcset="http://exsample.com/upload/img-280x280.jpg 280w, 
http://exsample.com/upload/img-630x630.jpg 630w, 
http://exsample.com/upload/img.jpg 960w" 
sizes="(max-width: 960px) 100vw, 960px">

★

さらにさらに例えば、適当なサイズで1656×875pxのimg画像をアップすると、コードが以下のようになります。

<img src="http://exsample.com/upload/img.jpg" alt="xxxxx" 
width="1656" height="875" class="alignnone size-full wp-image-xxxxx" 
srcset="http://exsample.com/upload/img-420x222.jpg 420w, 
http://exsample.com/upload/img-630x333.jpg 630w, 
http://exsample.com/upload/img-960x507.jpg 960w,  
http://exsample.com/upload/img.jpg 1656w" 
sizes="(max-width: 1656px) 100vw, 1656px">

という感じで、このリストに自動で用意される画像サイズは、
設定＞メディア設定で指定した画像サイズと、アップした元画像サイズの関係で決まるようです。

ちなみにMinimal WPのテーマのメディア画像サイズ設定のおすすめは以下の通り。
（テーマによって若干異なりますので、テーマ詳細ページの表示サイズを参考にどうぞ）

・サムネイル 幅420 高さ280
・中サイズ 幅630　高さ0
・大サイズ 幅960　高さ0

この設定で画像を投稿すると、例のコードの感じになります。

ただレスポンシブなのとRetina対応なのはまた別の話なので、
この場合、一部の高解像度ディスプレイのタブレットで閲覧した場合は、
作成した画像によっては若干ボヤけてみえるかもしれません。

スマホやタブレットで画像がぼやけるのを治す方法（WP4.4レスポンシブイメージの停止方法）

この機能は、サイトの表示速度が速くなることもあるのでいい面もありますが、
メディア設定や画像作成のサイズをコンテンツ幅を無視した適当なサイズにしてしまっていると、
スマホやタブレットのサイズによっては小さい画像が表示されてボヤけて見えてしまったり、
または高解像度ディスプレイ用に倍サイズの画像でいつでも綺麗に表示させたい！という場合等、
まだまだ使い勝手が良くない場面もあるかもしれません。

新しい機能なので、まだちょっと意味がよく分からないとか、
いっそのこと停止したいという時は、以下の方法でこの機能をストップ出来ます。

add_filter('wp_calculate_image_srcset','__return_false');
add_filter('wp_calculate_image_sizes','__return_false' );

または、

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

をfunctions.php内に追記するとレスポンシブイメージの機能が停止します。

ー

よっぽど停止する必要はない気がしますが、
年々どんどん進化してるので、徐々に使いやすくなっていくと思われます。

＊HTML/CSSの変更を伴うテーマ編集に関しては、無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします！