0

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>
maxbachmann
  • 2,862
  • 1
  • 11
  • 35
  • How you get to know that your image is loading from ``. You are setting same image for both `source` and `img`. Try with different images. Also see this - https://www.w3schools.com/tags/tag_picture.asp – ravibagul91 May 10 '19 at 09:08
  • I just inspected them using the chrome developer tools and when checking the srcset it marks me a 0x0 field on my website, while it marks the image when checking the src. However I already tested with two different images aswell with the same result. I do know it loads both aswell, because when I set a fixed with by using a class, I have a 0xwidth field thats empty and afterwards a image_heightxwidth field with the image from the src. – maxbachmann May 10 '19 at 09:17
  • Check the link provided in above comment and try to replace your images in that example. – ravibagul91 May 10 '19 at 09:22
  • hm same result I get the image from the src tag – maxbachmann May 10 '19 at 09:24

2 Answers2

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>
Abdullah
  • 21
  • 1
  • 6
0

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>
maxbachmann
  • 2,862
  • 1
  • 11
  • 35
  • You always get the `img` from the `src` tag because it is a backup element and performs like a normal ``. If all of the other `` media queries were untrue, or the type of image was unsupported in the browser it would just load the normal `img` tag. – Eoin Feb 22 '21 at 22:27