WordPress4.4から導入されたレスポンシブ画像と、その付き合い方について考えてみたいと思います。
ワードプレスのレスポンシブ画像は、どのように動いているのか?
以下のソースは、ワードプレスが出力するレスポンシブ画像のソースに改行を付けたものです。
以下のソースは、記事を表示した時のhtmlソースです
<img src="https://tenman.info/labo/css/files/mark-test-1024x348.jpg" alt="" width="968" height="329" class="alignnone size-large wp-image-6073" srcset="https://tenman.info/labo/css/files/mark-test-1024x348.jpg 1024w, https://tenman.info/labo/css/files/mark-test-300x102.jpg 300w, https://tenman.info/labo/css/files/mark-test-768x261.jpg 768w, https://tenman.info/labo/css/files/mark-test-353x120.jpg 353w, https://tenman.info/labo/css/files/mark-test.jpg 1095w" sizes="(max-width: 968px) 100vw, 968px">
アップロードした画像サイズが、1024x348ですが、width属性は968pxになっていますね。
この968pxは、エディタに入力されたimg要素の画像幅に一致します。
デフォルトで、追加されるsizes属性は、テーマによってさらに最適化をする余地があります。それは、通常のテーマのコンテンツ幅は、ブラウザ幅いっぱいではないことが多いからです。
レスポンシブ画像の仕組み
エディタのメディアの追加から、挿入されるソースは、以下のようなもので、レスポンシブにはなっていません。
<a href="https://tenman.info/labo/css/?attachment_id=6073" class="attachment wp-att-6073"> <img src="https://tenman.info/labo/css/files/mark-test-1024x348.jpg" alt="" width="968" height="329" class="alignnone size-large wp-image-6073" /> </a>
レスポンシブ画像は、フィルターを使って記事が出力されるときに、sizes属性やsrcset属性が追加されます
wp-includes/default-filters.php
add_filter( 'the_content', 'wp_make_content_images_responsive' );
WordPressが出力するソースを模写して、テスト用のソースを作り、実際の挙動を確認する
レスポンシブな画像表示は、img要素に、sizes srcsetを追加して、行うケースと、picture要素を使う2タイプがあります。これらの実際の挙動を確認してみましょう。
img要素にsrcsetにサイズと内容の異なる画像をセットし、実際に画像がどのように切り替わるのか確認します。
<img src="https://dummyimage.com/1095x372/000/fff" alt="" width="1095" height="372" class="responsive alignnone size-full wp-image-42575" srcset="https://dummyimage.com/1095x372/000/fff 1095w,https://dummyimage.com/300x102/369/fff 300w, https://dummyimage.com/768x261/00047a/fff 768w, https://dummyimage.com/644x219/389/fff 644w, https://dummyimage.com/353x120/000642/fff 353w" sizes="(max-width: 1095px) 100vw, 1095px">
等価な内容をpicture要素でも作ります。
<picture class="responsive"> <source media="(min-width:1095px)" srcset="https://dummyimage.com/1095x372/000/fff"> <source media="(max-width:768px) and (min-width:645px)" srcset="https://dummyimage.com/768x261/00047a/fff"> <source media="(max-width:644px) and (min-width:354px)" srcset="https://dummyimage.com/644x219/389/fff"> <source media="(max-width:353px) and (min-width:301px)" srcset="https://dummyimage.com/353x120/000642/fff"> <source media="(max-width:300px)" srcset="https://dummyimage.com/300x102/369/fff"> <img src="https://dummyimage.com/1095x372/000/fff" width="1095" height="372" class="alignnone size-full wp-image-42575" alt="" /> </picture>
IE11等はサポートされていないとなっていますが、上記の両者ともに、画像自体は問題なく表示できます。
picture要素のないのimg 要素、img要素内のsrc属性がある事で、画像の表示が出来ます。これらの属性がない場合は表示されません。
画像表示の検証
img要素とpicture要素の挙動の違い
img要素でのレスポンス画像は、画像のサイズの切り替えだけの場合に使われ、picture要素のレスポンシブ画像は、art directionの場合（ブラウザサイズに連動して画像そのものも変更する場合に）使用するのが常識のようです。
実際にこのページで試してみてください。
PCからこの画像を表示した場合、最初のimg要素を使ったものでは、ブラウザのサイズを狭く変更しても、画像は変化せず。(Chromeの場合)
picture要素を使ったものは、ブラウザのサイズに応じて画像が変化すると思います。（Chrome57で、レティーナではない普通のブラウザ）
変化のみられないimg要素の画像の変化を確認する方法
chromeの場合
- ブラウザの幅を320px位にして
- 画面上で右クリックして、「検証」を選択
- 「Network」タブを表示して
- Disablecache にチェックを入れて
- ブラウザをリロードする
小さなサイズの画像が表示されます。そこから、徐々にブラウザの幅を広げていくと、対応するサイズの画像が表示されます。（img要素だと、一度大きな画像サイズが読み込まれると、ブラウザサイズがさらに大きな画像を読み込む必要がない場合は、再読み込みは行われない模様です）
端末が、レティーナディスプレイかどうかの判別方法
window.devicePixelRatio
自分のPCがレティーナディスプレイかどうか調べるには、右クリックして、「検証」を選択、「Console」タブを表示して、window.devicePixelRatio と入力し、1が返ってくれば、通常のブラウザ
アンドロイド端末（レティーナディスプレイ）と PCでのサイズを320px幅に縮小したもので、どのような見え方になるか確認してみます。
レティーナの場合は、320px幅で、640px以上の幅のサイズが選択され、通常のPCは、320px幅で十分表示可能なサイズになっています。
img 要素を使ったもの picture要素を使ったもので、サイズの違いが発生しているのは、なぜなのか? 疑問は残りますが、、、
Picture要素の場合は、レスポンシブに読み込まれますが、img要素の場合、大きな画像をいったん読みこんでいると、ブラウザ幅が変化しても、再読み込みをしないなら、画像サイズは比較的大きく縮小されるかもしれません。（ランドスケープで開いて、ポートレイトに切り替えても、画像は同じになるので）
画像エディタの画像のクオリティ
wp_editor_set_quality, $default_quality= 82; jpeg_quality
というフィルターがあります。
エディタは、GD,Imagickのどちらかサポートしている仕組みを使うので、それらの特徴が出る場合もあるかもしれない。
レスポンシブ画像の停止
例えば、以下のようなフィルターを使って停止する事もできます。
<?php add_filter( 'wp_calculate_image_srcset', '__return_false' ); add_filter( 'wp_calculate_image_sizes', '__return_false' ); ?>
max_srcset_image_width デフォルト値は1600px
medium_largeレスポンシブなイメージサポートをより有効に活用するために、新しいデフォルトの中間サイズが追加されました。新しいサイズはデフォルトで768pxの幅で、高さの制限はなく、WordPressの他のサイズと同じように使用できます。標準サイズなので、新しい画像がアップロードされたり、サードパーティのプラグインでサイズが再生成された場合にのみ生成されます。
add_filter( 'the_content', 'wp_make_content_images_responsive' );
投稿のメディア挿入ボタンから、medium_largeサイズは、選択肢としては表示されません。
function add_medium_large_size($defaultSizes){
$medium_large= array('medium_large'=> 'Medium Large',);
return array_merge( $defaultSizes, $medium_large );
}
add_filter('image_size_names_choose', 'add_medium_large_size');
フィルターで、選択肢を追加することが出来ます。
AMP(Accelerated Mobile Pages)プラグインとレスポンシブ画像
AMPプラグインでは、picture要素は、表示できないようです。
img要素は表示でき、ブラウザサイズにより画像は切り替わるようです。
おまけ、
画像には、以下のスタイルが適用されます。
img.responsive, .responsive img:hover{
filter:hue-rotate(90deg);
}