图片

标识中的图片

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

请记住当指明图片宽度时,为防止图片超出展示区,应使用相关联的单元。比如,’width: 50%’;,将会使图片宽度达到容器元素(并非展示区或者实际像素大小)的50%大小。

由于CSS样式允许元素内容溢出该元素的容器,因此我们可能需要使用max-width:100%来防止图片或者其他内容溢出。举例来讲:

img, embed, object, video {
  max-width: 100%;
}

一定要使用img元素的alt属性提供有意义的描述;这些描述能够让你的网站在屏幕阅读器以及其他辅助技术里被更好地理解。

使用srcset在高分辨率的设备上加大img元素的宽度

srcset属性能够增强img元素的表现效果, 让根据不同设备特性提供不同图片这一过程变得更加容易。同样, image-set CSS功能 也行之有效, srcset允许浏览器根据设备特性选择最佳图片,比如在2x的展示区使用2x的图片,在带宽受限的2x展示区使用1x的图片。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

在不支持srcset的浏览器上,浏览器只会使用 src 属性中指定的默认图片。 这就是为什么任何时候,不管性能如何,在任何设备上我们都要保证1x的图片都可以进行展示这一做法的重要性。当srcset能够被支持时,以逗号分隔的图片选择条件可以被解析,让最合适的图片得以加载展示。

从像素密度到展示区宽度等种种,选择条件众多,但现在的只有像素密度被很好地支持。为在当前表现以及未来的特性间平衡,我们坚持提供2x的图片。

其他图片技术

压缩图片

图片压缩技术能够将2x的图片进行高质量压缩以适应各种设备,无论设备的实际性能怎样。基于图片类型以及压缩率,图片在变化时质量会发生变化,但图片文件大小会明显减小。

查看示例

要点

  • 使用压缩技术时要小心,由于这样会消耗大量内存以及解码也会消耗资源。将大图片改变大小以适应小屏幕是花费巨大的,并且在某些内存以及处理器比较局限的设备上这一过程会变得十分痛苦。

JavaScript图片替换技术

Javascript脚本图片替换技术会检测设备的性能然后“做一些恰当的事情”。你可以通过window.devicePixelRatio来判断设备的像素尺寸、宽高值,通过navigator.connection试探一些能用的网络连接,或者模拟一个请求。当这些信息被收集完毕后,你就能决定加载哪张图片了

使用Javascript这种处理方式有一个大的缺点就是这意味着在pageload解析器完成解析之前,图片会延迟加载。在页面加载完所有事件之前图片资源不会开始下载。并且,浏览器一般情况下会将1x和2x的图片资源都进行下载,这样导致页面变得臃肿。

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

回到顶部