网络图像优化总结
浏览:2365次 出处信息
网络图像优化,总结了我个人接触到的优化方法,这只是优化当中的一小部份,还要更多的需要各位大牛去挖掘了分享,也欢迎大家针对此内容进行交流或拍砖。
在线PPT:http://www.slideshare.net/webrebuild/ss-5245814
下载PPT:http://blog.gulu77.com/demo/201009/Optimizing_images_for_web.7z
png转swf视频:正在审核中…
合色的图像
- 真色彩图像(jpeg、png24、png32),色彩比较丰富包含16777216种颜色。调色板图像gif、png8,色彩简单只能包含256种颜色。
- 但如果把真色彩图像,错误地使用了gif或png8格式会,通常会有损视觉效果。
- 又如果把调色板图像,错误地使用了jpeg、png24、png32格式,通常会导致文件体积更大。
- 小尺寸图片,即使色彩丰富也可以使用调色板图像,因为256种颜色一般足够对小图片进行视觉还原,而肉眼对小图的敏感度也没有那么高。
GIF
- 适当降低GIF失真度,可有效减少体积。
利用Fireworks工具做压缩,Fireworks有一种叫“失真”可以压缩动画和静态的GIF图像,能提供0到100之间的压缩范围,选择压缩比例越大文件体积越小,当然着视觉体验也会随着降低。一种有损压缩的方法,在非必要的情况下,不建议使用这方法。
- 隔行扫描用户体验好,但文件体积会变大。
隔行扫描(某些软件又称:交错)指显示屏在显示一幅图像时,先扫描奇数行,全部完成奇数行扫描后再扫描偶数行,隔行扫描在还没有完成扫描时我们就已经能知道内容,能给我们带来更好的体检。虽然隔行扫描用户体验好,但文件体积会变大。所以在使用时我们要作出权衡了。
JPEG
- 除JPEG外,其它网络图像格式都是无损压缩,必要时为JPEG保留PSD源文件,以便修改维护。
- JPEG品质一般选择在70 % ~80%之间,色彩越鲜艳要求品质越高。
- JPEG不适合保存图形分明线条简单以及256颜色以下的图像。
- 渐进式JPEG,用户体验更好,文件体积更小。
- 适当的使用模糊降低JPEG细节,一些平滑过渡的颜色和色调,可减少图片体积。
- JPEG2000图像更加细腻平滑,而且体积相比JPEG最高可减少30%,但JPEG2000还没有被广泛使用。
PNG
- PNG可分为,PNG8(调色板图像,支持半透明。但在PS只能导出布尔值的PNG8即要么不透明要么全透明不能实现全透明),PNG24(真色彩,不支持透明(和JPG唯一的区别是PNG24是无损的格式)、PNG32(真色彩,支持半透明。)
- 半透明的PNG8,与PS里的透明PNG24,体积有很大差异,所以色彩简单256色内的半透明图片,尽量使用PNG8。
- 在艺术加工过程中,可能把某些区域隐藏但依然占有数据空间,可利用PNGGauntlet工具对导出后的PNG,进行二次压缩把被隐藏数据清除。
- 需要真色彩及透明度的效果我们需要用到PNG32但往往文件体积会比较大,在可行的情况下,我们可以使用SWF替换PNG32,但对性能会有一定的影响,建议大家可以参考权衡一下。
工具
- ImageMagick 、Gifsicle : 服务器及批量压缩的好工具。
- PNGGauntlet: 把GIF转换成PNG8,如果是GIF动画经转换后则成了静态的PNG8图片。对现有的PNG8、PNG24、PNG32进行二次压缩,把多余的数据块清除。
- TweakPNG: 是一款PNG数据块检查工具,经压缩过的PNG一般保留的数据块不超过5个。
- Fireworks与Photoshop: 相同的质量,Fireworks比Photoshop输出的图片体积更小。
- 更多的工具参考: http://www.phpied.com/give-png-a-chance/
建议继续学习:
- WEB系统需要关注的一些点 (阅读:14128)
- 30分钟3300%性能提升――python+memcached网页优化小记 (阅读:12142)
- 基于SSD的数据库性能优化 (阅读:7424)
- jQuery性能优化指南 (阅读:7334)
- 一次简单C程序的性能优化 (阅读:5606)
- mysql sql 百万级数据库优化方案 (阅读:5067)
- 一次神奇的MySQL优化 (阅读:4907)
- PHP最佳实践 (阅读:4970)
- Linux 64位, MySQL, Swap & Memory 优化 (阅读:4493)
- PHP 性能优化技巧-google (阅读:4427)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:A/B测试:实现方法
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 优化 图像
- 发布时间:2010-09-27 00:11:40
建议继续学习
近3天十大热文
- [40] 界面设计速成
- [35] Oracle MTS模式下 进程地址与会话信
- [32] 如何拿下简短的域名
- [32] IOS安全–浅谈关于IOS加固的几种方法
- [32] 视觉调整-设计师 vs. 逻辑
- [31] 程序员技术练级攻略
- [31] 图书馆的世界纪录
- [30] 【社会化设计】自我(self)部分――欢迎区
- [30] android 开发入门
- [27] 读书笔记-壹百度:百度十年千倍的29条法则