`

Web 前端优化最佳实践之 图片 篇

阅读更多

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/ (refer: 教程 )
  • 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

补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记住这个大图片不能太”重”,我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系的这个图 .

 

3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML )

更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic 命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面!

 

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico 。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。

 

在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值。结合一起说一下。

分享到:
评论

相关推荐

    Web 前端优化最佳实践.rar

    Web 前端优化最佳实践.rar

    Web前端优化最佳实践及工具集锦[定义].pdf

    Web前端优化最佳实践及工具集锦[定义].pdf

    Web前端优化最佳实践及工具集锦

    大巧不工Web前端设计修炼之道.pdf

    Web前端设计修炼之道》以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践....

    高性能网站建设进阶指南:Web开发者性能优化最佳实践(口碑网前端团队翻译)

    高性能网站建设进阶指南:Web开发者性能优化最佳实践(口碑网前端团队翻译)

    高效前端:Web高效编程与优化实践

    全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...

    大巧不工-WEB前端设计修炼之道

    Web前端设计修炼之道》以Web前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践....

    web前端开发规范

    web前端开发规范主要实现的目标:代码一致性和最佳实践。通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。 此规范是在开发中积累下来...

    高效前端:Web高效编程与优化实践_机械工业出版社; 第1版 (2018年1月1日) 完整版-未加密

    全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...

    《大巧不工-Web前端设计修炼之道》迷你电子书

    Web前端设计修炼之道》以Web 前端设计的流程为主线,以前端设计的方法和原则为基础,围绕原型设计、模型设计、可用性设计、一致性设计和以用户为中心的设计等关键技术探讨了前端设计的规范、技巧与最佳实践。...

    提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,...

    web前端性能分析工具导引

    为什么关注前端性能分析?...Yahoo 高性能网页最佳实践(14+20) 前端性能分析工具 Fiddler IBM Page Detailer FireBug Yahoo YSlow HTTP Analyzer AOL PageTest PageTest 源码解读 优化定律 如何扩展前端工具

    TWeb 腾讯前端技术大会 PPT 合集.zip

    Flutter在腾讯企鹅辅导上的实践之路; Headless CMS; OMI 框架前端生态赋能与创新实践; Serverless SSR; TWeb 腾讯视频段隆贤 极致SSR; TWEB-企业级项目基于PWA缓存的最佳实践; Web编辑器的实现 从简单编辑到...

    前端黑科技:美团网页首帧优化实践

    在美团支付的前端技术体系里,通过预渲染提升网页首帧优化,从而优化了白屏问题,提升用户体验,并形成了最佳实践。在前端渲染领域,主要有以下几种方式可供选择:  通过对比,同构方案集合CSR与SSR的优点,可以...

    web性能权威指南

    本书是谷歌公司高性能团队核心成员的权威之作,堪称实战经验与规范解读完美结合的产物。本书目标是涵盖Web 开发者技术体系...他每天的主要工作就是琢磨怎么让Web应用速度更快,总结并推广能够提升应用性能的最佳实践。

    浅谈移动前端的最佳实践

    这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距:这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,...

    高性能网站建设指南:前端工程师技能精髓

    全书内容丰富,主要包括减少HTTP请求、EdgeComputing技术、ExpiresHeader技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭...

Global site tag (gtag.js) - Google Analytics