Picturefill 2: Какова цель атрибута размеров?

Question

Я пытаюсь понять, что атрибут sizes предназначен именно для полифония PictureFill 2.0. Вот некоторые основные примеры:

<img sizes="100vw, (min-width: 40em) 80vw" 
srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="test"> 

<img sizes="(min-width: 40em) 80vw, 100vw" 
srcset="medium.jpg 375w, medium.jpg 480w, large.jpg 768w" alt="A car"> 

Согласно documentation:

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

Таким образом, атрибут sizes определяет размер изображения через точки останова. Разве это не CSS? Почему вы определяете CSS-подобные правила для отображения изображения в атрибуте HTML? Что мне здесь не хватает?

На стороне записки, почему ОФИЦИАЛЬНАЯ ДОКУМЕНТАЦИЯ говорят:

Это выходит за рамки данного руководства, чтобы получить в подробности о том, как использовать новые srcset атрибуты & размеры ...

wtf? Это заставило меня рассмеяться. Разве это не документация?

Answer 1

Атрибут sizes определяет, какая версия изображения, которую вы указали в srcset, будет использована в текущем рендеринге веб-страницы.

Вы правы. Это дублирование, если вы уже определяете размеры изображений в CSS во всех точках останова. Но кажется, что браузеры не поддерживают извлечение этой информации из CSS и ее использование для предварительного расчета размеров изображений. Так что это дублирование, которое необходимо в настоящее время.

Больше информации здесь и идеи для дальнейшего развития здесь: http://ericportis.com/posts/2014/separated/

Я узнал о lazySizes Javascript сегодня, который делает это точное задание по пути. Он извлекает эту информацию из CSS и помещает ее в атрибут sizes img. Это отлично работало для меня.