谷歌 Web 开发最佳实践手册(2.1):图像

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


【导读】:一图胜千言,说的是图像是每个页面中不可或缺的一部分。图像同时占据着页面下载字节数的绝大部分。在响应式设计中,按照设备特性变化的不仅有布局还有图片。

响应式的图片

响应式Web设计意味着根据设备特性变化的不仅有布局,还有图片。例如,在高分辨率设备上,就需要使用高分辨率的图片以保证图像的清晰度。一个只有50%宽度的图片可以在浏览器只有800px宽度的时候表现良好,但是却会在较狭窄的手机屏幕中占据太多的资源。图像变小了,而使用的带宽却并没有减小。

艺术指导

Art direction example

 

其他时候,图像需要做更加精细的处理:更改方向,进行裁剪,或者直接整张替换。这种情况下对图片所做的更改,通常也被称为艺术指导。请查看 responsiveimages.org/demos/ 上的更多例子。

  1. 标签中的图像 – img 标签十分强大 – 它能够下载,解析并渲染内容 – 而且现代浏览器支持多种图像格式。
  2. CSS中的图像 – CSS的background 是向元素添加复杂图像的有利工具,让添加多张图片,或者重复图片等任务更加简单。
  3. 完全避免图片 – 有时候最好的图像本质上不是图像。在尽可能的情况下,请优先使用浏览器自带的特性来提供相同或者相似的功能。
  4. 为性能优化图像 – 图像通常占据页面下载字节数的绝大部分,同时也占据了可观的视觉空间。
收藏 评论

关于作者:埃姆杰

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

相关文章

可能感兴趣的话题



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