Web 前端优化最佳实践之图象篇
来源:互联网 发布:美国高中数学知乎 编辑:程序博客网 时间:2024/04/27 12:39
Web 前端优化最佳实践之图象篇
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 图片的优化工具:
- jpegtran (http://jpegclub.org/)
必需要强调的是,图片设计的同学啊,请考虑设计面向 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 就差不多了。
--EOF--
本文相关评论|Comments(5)
添加评论
- Web 前端优化最佳实践之图象篇
- Web 前端优化最佳实践之图象篇
- Web 前端优化最佳实践之内容篇
- Web 前端优化最佳实践之 Server 篇
- Web 前端优化最佳实践之内容篇
- Web 前端优化最佳实践之 Server 篇
- Web 前端优化最佳实践之 Cookie 篇
- Web 前端优化最佳实践之 Cookie 篇
- Web 前端优化最佳实践之 CSS 篇
- Web 前端优化最佳实践之内容篇
- Web 前端优化最佳实践之 CSS 篇
- Web 前端优化最佳实践之 Cookie 篇
- Web 前端优化最佳实践之 Server 篇
- Web 前端优化最佳实践之 CSS 篇
- Web 前端优化最佳实践之 JavaScript 篇
- Web 前端优化最佳实践之 JavaScript 篇
- Web 前端优化最佳实践之 Mobile(iPhone) 篇
- Web 前端优化最佳实践之 Server 篇
- 对比 Route-Map 在 Redistribute 以及 Policy-Routing 中的应用及注意点
- 外国的公路减速带,强啊,交警省事了
- 网上购物之路--浅析购物网站的经营要素
- Web 前端优化最佳实践之 JavaScript 篇
- 增加在线销售的7个方法
- Web 前端优化最佳实践之图象篇
- 网上开店寻找货源有方法
- 什么是Json?[转]
- 外贸人家:我通过网络找客户实例及建议
- 提高安全和视频监控效率的视频内容分析技术
- MVP申请成功
- 【C++ Primer】摘记--第1章 快速入门
- 一位老工程师的忠告
- 好的blog网址
为什么可通过看有没有favicon.ico来判断是否专业呢?我嫌太大,把这东西给丢弃了....
@blankyao
你难道没看到 error Log 么?
"尽可能的使用 PNG 格式的图片"
可IE6下要用额外的技术来支持PNG的显示。是不很烦。很麻烦啊。为了少点麻烦还是gif?
@xiaoshu
"尽可能"是什么意思?
"可IE6下要用额外的技术来支持PNG的显示。是不很烦。很麻烦啊。为了少点麻烦还是gif?"
准确的说,IE6下不需要额外的技术来支持png,IE6只是不能支持png的alpha透明通道。如果不涉及到透明背景的使用,广泛使用png是没问题的~