モバイルに移行したときにレスポンシブ画像を切り替えようとしています。現時点では、picturefill.js と srcset とサイズを使用して切り替えを行っていますが、画像は以下で使用されるコードから切り替えられません。
<img srcset="/images/marketing/large.png 1190w, /images/marketing/mobile.png 320w"
sizes="(min-width: 767px), (max-width: 768px)"
alt="A rad wolf"
class="img-responsive" />
サイズ属性が無効です。size 属性を使用して、画像要素の表示幅を定義します。また、メディア条件を使用して、さまざまなブレークポイントを定義できます。メディア条件のみを使用していますが、サイズを追加しないでください。
例：
sizes="(min-width: 767px) 760px, 100vw"
つまり、ビューポートが 767 より大きい場合、画像は 760px で表示されます。それ以外の場合は、フル ビューポートになります。
さらに、一致する最初のメディア条件が取得されるため、最小幅と最大幅を混在させる必要はありません。max-width または min-width を使用する方がはるかに簡単です。
sizes="(min-width: 980px) 980px, 100vw"
max-width で説明されているのと同じサイズ:
sizes="(max-width: 980px) 100vw, 980px"
サイズを自動的に追加するlazySizesを使用することもできます。