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

02.10.2019 10:20:31

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

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

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

 
<picture>
  <source srcset="/Small.png" media="(max-width: 600px)">
  <source srcset="/Medium.png" media="(max-width: 900px)">
  <img src="/Big.png" alt="Piligrim">
</picture>

Еще пример:

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

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


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

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

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

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

Есть системные пометки.

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