And*_*rew 5 responsive-design twitter-bootstrap picturefill srcset
我正在使用带有响应图像的Bootstrap.我想通过向浏览器提供多种图像大小来优化加载时间.根据这篇文章,像这样的srcset的简单方法有利于让浏览器选择最佳图像大小:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
我的问题是将它与Bootstrap img-responsive类相结合,即使只需要一个小的图片,也会加载一个大尺寸的图片.
这里的代码示例:Bootply.使用Chrome进行测试,它内置支持srcset支持!(其他一些浏览器需要picturefill.js来识别它.)
如果您复制图像的来源(或在"网络"选项卡中查看Chrome开发者工具),您可以看到750宽度版本被加载,并调整为小图像,即使有较小的版本是最佳的使用.(如果加载picturefill JS来支持img srcset,那么在IE和Firefox中也会发生同样的事情.)
我究竟做错了什么？
您需要使用该sizes属性告诉浏览器图像在您的设计中将具有哪个宽度,否则默认为100vw(完整视口).
<img sizes="(max-width: 480px) calc(100vw - 10px), 480px" src="small.jpg" srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
如果您可以在CSS中设置宽度,您还可以使用lazySizes自动sizes为您计算.
使用lazySizes:
<img data-sizes="auto" class="lazyload" data-srcset="small.jpg 600w, medium.jpg 1000w, large.jpg 2000w" alt="yah" />
| 归档时间： |
|
| 查看次数： |
9959 次 |
| 最近记录： |