imgタグ srcset sizesで、意図した画像にならない。又、スマホで表示された画像を拡大した時大きな画像に差し替えたい。

Question

tabuu様のコメントを参考にDPIをみた所2.0になっていたので1.0にしてみました。
結果：425pxまでは600pxが選択される
768PXまでは768pxが選択される！！！
PC版では300pxが選択される！！！

　　425pxまでが600pxになる以外は望んだとおりの結果となりました！！！。

tabuu様の回答を基にsizesのPC版の要求画像サイズを300pxにしてみました

<img class="alignleft" src="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg" 
	srcset="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg 300w,
		/wp-content/themes/foo-bar/images/foo_bar2_4-600x337.jpg 600w,
		/wp-content/themes/foo-bar/images/foo_bar2_4-768x432.jpg 768w,
		/wp-content/themes/foo-bar/images/foo_bar2_4.jpg 1400w"
	sizes="(max-width: 425px) 100vw,
	       (max-width: 768px) 100vw,
	       (max-width: 820px) 100vw,
		300px" alt="">

ネットワークタブで見てみましたが、300pxでも、600pxの画像が選択されていました。
何がいけないんでしょうか？やはりDPIの設定を行ってないからでしょうか？（もちろんネットワークタブのキャッシュはOFFにしてあります

やりたい事・やってみた事
①今までHTML5でコードを書いてきましたがRetina対応などは、やったことがありませんでしたが、業務上必要になってきたので
色々調べてコードを書いてみましたが、意図した動作とならない。

②また、この対応が成功したとして、スマホで表示されているスマホ用の小さなサイズの画像を拡大操作された場合に、用意してある最大幅の画像を表示するようにしたい。

参考にしたサイト：
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
srcsetとsizes
レスポンシブ画像

試行錯誤して書いてみたコード

<img class="alignleft" src="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg" 
	srcset="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg 300w,
		/wp-content/themes/foo-bar/images/foo_bar2_4-600x337.jpg 600w,
		/wp-content/themes/foo-bar/images/foo_bar2_4-768x432.jpg 768w,
		/wp-content/themes/foo-bar/images/foo_bar2_4.jpg 1400w"
	sizes="(max-width: 425px) 100vw,
	       (max-width: 768px) 100vw,
	       (max-width: 820px) 100vw,
		310px" alt="">

820px以下の時は、Flexboxのrow-wrapで画像が一行で表示されビューポートいっぱいに表示され、
820px以上では、幅300px＋マージン10pxの画像が左に表示され、右にテキストが回り込む仕様です。

Retinaディスプレイの場合は、600pxの画像を表示したいとも考えています。

この状態で、Windows PCのChromeの開発者ツールで各解像度で動作させてみた所

• 425pxまでは、768px幅の画像が選択される（想定では300px画像が選択されると思っていた）
• タブレットの768pxでは、最大サイズのfoo_bar2_4.jpgが選択される（想定では768px画像が選択されると思っていた）
• 820px以上のPC版では600pxの画像が選択される（想定では300pxの画像が選択されると思っていた）

何か書き方がおかしいのでしょうか？もう2日悩んでまして、他に頼るところがなく、こちらに質問させていただいた次第です。

また、この問題が解決したとして、スマホ用に小さく表示された画像を拡大した時はfoo_bar2_4.jpgを表示させ画像が荒くなるのを防ぎたいとも考えております。

手持ちのAndroidスマホ実機で表示すると最大サイズのfoo_bar2_4.jpgが表示されます。Google PageSpeed Insitesでスコアが落ちてしまいました。

何かお知恵をお貸しいただけたら幸いです。

不足情報等、ございましたらご指摘いただければ、出来る限り対応させていただきたいと考えております。
なにとぞよろしくお願いいたします。

Answer 1

・425pxまでは、768px幅の画像が選択される

　（想定では300px画像が選択されると思っていた）

・タブレットの768pxでは、最大サイズのfoo_bar2_4.jpgが選択される

　（想定では768px画像が選択されると思っていた）

Chromeの開発者ツールで「デバイスのピクセル比を追加」を選択するとDPRが表示されます。
DPRが3.0の場合はピクセルは3倍になります。
レティーナは2倍という意味ではありませんのでご注意ください。

例えば、
iPhoneXは375px、DPR2.0　→　750px
iPadは768px、DPR2.0　→　1536px

・820px以上のPC版では600pxの画像が選択される

　（想定では300pxの画像が選択されると思っていた）

sizesで310pxの画像を要求しているので310以上である600が選択されていると思います。

Comments

[nekora]

お忙しい中、ご回答ありがとうございます。
Chromeの開発者ツールで「デバイスのピクセル比を追加」が何処にあるのかわからないので、
Googleで調べてみましたが、探し方が悪いのか見つかりませんでした…どちらにある機能なのでしょうか？

＞レティーナは2倍という意味ではありませんのでご注意ください。
肝に銘じておきます。

[tabuu]

デバイスのツールバーを切り替え(Ctrl + Shift + M)をして、
左側の三点リーダーです。

[nekora]

質問文のほうに追記しましたが、DPIが2.0になってました。
なのでこれを1.0にしてみた所、スマホ以外は、望んだとおりの結果が得られました。
ありがとうございます！！！
後は、スマホの時に600pxの画像が選択されてしまう件を片付ければ、①はクリアーな状況になりました。
これだけでも、大助かりです。無知な者に対してアドバイスくださり、ありがとうございます！！！

[tabuu]

DPIではなくDPRですね。
なお、現在流通しているスマホやタブレットは、ほぼDPR2以上なので425pxや768pxが選択されることは無いと思います。
(iPhone8が辛うじて750px)

[nekora]

DPRだった＞＜恥ずかしい。
よくよく考えてみると、デバッガーで選択できる、
320px、375px、425pxで、100vwの画像を要求しているのだから、DPRが1.0でも
要求サイズより小さいのは候補にならず、次点で大きい600pxが選ばれるというわけですね。
（より数字が近いほうが選ばれると思ってました）
300pxは小さいので次に大きい600pxが選ばれるのが道理ですね。
ようやっと、全てが腑に落ちました。
色々と勉強になりました。②の件は別件になりますので、改めて質問しなおそうかと思います。
お忙しい中ありがとうございました。ベストアンサーにさせていただきます。