2

I've implemented the picture element with different image formats and a fallback image, but on Google PSI i'm still getting the warning to 'Serve images in next-gen formats'

This warning is not being reported by Lighthouse which makes it very strange and hard to debug.

I'm not sure if something is wrong with my code or there is some kind of issue with the Google PSI.

Here is the code:

<picture>
   <source class="single-image" srcset="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-324x576.webp 324w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.webp 216w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.webp 216w" sizes="(max-width: 480px) 324px, (min-width: 480px) 216px, (min-width: 768px) 216px" type="image/webp">
   <source class="single-image" srcset="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-324x576.jpeg 324w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.jpeg 216w, https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117-216x384.jpeg 216w" sizes="(max-width: 480px) 324px, (min-width: 480px) 216px, (min-width: 768px) 216px" type="image/jpeg">
   <img class="single-image" src="https://embedsocial.com/admin/story-cdn/17841433519453440/17874591967830117.jpg" type="image/jpg" alt="Story image">
</picture>

Here is the URL of the live page where this is implemented: https://embedsocial.com/api/pro_story_widget/10781011828c1336253377e43847e6496c4f19ca

And the Google PSI results: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fembedsocial.com%2Fapi%2Fpro_story_widget%2F10781011828c1336253377e43847e6496c4f19ca

Any help would be appreciated.

Thanks a lot.

Nevrie Xhemaili
  • 21
  • 2

1 Answers1

1

I'll share my notices:

  1. Crome -> F12 -> Elements show code without <source> tags. Something causes a problem. Maybe just lexical mistakes.
  2. Don't repeat the class attribute for each source

3. <source> with type="image/jpeg" optional.

For example, this code from my project works fine:

<picture>
    <source srcset="/img/hero/hero-girl.webp" type="image/webp">
    <img src="/img/hero/hero-girl.png" alt="" class="img-fluid">
</picture>

So, try to start as simple as that and than enhance srcset step by step with sizes until you reach the problem.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Саша Серый
  • 11
  • 1
  • 2
  • Thank you for your comment, I realized that it was Swiper(the slider library) that was causing the issue because it was preloading the images. Setting preloadImages to false worked. :) – Nevrie Xhemaili Jun 29 '22 at 06:29