Правильные размеры для img srcset в элементе контейнера?

Question

Использование плагина LazySizes (https://github.com/aFarkas/lazysizes) Я пытаюсь создать сетку изображений, каждая с альтернативной версией для небольших видовых экранов. Сетка (контейнер) представляет собой простой формат на основе столбца/строки.

Я не совсем уверен, как объявить изображения, я продолжаю видеть только более крупные версии. Я выбрал использование изображений с высоким разрешением и уменьшил их на 50% с максимальной шириной для контейнера. Вот пример разметки из изображений:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    alt="" class="lazyload" /> 

мне нужна только одна точка останова, которая на 768px. Запутанной частью является атрибут размера данных. Должен ли я объявлять другой размер здесь, поскольку изображения имеют высокое разрешение или я должен просто позволить им иметь полную ширину?

Добавлено: Сформированная Разметка я получаю, когда скрипт инициирует:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w" 
    alt="" class=" lazyloaded" 
    sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    src="images/grid/image-small.jpg"> 

Answer 1

srcset спецификация автор здесь.

Ну, ваш текущий атрибут sizes бесполезен; он просто указывает один и тот же размер для обеих точек останова, и оба они просто определяют размер по умолчанию в любом случае.

Почему вы пытаетесь сделать какой-то странный размерный взлом? Вы будете бороться с тем, что пытается сделать <img>, поэтому все, что вы в конечном итоге получите, будет хаки.

Просто следуйте спецификациям: sizes должен объявить, насколько велико изображение на странице (по умолчанию это 100vw, так что вы можете опустить его, если вы уже планируете на изображении полную ширину). Вы можете использовать MQ здесь, если вы делаете отзывчивый дизайн, а ваши разные макеты должны различать изображение по-разному, но если он всегда будет одного размера, не затрудняйте его.

Затем просто укажите, насколько велико ваше изображение в `srcset. Похоже, вы уже делаете это, так что это хорошо (при условии, что ваши изображения на самом деле имеют 720 и 1440 пикселей в пикселях). Браузер будет выбирать желаемое изображение на основе этой информации.

Я не уверен на 100% о том, как вы планируете использовать изображение, но похоже, что вы планируете отображать изображения в виде половины ширины экрана? В этом случае просто используйте sizes=50vw, и все позаботится о себе.

(Я не знаю, как работает LazySizes, поэтому, если он делает что-то странное, я не могу с этим поделать.)