Загрузка уменьшенного изображения для мобильной версии сайта

02.10.2019 10:20:31

Сейчас, во времена адаптивных шаблонов, уже некого не удивишь совершенно разным дизайном для мобильных платформ и десктопов, но довольно часто верстальщики приналегают оптимизацией размера картинок и отображаю на всех устройствах одну и ту же картинку, просто меняя ее визуальную ширину / высоту.

Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.

Пример того, как можно отображать разные картинки в зависимости от размера экрана:

 
<picture>
    <source srcset="/img/small.jpg" media="(max-width: 300px)">
    <source srcset="/img/medium.jpg" media="(max-width: 699px)">
    <source srcset="/img/big.jpg" media="(min-width: 700px)">
    <img src="/img/default.jpg" alt="ALT">
</picture

Живое демо 1 - нужно уменьшить размер окна.

Еще пример:

 
<img src="big.jpg" alt="img"
    srcset="small.jpg 400w, 
    med.jpg 800w, 
    big.jpg 1000w">

Живое демо 2


Еще есть sizes="50vw", этот атрибут позволяет браузеру самому выбирать какую картинку отображать, что бы она нормально смотрелась, например, на половине экрана (50vw) .

Детальнее можно прочесть в:

Полное руководство по отзывчивым изображениям

Адаптивные изображения на сайте


Категории: Web, HTML, CSS
Пометки: Адаптивные картинки, Адаптивные изображения используя srcset
Яндекс.Метрика