W3C Validator は、次のコードでエラーをスローしています:
<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">
エラーは次のとおりです。
不適切な値 /images/en-us/news/20140214-01.jpg 1x、/images/en-us/news/20140214-01-mobile.jpg 要素 img の属性 srcset の 640w: 画像 /images/ の幅が指定されていませんen-us/news/20140214-01.jpg. (1 つ以上の画像候補文字列が幅を指定するため (たとえば、画像 /images/en-us/news/20140214-01-mobile.jpg の文字列)、すべての画像候補文字列が幅を指定する必要があります。)
では、ピクセル密度 (1x) の両方の画像を指定するにはどうすればよいですか? 将来的には、高密度ディスプレイ (2x) と幅 640 ピクセル未満のディスプレイ用に 1 つを指定する必要があるかもしれません。つまり、W3C バリデーターを満足させる方法です。
アップデート：
さて、私はそれをもう少しいじりましたが、今ではバリデーターは文句を言わなくなりましたが、正しく機能していないように見えるので、まだ戦いに勝ったとは思いません.
私は今これを持っています：
<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01-mobile.jpg 320w" sizes="(min-width:640px) 1420px, 320px" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">
しかし、現在Chromeでは、画面の幅に関係なく、「-mobile」画像だけが表示されます。幅が 640px を超えるディスプレイに、幅 1420px のフル画像を表示したい。
私は場違いなことが 1 つだけあると推測しています...どんな助けもいただければ幸いです。