谷歌 Web 开发最佳实践手册(2.1.2):CSS中的图像

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


【导读】:CSS 的 background 属性是向元素添加复杂图像的有利工具,让添加多张图片,或者重复图片等更加简单。与媒体查询结合时,background属性变得更加强大,能做到按照屏幕分辨率,可视区域大小等有条件地加载背景图片。

本节内容

  1. 为图片加载或艺术指导使用媒体查询
  2. 使用image-set提供高分辨率图片
  3. 使用媒体查询提供高分辨率图片或者艺术指导。

概要

  • 考虑显示设备的特征,使用最好的图片,包括考虑屏幕大小,设备分辨率和页面布局。
  • 在CSS中更改 background-image 属性,为高DPI的设备使用媒体查询的 min-resolution 和 -webkit-min-device-pixel-ratio 属性。
  • 使用 srcset 属性,在提供原始1x大小图像的基础上提供高分辨率图像。
  • 在使用JS图像的替代技术时考虑花费的性能,或者在低分辨率设备上使用高压缩的高分辨率图片。

为图片加载或艺术指导使用媒体查询

媒体查询不仅影响页面布局,还可以根据可视区域宽度有条件地加载图片,提供艺术指导。

在上面的例子中, 小屏幕上只会下载显示small.png并应用到div上,而大屏幕上会将background-image: url(body.png)应用到body上,同时background-image: url(large.png)应用到 div上。

查看完整示例

使用image-set提供高分辨率图片

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

加载了正确的图片,浏览器也会将它调整到合适的大小。换句话说,浏览器假设2x大小的图片是1x大小图片的二倍,于是便会以2倍的比例缩小2x大小的图片,所以页面上的图片大小看上去是一致的。

对 image-set() 函数的支持还很新,并且仅仅在带有-webkit 厂商前缀的Chrome和Safari浏览器中支持。另外还要考虑当 image-set() 不起作用的时候设置备用图片的情况,例如:

查看完整示例

上面的样式会在支持image-set的浏览器中加载合适的资源,而在不支持的时候使用1x大小的资源。最需要注意的问题是浏览器对 image-set() 的支持还不够,大多数浏览器还是会得到1x大小的资源。

使用媒体查询提供高分辨率图片或者艺术指导。

媒体查询规则创建在设备宽高比之上,让它可以为2x或者1x大小屏幕指定不同的图片。

Chrome, Firefox 和 Opera 浏览器都支持标准的 (min-resolution: 2dppx)属性,而Safari和Android浏览器都需要写上厂商前缀,并且去掉dppx单位。请记住,这些样式只会在满足媒体查询的时候加载,而你必须指定最基本的样式。指定基本样式的做法能保证即使浏览器不支持特定分辨率的媒体查询,也能渲染某些东西。

查看完整示例

你也可以根据可视区域大小使用 min-width 语法显示替代图片。这项技术的好处在于,如果媒体查询不匹配日,图像便不会下载。例如, bg.png 只在浏览器的宽度为500px或者更大的宽度上才会下载并应用到 body 上:

收藏 评论

关于作者:埃姆杰

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

相关文章

可能感兴趣的话题



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