Блог

Предположим, я использую этот <img> элемент ниже (код взят из MDN):

 <img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">
  

Как вы можете видеть, есть два параметра в srcset атрибуте и два параметра для sizes атрибута. Но могут ли они отличаться? Может ли это быть как 2 для srcset и 3 для sizes или наоборот?

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

Например, у вас могло бы быть больше доступных изображений (здесь мы добавляем одно для больших экранов с плотностью не менее 2dppx ):

 <img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w,
             elva-fairy-1600w.jpg 1600w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">
  

sizes зависит от различных макетов страницы по ширине окна просмотра, поэтому у вас часто есть столько sizes элементов, сколько разных макетов.