Successfully reported this slideshow.

潘杰茂_网络图像优化

2,508 views

Published on

合色的图像
真色彩图像(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/

Published in: Technology
  • 非常好的分享,谢谢!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

潘杰茂_网络图像优化

  1. 1. 网络图像优化<br />WebRebuild<br />
  2. 2. 如何优化?<br />一、选择格式<br />二、优化方法<br />三、优化工具<br />
  3. 3. 选择格式<br />
  4. 4. INDEX01_选择格式<br />真色彩jpg、png24、png32<br />
  5. 5. INDEX01_选择格式<br />当真色彩图像,使用GIF或PNG8后?<br />PNG8: 256色<br />真色彩图像 256色以上<br />GIF :256色<br />
  6. 6. INDEX01_选择格式<br />调色板gif、png8<br />
  7. 7. INDEX01_选择格式<br />当调色板图像,使用JPG或PNG24后?<br />PNG24: 23.4 KB<br />调色板图像 PNG8:7.7 KB<br />JPG14.5 KB<br />
  8. 8. INDEX01_选择格式<br />小图片<br />
  9. 9. INDEX01_选择格式<br />57 X 57<br />PNG24:8.1 KB<br />GIF:3.1 KB <br />PNG8:3.0 KB<br />
  10. 10. INDEX01_选择格式<br />一些简单的图像<br />
  11. 11. INDEX01_选择格式<br />GIF: 1450byte<br />JPG: 1850 byte<br />
  12. 12. INDEX01_选择格式<br />GIF: 1450byte<br />
  13. 13. INDEX01_选择格式<br />GIF: 1450byte<br />PNG8: 907byte<br />
  14. 14. 优化方法<br />
  15. 15. INDEX02_优化方法<br />GIF 动画压缩<br />
  16. 16. INDEX02_优化方法<br />优化前 177 KB<br />优化后 107 KB<br />
  17. 17. INDEX02_优化方法<br />
  18. 18. INDEX02_优化方法<br /> <br />ImageMagick<br />ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、组合,文本,直线,多边形,椭圆,曲线,附加到图片伸展旋转。ImageMagick是免费软件:全部源码开放,可以自由使用,复制,修改,发布。它遵守GPL许可协议。它可以运行于大多数的操作系统。ImageMagick的大多数功能的使用都来源于命令行工具。 <br />http://www.imagemagick.com.cn/<br />Gifsicle<br />*Batch mode for changing GIFs in place.<br />* Prints detailed information about GIFs, including comments.<br />* Control over interlacing, comments, looping, transparency...<br />* Creates well-behaved GIFs: removes redundant colors, only uses local color tables if it absolutely has to (local color tables waste space and can cause * viewing artifacts), etc.<br />* It can shrink colormaps and change images to use the Web-safe palette (or any colormap you choose).<br />* It can optimize your animations! This stores only the changed portion of each frame, and can radically shrink your GIFs. You can also use transparency to make them even smaller. Gifsicle’s optimizer is pretty powerful, and usually reduces animations to within a couple bytes of the best commercial optimizers.<br />* Unoptimizing animations, which makes them easier to edit.<br />http://www.lcdf.org/~eddietwo/gifsicle/<br />
  19. 19. INDEX02_优化方法<br />隔行扫描<br />
  20. 20. INDEX02_优化方法<br />逐行扫描<br />18.7KB<br />隔行扫描 <br />21.1KB<br />
  21. 21. INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
  22. 22. INDEX02_优化方法<br />GIF vs PNG8<br />
  23. 23. INDEX02_优化方法<br />GIF 15.9 KB<br />PNG8 13.3 KB<br />
  24. 24. INDEX01_选择格式<br />一些简单的小图像<br />
  25. 25. INDEX01_选择格式<br />宽15像素 高11像素<br />单一的17种红色<br />PNG8: 218 byte<br />GIF: 205 byte<br />
  26. 26. INDEX02_优化方法<br />JPEG压缩品质<br />
  27. 27. INDEX02_优化方法<br />品质80%<br />品质85%<br />品质90%<br />品质95%<br />
  28. 28. INDEX02_优化方法<br />100%品质 79K<br />80%品质 19K<br />
  29. 29. INDEX02_优化方法<br />12KB<br />9KB<br />5KB<br />
  30. 30. 18 KB<br />22 KB<br />20 KB<br />15 KB<br />
  31. 31. INDEX02_优化方法<br />删除 锐化颜色边缘<br />
  32. 32. INDEX02_优化方法<br />101 KB<br />79 KB<br />
  33. 33. INDEX02_优化方法<br />优化后品质80% 79 KB<br />优化前品质80% 101 KB<br />
  34. 34. INDEX02_优化方法<br />渐进JPEG<br />
  35. 35. 标准JPEG<br />12.4KB<br />渐进JPEG<br />10.9KB<br />
  36. 36. INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
  37. 37. INDEX02_优化方法<br />JPEG图像噪点<br />
  38. 38. INDEX02_优化方法<br />没有噪音<br /> 13,711KB<br />5 %噪音<br />14,817KB<br />10 %噪音 <br />17,408 KB<br />
  39. 39. INDEX02_优化方法<br />纯色 <br />192 bytes<br />5%噪音<br /> 26,426 bytes<br />10%噪音<br />26,457 bytes<br />
  40. 40. INDEX02_优化方法<br />在Photoshop中去除噪点:<br />1.打开图片(废话)。<br />2. 图像—模式— Lab颜色。<br />3. 转到通道面板。<br />4.将a通道进行高斯模糊数值在15左右,b通道也同样处理。<br />5.回到Lab通道(点一下Lab那里就可以了)。<br />6.滤镜 — 杂色— 取出杂色(有的版本叫去斑)。<br />7.最后可以使用模糊工具调整一下比较生硬的图像。<br />
  41. 41. INDEX02_优化方法<br />JPEG 2000<br />
  42. 42. 原图 48.9KB<br />JPEG压缩 1.85KB<br />JPEG2000 压缩 1.79KB<br />
  43. 43. INDEX02_优化方法<br />JPEG2000详细资料<br />http://baike.baidu.com/view/300613.html<br />http://www.souxin.com/jpeg2000/index.htm<br />http://www.crc.ricoh.com/~gormish/jpeg2000_university_talk_200104_4up.pdf<br />http://www.crc.ricoh.com/~gormish/jpeg2000.html<br />http://zh.wikipedia.org/zh-tw/JPEG_2000<br />http://www.qianjia.com/html/2007-04/27006.html<br />
  44. 44. INDEX02_优化方法<br />PNG格式<br />
  45. 45. INDEX02_优化方法<br /> <br /><ul><li>PNG8</li></ul>调色板图像,支持半透明。<br /><ul><li>PNG24</li></ul>真色彩,不支持透明。<br /><ul><li>PNG32</li></ul>真色彩,支持半透明。<br />Fireworks<br />Photoshop<br />
  46. 46. INDEX02_优化方法<br />比PNG32更小的替代品<br />
  47. 47. INDEX02_优化方法<br />PNG32<br />58KB<br />?<br />18KB<br />
  48. 48. INDEX02_优化方法<br />Video<br />
  49. 49. INDEX02_优化方法<br />Alpha PNG<br />
  50. 50. INDEX02_优化方法<br />Alpha PNG3226.9KB<br />Alpha PNG328.23KB<br />
  51. 51. INDEX02_优化方法<br />
  52. 52. 优化工具<br />
  53. 53. GIF 及 PNG 优化工具<br />
  54. 54. INDEX03_优化工具<br />http://www.phpied.com/give-png-a-chance/<br />
  55. 55. INDEX03_优化工具<br />http://www.phpied.com/big-list-image-optimization-tools/<br />
  56. 56. INDEX03_优化工具<br />
  57. 57. INDEX03_优化工具<br />
  58. 58. INDEX03_优化工具<br />Fireworks vs Photoshop<br />
  59. 59. INDEX03_优化工具<br />
  60. 60. INDEX03_优化工具<br />Fireworks<br />Photoshop<br />
  61. 61. INDEX03_优化工具<br />TweakPNG<br />
  62. 62. INDEX03_优化工具<br />
  63. 63. 结语<br />感谢大家的参与和支持!<br />www.gulu77.com<br />

×