前端工程师-高级web网站前端开发图片运用指南.docxVIP

在该网站在不影响原图片的质量下去掉图片中一些元数据，那么这怎么去实现呢？本文就主要告诉你如何高性能WEB开发之图片篇 AD： 一、缩小图片大小 当图片很多的时候，减少图片大小是提高下载速度最直接的方法。 1. 使用PNG8代替GIF(非动画图片)，因为PNG8在效果一样的情况，图片大小比GIF要小。 2. 用fireworks处理PNG图片，在我们产品中很多PNG图片是美工直接用photoshop导出的， 后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色)。 处理后100K的图片大小基本减少了3/4，但图片质量也会有少许降低，要看自己是否能接受。 3. 使用Smush.it(/ysmush.it/)压缩图片，Smush.it是YUI团队做1个在线压缩图片的网站， 该网站在不影响原图片的质量下去掉图片中一些元数据，所以可以放心使用该网站进行压缩， 但这个压缩比例也是比较有限的。 二、合并图片和拆分图片 1. CSS Sprites合并图片以减少请求数来提高性能大家都知道。但不要把图片合并太多，太多太大了， 就会因为这1个图片影响这个页面的显示了。 2. 有时候我们需要把1个大图片拆分成多个小图片，比如产品首页图片比较少，就1个很大的banner图片， 因浏览器都可以并发下载图片，所以如果不拆分，只使用1个大图片的话，下载速度反而会比较慢 三、透明