Почему src внутри элемента <picture> не загружается?

Question

<picture>
  <source type="image/webp" srcset="images/me.webp">
  <img id="avatar" src="images/me.webp" alt="Me">
</picture>

Когда я использую picture элемент, браузер (Chrome) не загружает изображение с другими ресурсами. Тем не менее, когда я заменяю <picture> только с <img> элемент работает нормально

<img id="avatar" src="images/me.webp" alt="Me">

Почему это происходит?

Answer 1

Ваш код загрузит изображение me.webp, если браузер его поддерживает. Если нет, изображение jpg будет показано (который работает). Chrome 67 поддерживает формат webp, поэтому единственная проблема, которую я могу выяснить, заключается в том, что me.webp отсутствует в папке images.

Answer 2

НАСКОЛЬКО МНЕ ИЗВЕСТНО, <picture> используется, когда вы хотите использовать несколько возможных изображений в адаптивном дизайне. <img> в конце концов это запасной вариант. Это звучит как images/me.webp не работает.

Если вы действительно не используете <picture>использовать <img>,