图像,视频和音频

图片

一幅图片胜过1000个单词,每个页面里图片都是一个主要部分。但它们也是需要加载的主要部分。响应式网络设计不仅能让我们的布局基于设备特性,也能够基于图片产生变化。

响应式图片

响应式的网络设计不仅仅意味着我们的布局能够基于设备特性产生变化,网页内容也要随之改变。举例来讲,在高分辨率(2x)显示下,高分辨率的图表需要保证清晰度。在浏览器宽度为800像素时,一张宽度设置为50%图片展示效果可能只是马马虎虎,但在宽度较窄的手机上它会占据太多空间,并在适应更小尺寸屏幕时依然会占据同样大的带宽。

艺术指导

Art direction example

在另一些情况下图片可能需要大幅度的变化:改变比例、裁剪甚至整张替换。在这些情况下,改变图片通常涉及到艺术指导。参阅responsiveimages.org/demos/ 查看更多示例。

  1. 标识中的图片 — 其实 img 元素是很强大的——可以下载,解码然后渲染展示到内容区域——现代的浏览器支持一系列的图片格式。包括跨设备表现出与桌面展示一致的效果,这些仅仅需要一些细微的调整就能保证好的用户体验。

  2. CSS中的图片 — 为元素使用复杂的图片时,CSS样式中的background属性十分强大,能让图片重复甚至更多。当该属性与media queries联合使用时,能基于屏幕分辨率、展示区大小或者其他为设备加载最合适的图片。

  3. 完全避免图片 — 有些时候,最佳的图形展示可能压根就不是一张图片。只要有可能,我们建议使用本地浏览器来实现相近的功能或效果。

  4. 优化图片表现 — 图片通常占了大多数的下载字节,也常占据了大部分的页面视觉空间。因此,优化图片通常可以为你的页面带来最大的字节存储以及性能改进。

下节课里

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部