谷歌 Web 开发最佳实践手册(2.1.1):标签中的图像

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:img 元素十分强大 – 它能够下载,解析并渲染内容 – 并且现代浏览器支持多种图像格式。引入能够跨设备的图像,与放置专为桌面浏览器定制的图像没什么不同,只需要几个小的调整就能有很好的体验。

本节内容

  1. 使用img标签的srcset属性为高DPI设备优化
  2. 其他图像技术

在指定图像宽度时,请记得使用相对单位,防止图像超出可视区域。例如规则 width: 50%;会使图像宽度变成容器元素(而不是相对于可视区域或者实际像素)宽度的50%。

因为CSS允许内容超出容器,有必要使用max-width: 100%规则防止图像及其他元素的溢出。例如:

确保使用alt属性为img元素提供有意义的描述,这些措施能提高网站的可访问性,更好地为屏幕阅读器等辅助设施提供上下文。

使用img标签的srcset属性为高DPI设备优化

CSS中的image-set()函数增强了background属性的表现,使得为不同的设备特性提供不同的图片变得更加容易。与CSS函数image-set的工作方式相同, srcset 属性允许浏览根据设备特性选择最佳图像,例如在2x大小的显示屏上显示2x的图像,或者在网络带宽受限时显示1x大小的图片。

在那些不支持srcset的浏览器上,只会简单地显示src属性指定的默认图像。这就是为什么总包含1x大小图片的做法很重要,因为它能显示在所有的设备上。支持srcset属性的浏览器会解析由英文逗号分割的图像/条件列表,并且只会下载显示最合适的图像。

虽然条件包括像素密度、可视区域宽度和高度,而浏览器目前支持的,还只有像素密度。要保持当前行为与未来特性的一致,只需要在属性中坚持指定2x大小的图像就可以了。

其他图像技术

压缩图像

压缩图像技术总是为所有设备提供高压缩的2x大小图片,而不论设备的规格。取决于图像的种类和压缩级别,图像质量看上去不会有太大改变,但是大小会显著降低。

查看示例

注意

  • 使用压缩图像技术请注意,因为它需要占用更多的内存并且解码。在小屏幕上放缩大尺寸图片成本高昂,对内存和处理能力有限的低端设备来说尤其痛苦。

JavaScript 图像替代方案

JavaScript 图像替代方案检查设备能力,并且做“正确的操作”你可以通过 window.devicePixelRatio属性判断设备分辨率长宽比,获得屏幕宽度、高度,甚至可能通过 navigator.connection 嗅探网络连接、伪造请求。一旦收集了所有的信息,你可以觉得加载哪张图片。

这种做法的坏处是,使用 JavaScript 就意味着在相应的加载器完全解析之前,图像的加载会有延迟。这意味着在 pageload 事件出发之前,图像还尚未加载。而且,浏览器有可能会同时下载1x大小和2x大小的图片,增加了页面的重量。

收藏 评论

关于作者:埃姆杰

(新浪微博:@埃姆杰) 个人主页 · 我的文章 · 1

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部