我如何使自适应映像为响应的BootStrap映像发送正确的文件大小?

问题描述 投票:5回答:2

我在网站上拥有Matt Willcox出色的adaptive-images。它是这样的:

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

问题是,BootStrap在台式机和平板电脑和移动设备中以全列显示图像,在全角显示图像。因此,从技术上讲,与较小的视口相比,自适应应为桌面提供较小的图像。 Google PageSpeed为此大肆抨击。我有800像素的图片,缩小到大约150像素左右。

我已经做了大量研究,但似乎找不到可行的解决方案。我是否应该修改自适应图像以查看分辨率宽度以外的功能以提供正确的图像?是否有其他图书馆可以解决此问题?

php twitter-bootstrap responsive-design pagespeed adaptive-design
2个回答
0
投票

由于Cookie中的分辨率是通过JS设置的,因此您可以尝试覆盖installation step 3中提供的代码>

根据此,Cookie应该具有更高的优先级:

它处理未设置cookie的情况;移动设备将获得最小的图像,而台式设备将获得最大的图像

编辑我也建议注意标签,因为它是described on the projects github page。但是,仍然有problems带有浏览器支持此功能,希望它们会在不久的将来得到修复


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.