picture fallback default to png instead of webp

Question

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?

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

Answer 2

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: