网页图片优化工具及使用技巧分享
我要评论作为网页的基本元素，图片是影响页面加载速度的关键因素之一。和图片相关的网站优化技术有 CSS Sprites（图片合并）、延迟加载、图片渐进增强等等。下面向大家分享网页图片优化的一些优秀工具和技巧。
TinyPNG 使用智能有损压缩技术，以减少 PNG 文件的大小。
Smush.it 通过删除图片文件中的不必要的字节信息来减少图片尺寸。
OptiPNG 是一款 PNG 图片压缩工具，不会丢失信息。
通过找到最好的压缩参数，消除不必要的注释和颜色配置文件，可以处理 PNG、JPEG 和 GIF 动画图片。
CodeKit 可以帮助你建立更快，更好的网站，它也可以帮助你优化图像。
imgo 是一种无损图像自动优化工具。能够把一个文件夹中的图像最大程度的优化。
用于延迟图片延迟加载的 jQuery 插件。
图片优化文章推荐
Smashing Magazine – Optimize Images With HTML5 Canvas
Smashing Magazine – Clever JPEG Optimization Techniques
Smashing Magazine – Clever PNG Optimization Techniques
The Smashing Book – Performance Optimization for Websites
A List Apart – Responsive Images and Web Standards at the Turning Point
A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
A List Apart – Using SVG for Flexible, Scalable, and Fun Backgrounds, Part I
Six Revisions – The Comprehensive Guide to Saving Images for the Web
Six Revisions – JPEG 101: A Crash Course Guide on JPEG
相关文章
使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
CSS sprites(CSS图片精灵)已经存在很久了。事实上，八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要2012-12-24- 本文整理了一些在div+css 布局过程中的一些经验技巧如：浏览器兼容、规范写法、简写等一系列，需要的朋友可以参考下2012-12-19
css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西，涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣，所以会去了解多一点2012-12-03- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
- CSS常用优化技巧,提高css书写技巧。2011-10-07
- CSS 网站性能优化笔记，大家可以结合下js 网站性能优化笔记。2011-05-24
- DIV+CSS的命名规则小结，让搜索引擎读懂你的样式表。2010-03-17
- IE 浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。2009-09-23
- CSS Sprite 最大的好处是：减少 HTTP 链接数。提高页面质量2009-08-03
- 明显HTML，暗渡“公用脚本” 减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比2008-10-17
最新评论