使用图片标签加载图像

Question

I currently try to use the picture tag for a website. This is my current code (the picture are at /images/test1.jpg and /images/test2.jpg:

<picture>
  <source srcset="/images/test2.jpg" type="image/jpeg" >
  <img src="/images/test1.jpg">
</picture>

The expected result is that when the browser supports it it loads the image from the srcset and otherwise from the img tag. However I tested in Chrome and Firefox, which should both support it and the result is that it shows the image from the srcset with a size of 0x0 and additionally shows the picture from the src tag. How to correctly implement this using the picture tag?

Edit: this is how I added the class defining the image width earlier, which resulted in a empty field of the width I set in the image class and a field with the image from the src.

<picture>
  <source class="image" srcset="/images/test2.jpg" type="image/jpeg" >
  <img class="image" src="/images/test1.jpg">
</picture>

Answer 1

I don't clearly understand what is the goal here. But you missed the media attribute. The last fallback only works when there are no media around.

<picture>
  <source class="image" srcset="images/test2.jpg" type="image/jpeg" media="(min-width: 1900px)">
  <img class="image" src="images/test1.jpg">
</picture>

Answer 2

thanks for all the help. I found my issue: Actually I screwed up two things

1. I did not really get that I always get the image from the src tag
2. I should not set the class for both source tag and the img tag, but only for the img tag

this solution works

<picture>
  <source srcset="/images/test2.jpg" type="image/jpeg" >
  <img class="image" src="/images/test1.jpg">
</picture>