Атрибуты sizes и srcset в элементе img

306

27 февраля 2017, 11:09

У элемента <img> есть атрибуты sizes и srcset, пытаюсь разобраться и понять, как они работают, но, кажется, в этом примере они у меня не работают, хотя вроде бы с поддержкой в хроме проблем не должно быть.

Объясните доступно, пожалуйста, принцип их работы.

Answer 1

Атрибут sizes не поддерживается ни в одном браузере. Атрибута imgset вообще не существует. Для указания картинок высокого разрешения используйте атрибут srcset:

  <picture>
   <source srcset="image/mushroom_landscape.jpg, image/mushroom_retina.jpg 2x" media="(min-width: 60em)">
   <img src="image/mushroom.jpg" alt="">
  </picture>

Атрибут srcset имеет эффект только тогда, когда элемент <source> располагается непосредственно внутри элемента <picture>.

Каждая строка может состоять их следующих частей:

адрес изображения;
дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w). Дескриптор подсказывает браузеру, для какой контрольной точки использовать данное изображение;
дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.

Каждая строка в списке должна содержать по крайней мере дескриптор ширины или плотности пикселей.

Браузер выбирает наиболее подходящее изображение для отображения в данный момент времени.