srcset :难以正确完成

Question

你好，我想要在谷歌页面速度满分100分。这就是为什么我需要在移动端和台式机上实现srcset。但由于某些原因，我很难把这件事做好。我有两张图片:一张是1920宽，另一张是1024宽。后备图像是一个大图像。对于小屏幕，我将使用1024图像。我的源集应该是什么样子的？

<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">

如果宽度最大为1024px (你也可以将其保持在800px)，它将服务于较小的图像，如果它较大，它将服务于较大的图像。

花点时间学习基础知识。这里有一个很好的资源，可以让你了解更多关于srcset和size的信息：

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