如何使自适应图像为响应性BootStrap图像发送正确的文件大小？

Question

我有马特威科克斯的伟大的自适应图像在我的网站上工作。它的工作方式如下：

• 服务器提供800图像。
• 自适应图像重定向到不大于分辨率宽度的图像。

问题在于，BootStrap将图片显示在桌面的列中，而平板电脑和移动设备则以全宽度显示。因此，从技术上讲，适应性应该比较小的视图提供更小的桌面图像。谷歌PageSpeed为此而抨击我。我有800 to图像缩小到大约150 to左右。

我做了很多研究，但似乎找不到可行的解决办法。我是否应该使用自适应图像来查看分辨率宽度以外的特性来传递正确的图像？是否有不同的库来解决这个问题？

Answer 1

由于cookie中的分辨率是通过JS设置的，因此可以尝试重写安装步骤3中提供的代码。

根据这一点，Cookies应该具有更高的优先级：

它处理没有cookie集的情况；移动设备将被提供最小的映像，而桌面设备将获得最大的图像

我还建议注意标记，因为它是在projects github页面上描述，但是仍然有浏览器支持这些特性的问题，希望它们能在最近的将来被修复。

Answer 2

如果您使用一个S3桶来加载您的图像，那么您可以尝试使用AWS来处理您的调整大小工作。您可以参考下面的文章https://medium.com/@vinay.humberi/image-compression-and-optimisation-with-aws-lambda-deb766fac2fe

或者，如果您不想使用亚马逊服务，那么就有超级廉价的saas应用程序，称为gumlet https://www.gumlet.com/。

看看这个！希望这能帮到你。