srcset：无法正确处理

Question

你好，我想在谷歌页面速度上获得完美的 100 分。 这就是为什么我需要为移动和桌面实现 srcset。 但由于某种原因，我很难做到这一点。 我有两张图片：一张是 1920 宽，另一张是 1024 宽。 后备图像是大的。 对于小屏幕，我将使用 1024 图像。 我的 srcset 应该是什么样的？

<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
      srcset="../assets/img/splash-small.jpg 1024w, ../assets/img/splash.jpg 1920w"
      sizes="(max-width: 800px) ??????, ?????"
      src="../assets/img/splash.jpg"
      alt="poker game picture">

Answer 1

在您的情况下，它可能看起来像这样：

<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
     srcset="../assets/img/splash-small.jpg 1024w, 
             ../assets/img/splash.jpg 1920w"
     sizes="(min-width: 800px) 1920px,
            100vw"
     src="../assets/img/splash.jpg"
     alt="poker game picture">

如果宽度最大为 1024 像素（您也可以将其保持在 800 像素），它将为较小的图像提供服务，如果它更大，它将为大的图像提供服务。

花一些时间学习基础知识。 下面是一个很好的资源，可以让您了解更多关于 srcset 和大小的信息：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images