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
  • 14,145
  • 3
  • 19
  • 47

3 Answers3

2

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,428
  • 1
  • 7
  • 16
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
  • 14,145
  • 3
  • 19
  • 47
0

Had the same "issue". "Current Source" showed me it was actually webp and not png as I though in the first place.

João Textor
  • 103
  • 1
  • 9
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 11 '22 at 17:31