公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

响应式图片解决方案

响应式图片解决方案_www.uibq.com

如今开发一个网站不是响应式都不好意思拿出来,那么作为响应式中的重要一环「响应式图片」你又是如何解决的呢?

网站的平均加载已经到了近 2MB 并在不断地增加中,其中图片占据了绝大多数流量(63%)。可以肯定的是网页已经有了严重的大小问题,而图片就是罪魁祸首。虽然已经有很多种措施可以减少网页加载量,但或许更重要的步骤之一是确保响应式图片的加载方案。通过利用响应式图片解决方案,我们可以确保最佳的图片被加载,带宽不会被过大的图片所浪费。因此 W3C 定义了 picture 标签:基于检测客户端设备类型的可替换图片方案。具体是由 picture 这个标签去实现,也就是说我们现在有了一个基于标准的响应式图片解决方案可以用在实践中。

长话短说(人话)

  • 断点(breakpoints)应该 取决于内容 而不是设备宽度 (CSS3 media query)

  • 根据尺寸加载不同图片

  • 计算图片像素密度并加到图片加载列表中

  • 通过消除图片加载列表中太相近的值来让加载列表变得可维护

  • 利用程序自动输出图片的不同大小

  • 利用 img 标签的 srcset sizes 等属性输出同一张图片的不同路径/尺寸,以解决响应式图片的大小和像素密度的问题

  • Picturefill 库能让我们现在就使用这些强大的特性

  • 虽然 Picturefill 还有一些缺点 但这么做仍然利大于弊

定义

第一步就是定义所有响应式图片的尺寸和断点,这些信息在网页原型中就应该被精确的标示出来。重要的一点是 你的断点应该取决于你的内容 而不是不同设备的宽度。这么做是因为设备的参数是在不断变化的,流行的设备尺寸总是在变。通过让内容来决定断点位置,这将确保我们的界面在所有屏幕上响应而不是特殊的几个设备。

注意 当决定哪些图片应该被做成响应式时,要记住一点,大多数都是放在内容中的图片。例如在 HTML 中插入的图片而不是在 CSS 中的背景图片。

图片尺寸

首先将你的浏览器窗口放到最大(或者你规定的内容展示最大宽度),然后记录下此时你的内容宽度和你想要展示的图片宽度,通过浏览器的开发者工具或者类似的插件。

接下来缩放你的浏览器窗口直到你想要给图片设置宽度的下一个断点,再继续缩放直到你记录下所有的作用于图片宽度断点。当你完成的时候你应该记录下每张图片在不同大小下应该载入的宽度。

举例,仅仅是例子:

[max-width] : [1440]
[breakpoint large] : [1120]
[breakpoint medium] : [800]
[reakpoint small] : [400] 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)