Адаптивные изображения: img srcset + Bootstrap, загружается изображение неправильного размера

Question

Я использую Bootstrap с адаптивными изображениями. Я хочу оптимизировать время загрузки, предлагая браузерам изображения разных размеров. Согласно этой статье, простой подход к srcset, подобный этому, хорош для того, чтобы позволить браузеру выбрать оптимальный размер изображения:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Моя проблема заключается в том, что в сочетании с этим классом Bootstrap img-отзывчивый загружается изображение большого размера, даже если требуется только небольшое.

Пример кода здесь: Bootply. Используйте Chrome для тестирования, он имеет встроенную поддержку поддержки srcset! (Некоторым другим браузерам потребуется файл picturefill.js для его распознавания.)

Если вы скопируете источник изображения (или посмотрите "Инструменты разработчика Chrome" на вкладке "Сеть"), вы увидите, что версия шириной 750 загружается и изменяет размер до небольшого изображения, хотя существуют меньшие версии, которые оптимально подходят для использовать. (То же самое происходит в IE и Firefox, если JS picturefill загружен для поддержки img srcset.)

Что я делаю неправильно?

Answer 1

Вам нужно использовать sizes атрибут, чтобы указать браузеру, какую ширину будет иметь изображение в вашем дизайне, в противном случае по умолчанию 100vw (полный видовой экран).

<img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />

Если вы можете установить ширину в CSS, вы также можете использовать lazySizes для автоматического вычисления sizes для тебя.

С lazySizes:

<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />