1
<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?

Moaaz Bhnas
  • 1,010
  • 7
  • 18
  • 36

2 Answers2

2

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.

alb3rtobr
  • 311
  • 2
  • 8
0

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>.

Desmond Mullen
  • 159
  • 1
  • 8
  • i am using version 70.0.3538.110 and i tested it. it is working fine. may be the version issue you have. – PHP Geek Dec 21 '18 at 05:48