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

时间:2015-03-18 20:03:25

标签: php twitter-bootstrap responsive-design pagespeed adaptive-design

我的Matt Willcox很棒adaptive-images在我的网站上工作。它的工作原理如下:

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

问题在于BootStrap以桌面和全宽平板和移动的列显示图像。因此从技术上讲,自适应应该为较小的视口提供较小的桌面图像。谷歌PageSpeed为此抨击我。我有800px图像缩小到约150px左右。

我做了很多研究,但似乎找不到可行的解决方案。我应该破解自适应图像来查看分辨率宽度以外的特征来提供正确的图像吗?是否有一个不同的库来解决这个问题?

2 个答案:

答案 0 :(得分:0)

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

中提供的代码

Cookie应该具有更高的优先级:

  

它处理没有设置cookie的情况;移动设备将提供最小的图像,桌面设备将获得最大的

编辑此外,我建议您注意标记described on the projects github page但是,仍有problems浏览器支持此功能,希望它们将在不久的将来修复

答案 1 :(得分:0)

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

或者,如果您不想使用亚马逊服务,那么可以使用名为gumlet的超级便宜的saas应用程序 https://www.gumlet.com/

检查一下!希望对您有帮助。