谷歌 Web 开发最佳实践手册(2.1.4):为性能优化图片

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


【导读】:图像通常占据页面下载字节数的绝大部分,同时也占据了可观的视觉空间。结果是,优化图片能极大地节约带宽提高性能:浏览器下载的字节数越少,客户端所竞争的带宽就越少,浏览器能下载显示所有的资源就越快。

本节内容

  1. 选择正确的格式
  2. 减少文件体积
  3. 使用sprite图
  4. 考虑延迟加载

概要

  • 不要只是随意地选取图像格式,要理解可用格式间的差异,并使用最合适的格式。
  • 在工作流程中引入图像优化和压缩工具减少文件大小。
  • 将最常使用的图片合并为sprite图,以减少HTTP请求数。
  • 考虑只在图片进入可视区域时加载,提升初次加载速度,减少初次加载的页面体积。

选择正确的格式

有两种类型的图片需要考虑: 矢量图 和 光栅图. 对于光栅图来说,你同时需要选择正确的压缩格式,例如:GIFPNGJPG

光栅图,是照片一类的图像,由许多独立成格的像素或者点表示。光栅图常来源于相机或者扫描仪,或者可以在浏览器的canvas元素中生成。图像尺寸越大,文件体积就越大。当放大到比原来大小还大时,光栅图就会变得模糊,因为浏览器需要猜测如何去填补遗失的像素。

矢量图,像是logo和线条图,是由一系列曲线,线条,形状和填充颜色定义的。矢量图是由像Adobe Illustrator或者Inkscape这样的程序创造,并以SVG这样的格式保存得来的。因为矢量图是由一些简单的基元创造的,可以在不改变图片大小,并且不损失图像质量的情况下进行缩放。

选择了正确的格式以后,考虑图像的来源(光栅图或者矢量图)和内容(颜色、动画、文本等)都很重要。没有哪一种格式适用于所有的图像类型,每种格式都有它自身的长处和短处。

可以从以下指导开始选择正确的格式:

  • JPG 用于照片。
  • SVG 用于矢量作品和单色图形,例如logo和线条画。如果没有矢量作品,还可以尝试 WebP 或者 PNG 格式。
  • 使用PNG格式而不是GIF格式,因为PNG格式色彩更丰富,还能提供更好的压缩比。
  • 而对于长动画,考虑使用 <video> 标签,因为它能提供更好的图像质量,还给用户提供回放的控制权。

减少文件体积

图像的文件体积可以考虑使用‘后处理’方案在保存后减少体积。有许多图像压缩的工具——有损的、无损的、在线的、图形化的以及命令行的。在可能的情况下,最好尝试自动化的图像优化方案,让它成为你工作流程的一等公民。

这里有一些工具可以在无损的情况下处理 JPG 和 PNG 文件而不影响图像质量。对于 JPG文件,请尝试 jpegtran 或者 jpegoptim (只在 Linux 上可用;同时请使用 –strip-all 选项)。对于 PNG文件,请尝试 OptiPNG 或者 PNGOUT

使用sprite图

CSS sprite是一种将数个图片合成为一张大‘sprite 图’的图像。这单张图可以在元素上指定background图片(sprite图)后加上相应的偏移量显示正确的部分。

sfwegfwgregregprite-sheet

Sprite图的好处是,既可以减少下载多张图片的下载数,又可以保证缓存能起作用。

考虑延迟加载

延迟加载可以显著地加速含有图片的长页面加载速度,通过按需加载,或者在主要内容完成加载渲染后再加载等方式完成。除了性能提升,使用延迟加载也可以创造出无限滚动的体验效果。

创建无限滚动页面要注意,因为内容只会在可见的时候加载,搜索引擎可能永远见不到相应的内容。另外,如果用户想要查看footer处的信息将永远不能查看到,因为总会有新内容加载出来。

收藏 评论

关于作者:埃姆杰

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

相关文章

可能感兴趣的话题



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