レスポンシブ イメージで Bootstrap を使用しています。ブラウザに複数の画像サイズを提供することで、読み込み時間を最適化したいと考えています。この記事によると、このような srcset を使用した単純なアプローチは、ブラウザーに最適な画像サイズを選択させるのに適しています。
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
私の問題は、これを Bootstrap img-responsiveクラスと組み合わせると、小さいサイズの画像だけが必要な場合でも大きなサイズの画像が読み込まれることです。
ここでのコード例: Bootply . テストには Chrome を使用してください。Chrome には srcset サポートのサポートが組み込まれています。(他の一部のブラウザでは、picturefill.js を認識する必要があります。)
画像のソースをコピーすると (または [ネットワーク] タブの Chrome 開発者ツールを見ると)、幅 750 のバージョンが読み込まれ、小さな画像にサイズ変更されていることがわかります。使用する。(picturefill JS が img srcset をサポートするためにロードされている場合、IE と Firefox でも同じことが起こります。)
私は何を間違っていますか？