Why doesn't src inside <picture> element load?

Question

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

When I use the picture element, the browser(chrome) doesn't load the image with the other resources. However, when I replace <picture> with only <img> element it works fine:

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

Why is that happening?

Answer 1

Your code will load the me.webp image if the browser supports its. If not, the jpg image will be shown (which works). Chrome 67 supports webp format, so the only issue I can figure out is that me.webp is not in the images folder.

Answer 2

AFAIK, <picture> is used when you want multiple possible images to use in a responsive design. The <img> at the end is the fallback. It sounds like images/me.webp isn;'t working.

Unless you are really making use of <picture>, use <img>.