0

I have this problem here:

        <picture>
          <source
            srcset="/img/logoWebp/ebay.webp" type="image/webp"
          />
          <img
            alt="ebay"
            type="image/png"
            src="/img/logoPng/ebay.png"
          />
    </picture>

I have readed with this markup the browser should use the webP image but its using the png one. I am using ofcorse the lastes version of chrome.

Whats the probel here?

bill.gates
  • 12,086
  • 2
  • 10
  • 33

2 Answers2

1

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Example:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg">
</picture>

When the width is greater than 650px, img_orange_flowers.jpg is displayed.

When the width is less than 650px and greater than 465px, img_pink_flowers.jpg is displayed.

When the width is less than 465px, img_white_flowers.jpg is displayed.

fatalcoder524
  • 1,358
  • 1
  • 5
  • 15
0

Ok guys i have found it out. It worked all the time just my dev tools kinda "trolled" me. I thought it was png, but if i take a closer look it says currentSrc:

enter image description here

bill.gates
  • 12,086
  • 2
  • 10
  • 33