HTML picture srcset sizes

При использовании тега picture может возникнуть следующее сообщение об ошибке

When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.

Скорее всего вы пытались загрузить несколько изображений разного разрешения но забыли вставить описание sizes.

Например, в следующем коде я для мобильной версии подгружаю две фото на выбор: 600 пикселей в ширину и 866 пикселей в ширину.

Кроме того, что нужно перечислить их в srcset:

srcset="photo--small-lr.jpg 600w, photo--small-hd.jpg 866w"

Нужно ещё указать их размер

sizes="(max-width: 600px) 480px, 800px"

И только потом закрывать тег

<figure class="figure1 mt8"> <picture itemscope itemtype="http://schema.org/ImageObject"> <source media="(max-width: 600px)" type="image/jpeg" srcset=" photo--small-lr.jpg 600w, photo--small-hd.jpg 866w" sizes="(max-width: 600px) 480px, 800px"> <source media="(min-width: 601px)" type="image/jpeg" srcset="photo--large.jpg"> <img class="w100" src="photo--small-lr.jpg" alt="image from website heihei.ru" itemprop="contentUrl"/> </picture> <figcaption> Фото: HeiHei.ru </figcaption> </figure>

• Search on this website
• aofeed - Telegram channel for updates
• aofeedchat - Telegram group for questions