YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Optimize images

前端性能优化:Optimize images

今天介绍 PageSpeed 的前端性能优化规则是:Optimize images(优化图片)。

Optimize images 规则简介

Properly formatting and compressing images can save many bytes of data.

译文:选择正确的图片格式和压缩图像可以节省很多的字节的数据。

优化图片不光指压缩图片大小,还包括如何选择正确文件格式保存图片。压缩的工具我在《推荐4款在线图片压缩工具》一文中已经介绍了一些,今天再介绍一款Mac系统下的压缩工具:ImageOptim,可以压缩很多中格式的图片,可以在MacUpdate里直接下载,目前还是免费的,而且图片的压缩率也还不错。用苹果电脑的朋友可以去下载使用。

当然还有PageSpeed中介绍的4款工具:

除了使用工具压缩图片外,我们还可以选择将图片中不需要的地方都才剪掉将像素减低到可以接受的最低值移除图片中的额外信息(例如拍照的时间之类的信息,我咨询朋友跟我这么说的),还有就是将图片保存为最合理的文件格式。压面要重点介绍的也是如何选择最合理的格式保存图片:

The type of an image can have a drastic impact on the file size. Use these guidelines:

  • PNGs are almost always superior to GIFs and are usually the best choice. IE 4.0b1+, Mac IE 5.0+, Opera 3.51+ and Netscape 4.04+ as well as all versions of Safari and Firefox fully support PNG,including transparency. IE versions 4 to 6 don’t support alpha channel transparency (partial transparency) but they support 256-color-or-less PNGs with 1-bit transparency (the same that is supported for GIFs). IE7 and 8 support alpha transparent PNGs except when an alpha opacity filter is applied to the element. You can generate or convert suitable PNGs with GIMP by using “Indexed” rather than “RGB” mode. If you must maintain compatibility with 3.x-level browsers, serve an alternate GIF to those browsers.
  • Use GIFs for very small or simple graphics (e.g. less than 10×10 pixels, or a color palette of less than 3 colors) and for images which contain animation. If you think an image might compress better as a GIF, try it as a PNG and a GIF and pick the smaller.
  • Use JPGs for all photographic-style images.
  • Do not use BMPs or TIFFs.

PageSpeed里说的真够详细,有些我之前还真不太清楚,下面我就一条条的来说明吧:

  • PNG 格式的图片是最好的选择,图片的质量会比GIF格式好。不过 IE 4.0b1+, Mac IE 5.0+, Opera 3.51+ and Netscape 4.04+ 和所有版本的Safari、Firefox都支持PNG格式,还有透明。只是IE4-6不支持alpha透明通道。虽然不支持 alpha 通道地透明,但是支持小于256色的PNG图片带有 1-bit的透明。所以我一直都用background:url(bg.png);_background:url(bg.gif);这样的方式来HACK。针对IE6一下浏览器使用GIF格式的图片透明处理。IE7 – 8 支持PNG的alpha透明通道,但是不能作用在普通的HTML DOM元素上,例如DIV的透明设置。不太清楚微软是基于什么考虑,要这么限制一下。置于怎么导出PNG图片,我这里就不过多介绍了,直接找你的设计师帮你完成吧。
  • GIF 格式适合用于比较小尺寸的图片,例如 10×10 像素大小的图片,GIF 格式图片的压缩比是有优势的。另外就是动画图片就一定要选择GIF格式了。如果觉得不太确定是否应该用GIF格式图片时,可以试试PNG格式的,哪个文件体积小就用哪种格式。
  • 所有照片性质的图片都应该使用 JPG格式。
  • 不要在网页上使用BMP 或者 TIFF 格式的图片,体积太大。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Optimize images

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)