Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则。在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making
也非常有参考价值。结合一起说一下。
1. 优化图片 (Optimize Images)
使用 GIF
、JPG 还是 PNG
格式的图片? 尽可能的使用 PNG
格式的图片,更多的功能,更小的尺寸(与 GIF
相比)。
对于 PNG
图片,考虑用 Pngcrush
或类似的工具进行优化。常见的工具如下表:
- pngcrush
http://pmt.sourceforge.net/pngcrush/
- pngrewrite
http://www.pobox.com/~jason1/pngrewrite/
- OptiPNG
http://www.cs.toronto.edu/~cosmin/pngtech/optipng/
- PNGOut
http://advsys.net/ken/utils.htm
对 JPEG
图片的优化工具:
必需要强调的是,图片设计的同学啊,请考虑设计面向 Web 的图片
,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。
2. 使用 CSS
Sprites 技巧对图片优化 (Optimize CSS
Sprites)
之前提到过,简单的说就是"利用 CSS
background 相关元素进行背景图绝对定位",把多次 HTTP
调用变为一次调用,更多参考:CSS Sprites: Image Slicing's Kiss of Death
3. 不要在 HTML
中使用缩放图片 (Don't Scale Images in HTML
)
更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic
命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面!
4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)
更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico
。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。
分享到:
相关推荐
Web 前端优化最佳实践.rar
Web前端优化最佳实践及工具集锦[定义].pdf
Web前端开发最佳实践.pdf 个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除!
web性能优化最佳实践
本书的主要内容和特色: 以W3C Web规范为基础展开讨论,介绍Web前端开发中的最佳实践方法及编码风格。为Web前端开发人员快速成长提供了一条捷径。 介绍了大量近年来涌现出来的并已经得到广泛应用的工具和技术...
本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级工程师从入门开始就养成一个良好的编码习惯。本书总共分五个部分13章,第一...
高清彩版 Web前端开发最佳实践
党建 著 ISBN:9787111488439
web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题...
Web前端设计修炼之道》以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践....
Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法Web 前端性能优化思路与学习方法
一本讲述web前端性能优化以及实践经验分享的书籍,非常不错,值得学习
web前端优化的一些自己从网上参考的方法然后总结出的内容
Web前端性能优化全攻略
让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看