Обязательно использовать атрибут size с w-дескрипторами в srcset?

Question

Я прочитал ряд статей об использовании srcset для корректировки обоих устройств пикселей плотности, а также искусство Направление:

The State of Responsive Images in 2015 by Paddi Macdonnell

srcset Part 2: The W descriptor and sizes attribute by Rich Finelli

Ни один из них становится ясно ли ш -descriptors могут использоваться без атрибута sizes. Большинство указует (работу со-дескриптором вместе с sizes) вопреки

Моего собственное зачаточного тестирования подтверждает, что изображение переключения делает работу с использованием только W дескрипторов.

Я обнаружил, что, когда количество разных изображений задано в соответствии с их шириной, используя w-дескриптор, браузер будет выбирать лучшее изображение, которое будет помещаться в ограниченное пространство.

Никакой другой код не требуется.

Это, очевидно, путая при проектировании реагирующих сайтов, потому что я, как дизайнер требуется только в следующих случаях: (.! Работает для меня Отлично)

1. Изменить изображение, основанное на устройстве-пиксельной плотности
2. Изменить изображение (арт-направление) на основе доступной ширины (работает для меня. Отлично!)

Мне интересно, как sizes бы фактор в этом фиаско. Я полностью понимаю, что это новичка.

Answer 1

Атрибут sizes имеет значение и необходим, если вы используете w -descriptors. Взгляните на следующий пример:

<img srcset=" 
 
    http://placehold.it/200x150?1 200w, 
 
    http://placehold.it/400x300?1 400w, 
 
    http://placehold.it/800x600?1 800w, 
 
    http://placehold.it/1200x900?1 1200w 
 
" style="width: 200px"> 
 

 
<img srcset=" 
 
    http://placehold.it/200x150?2 200w, 
 
    http://placehold.it/400x300?2 400w, 
 
    http://placehold.it/800x600?2 800w, 
 
    http://placehold.it/1200x900?2 1200w 
 
" style="width: 200px" sizes="200px">

Это показывает два изображения с одинаковым srcset, но один из них имеет правильный атрибут sizes. Изображение с sizes загружает правильное изображение, другое - нет. Это связано с тем, что если атрибут sizes не указан, браузер использует значение по умолчанию 100vw.

Чтобы изменить изображения только на основе плотности пикселей устройства, используйте вместо этого x -descriptors.

Для использования в художественном направлении <picture> с <source> элементами.

Answer 2

sizes не строго требуется, но если вы не используете его, эти w дескрипторы рассосутся против значений по умолчанию для sizes, который является 100vw. Другими словами, опускание sizes эквивалентно заданию sizes=100vw, что подразумевает, что изображение предназначено для визуализации со всей ширины экрана.Если это то, что вы намереваетесь, здорово, не стесняйтесь опускать его, чтобы уточнить его (чтобы сделать ваше намерение ясным), вероятно, лучше.

Но если вы намеревались что-либо еще, как пример в ответе ausi, где элемент, установленный на 200px, тогда вам лучше указать sizes, иначе вы получите плохие результаты.

Я не читал обучающие материалы, на которые вы ссылаетесь, но на всякий случай они не сделали этого ясно: алгоритм для определения того, какой источник для загрузки основан на плотности пикселей, выраженный дескриптором x , Дескриптор w равен , преобразованный в эквивалентный дескриптор x путем деления его значения на соответствующее значение sizes. Они существуют исключительно потому, что иногда вы не знаете окончательный размер изображения в пикселях во время разработки. Если вы знаете конечный размер, использование x, вероятно, будет проще.

(Это не было предназначено для этой цели, вы также можете использовать w, даже если вы знаете размер выложенного размера, если хотите просто сделать математику, чтобы определить дескрипторы x. ширины и выровненную ширину, а в некоторых случаях можно сделать выбор в браузере. Однако, если вы знаете выровненную ширину, вы должны проектировать ее явно, чтобы ваши отношения были простыми целыми числами в любом случае - это гораздо лучше отправить 1x или 2x изображение, чем отправить на изображение .9x, и у браузера его масштабировать.)