2

Chrome is defaulting to the jpg/png files when webp files are available. I ran a website Audit through Lighthouse and it recommended properly sizing images and using "next-gen" formats. After changing the files to webp (and creating multiple sizes of the file), I added the files under a picture tag. When I open developer tools now, Lighthouse gives me green lights for both next-gen formats and multiple file sizes now but only defaults to the jpg/png format. 

<picture>
   <source srcset="imgs/img_480w.webp" media="(max-width:480px)" type="image/webp">
   <source srcset="img/img_280w.webp" media="(max-width:280px)" type="image/webp">
  <source srcset="imgs/imgs.jpg" type="image/jpeg">
  <!-- always defaults to here --> <img src="grid_img/LoW_grid.jpg" alt="Image" class="tm-img">

It is definitely getting the files, they are not showing as not-found. And when I do not include the last line, nothing shows up at all. The files did convert to webp formats properly because I can open them in Chrome.

missmal
  • 31
  • 1
  • 2

1 Answers1

0

It seems like your code is correct. However, your assumption about the rule/line that is being executed is false. Chrome does not prefer to show JPG images.

For simplicity I removed the secound line (max-width: 280). If you look at the code below, you will see that the code defaults to the second one. This can be explained by the fact that this is the first image that is valid for the current screen width and that can be shown (due to browser support for webp).

To illustrate this, I replaced the first two images by images of a tree. In the third line I replaced the image by the image of a rose.

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpg">
  <!-- always defaults to here --> <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

When you remove the second line... you get this:

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

When you make the window smaller in the second code block, the image will be swapped to the webp tree in Chrome. In non-supported browsers you will still see the rose.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • Can we tell the browser that the irrespective of the media query always display webp image if the browser supports webp formats otherwise display img tag image? @JoostS – Siluveru Kiran Kumar Dec 02 '19 at 10:23
  • Yes, just leave out the media attribute: `media="(max-width:480px)"` – Mr. Hugo Dec 02 '19 at 10:51
  • from above `media="(max-width:480px)"` code I have understood like from 0px to 480px dispay that image right? Please tell me If I'm wrong. so here why should I keep `media="(max-width:480px)"` in all widths just show the webp image if browser is supporting. Thank You @JoostS – Siluveru Kiran Kumar Dec 02 '19 at 11:03
  • You are correct. This is a media query. If you want to know WHEN or WHY to use a media query, please search for that online. – Mr. Hugo Dec 02 '19 at 11:05
  • I didn't find it anywhere I have googled it but the question I have is if the media attribute was not there then picture tag will work right, then, in that case, I should get webp image instead of img tag image. @JoostS – Siluveru Kiran Kumar Dec 02 '19 at 11:30
  • I am stuck at this point can you check this StackOverflow link once [link](https://stackoverflow.com/questions/53598308/webp-and-picturesource-will-not-work-for-me-on-chrome) – Siluveru Kiran Kumar Dec 02 '19 at 11:43