2010年Webrebuild年会广州站<br />网络图像优化<br />WebRebuild<br /> stevenpan <br />
选择格式<br />
INDEX01_选择格式<br />真色彩jpg、png24、png32<br />
INDEX01_选择格式<br />当真色彩图像,使用GIF或PNG8后?<br />PNG8: 256种色<br />原图:大于256色<br />GIF :256种色<br />
INDEX01_选择格式<br />调色板gif、png8<br />
INDEX01_选择格式<br />当调色板图像,使用JPG或PNG24后?<br />PNG24: 23.4 KB<br />PNG8:7.7 KB<br />JPG14.5 KB<br />
INDEX01_选择格式<br />小图用PNG8<br />
INDEX01_选择格式<br />57 X 57<br />PNG24:8.1 KB<br />GIF:3.1 KB <br />PNG8:3.0 KB<br />
INDEX01_选择格式<br />一些简单的图像<br />
INDEX01_选择格式<br />JPEG不适合保存图形分明线条简单的图像。<br />GIF:  1450byte<br />PNG8:  907byte<br />JPG:  1850 byte<br />
优化方法<br />
INDEX02_优化方法<br />GIF 动画压缩<br />
INDEX02_优化方法<br />优化前 177 KB<br />优化后 107 KB<br />
INDEX02_优化方法<br />
INDEX02_优化方法<br /> <br />ImageMagick<br />ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、...
INDEX02_优化方法<br />隔行扫描<br />
INDEX02_优化方法<br />逐行扫描<br />18.7KB<br />隔行扫描 <br />21.1KB<br />
INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
INDEX02_优化方法<br />GIF vs PNG<br />
INDEX02_优化方法<br />GIF 15.9 KB<br />PNG8  13.3 KB<br />
INDEX01_选择格式<br />一些简单的小图像<br />
INDEX01_选择格式<br />宽15像素  高11像素<br />单一的17种红色<br />PNG8: 218 byte<br />GIF: 205 byte<br />
INDEX02_优化方法<br />JPEG压缩品质<br />
INDEX02_优化方法<br />品质80%<br />品质85%<br />品质95%<br />品质90%<br />
INDEX02_优化方法<br />100%品质  79K<br />80%品质  19K<br />
INDEX02_优化方法<br />12KB<br />9KB<br />5KB<br />
18 KB<br />22 KB<br />20 KB<br />15 KB<br />
INDEX02_优化方法<br />删除 锐化颜色边缘<br />
INDEX02_优化方法<br />101 KB<br />79 KB<br />
INDEX02_优化方法<br />优化后品质80%     79 KB<br />优化前品质80%     101 KB<br />
INDEX02_优化方法<br />渐进JPEG<br />
标准JPEG<br />12.4KB<br />渐进JPEG<br />10.9KB<br />
INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
INDEX02_优化方法<br />JPEG图像噪点<br />
INDEX02_优化方法<br />没有噪音<br /> 13,711KB<br />5 %噪音<br />14,817KB<br />10 %噪音 <br />17,408 KB<br />
INDEX02_优化方法<br />纯色 <br />192 bytes<br />5%噪音<br /> 26,426 bytes<br />10%噪音<br />26,457 bytes<br />
INDEX02_优化方法<br />在Photoshop中去除噪点:<br />1.打开图片(废话)。<br />2. 图像—模式— Lab颜色。<br />3. 转到通道面板。<br />4.将a通道进行高斯模糊数值在15左右,b通道也同样处...
INDEX02_优化方法<br />JPEG 2000<br />
原图 48.9KB<br />JPEG压缩  1.85KB<br />JPEG2000 压缩  1.79KB<br />
INDEX02_优化方法<br />JPEG2000详细资料<br />http://baike.baidu.com/view/300613.htm?fr=ala0_1_1<br />
INDEX02_优化方法<br />PNG格式<br />
INDEX02_优化方法<br /> <br /><ul><li>PNG8</li></ul>调色板图像,支持半透明。<br /><ul><li>PNG24</li></ul>真色彩,不支持透明。<br /><ul><li>PNG32</li>...
INDEX02_优化方法<br />比PNG32更小的替代品<br />
INDEX02_优化方法<br />PNG32<br />58KB<br />?<br />18KB<br />
INDEX02_优化方法<br />Video<br />
INDEX02_优化方法<br />Alpha  PNG<br />
INDEX02_优化方法<br />Alpha PNG3226.9KB<br />Alpha PNG8   8.23KB<br />
INDEX02_优化方法<br />
优化工具<br />
GIF 及 PNG 优化工具<br />
INDEX03_优化工具<br />http://www.phpied.com/give-png-a-chance/<br />
INDEX03_优化工具<br />http://www.phpied.com/big-list-image-optimization-tools/<br />
INDEX03_优化工具<br />
INDEX03_优化工具<br />
INDEX03_优化工具<br />Fireworks vs Photoshop<br />
INDEX03_优化工具<br />
INDEX03_优化工具<br />Fireworks<br />Photoshop<br />
INDEX03_优化工具<br />TweakPNG<br />
INDEX03_优化工具<br />
结语<br />感谢大家的参与和支持!<br />
Upcoming SlideShare
Loading in …5
×

潘杰茂 网络图像优化 V21

2,471
-1

Published on

潘杰茂 网络图像优化

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,471
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
104
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

潘杰茂 网络图像优化 V21

  1. 1. 2010年Webrebuild年会广州站<br />网络图像优化<br />WebRebuild<br /> stevenpan <br />
  2. 2. 选择格式<br />
  3. 3. INDEX01_选择格式<br />真色彩jpg、png24、png32<br />
  4. 4. INDEX01_选择格式<br />当真色彩图像,使用GIF或PNG8后?<br />PNG8: 256种色<br />原图:大于256色<br />GIF :256种色<br />
  5. 5. INDEX01_选择格式<br />调色板gif、png8<br />
  6. 6. INDEX01_选择格式<br />当调色板图像,使用JPG或PNG24后?<br />PNG24: 23.4 KB<br />PNG8:7.7 KB<br />JPG14.5 KB<br />
  7. 7. INDEX01_选择格式<br />小图用PNG8<br />
  8. 8. INDEX01_选择格式<br />57 X 57<br />PNG24:8.1 KB<br />GIF:3.1 KB <br />PNG8:3.0 KB<br />
  9. 9. INDEX01_选择格式<br />一些简单的图像<br />
  10. 10. INDEX01_选择格式<br />JPEG不适合保存图形分明线条简单的图像。<br />GIF: 1450byte<br />PNG8: 907byte<br />JPG: 1850 byte<br />
  11. 11. 优化方法<br />
  12. 12. INDEX02_优化方法<br />GIF 动画压缩<br />
  13. 13. INDEX02_优化方法<br />优化前 177 KB<br />优化后 107 KB<br />
  14. 14. INDEX02_优化方法<br />
  15. 15. 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 />
  16. 16. INDEX02_优化方法<br />隔行扫描<br />
  17. 17. INDEX02_优化方法<br />逐行扫描<br />18.7KB<br />隔行扫描 <br />21.1KB<br />
  18. 18. INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
  19. 19. INDEX02_优化方法<br />GIF vs PNG<br />
  20. 20. INDEX02_优化方法<br />GIF 15.9 KB<br />PNG8 13.3 KB<br />
  21. 21. INDEX01_选择格式<br />一些简单的小图像<br />
  22. 22. INDEX01_选择格式<br />宽15像素 高11像素<br />单一的17种红色<br />PNG8: 218 byte<br />GIF: 205 byte<br />
  23. 23. INDEX02_优化方法<br />JPEG压缩品质<br />
  24. 24. INDEX02_优化方法<br />品质80%<br />品质85%<br />品质95%<br />品质90%<br />
  25. 25. INDEX02_优化方法<br />100%品质 79K<br />80%品质 19K<br />
  26. 26. INDEX02_优化方法<br />12KB<br />9KB<br />5KB<br />
  27. 27. 18 KB<br />22 KB<br />20 KB<br />15 KB<br />
  28. 28. INDEX02_优化方法<br />删除 锐化颜色边缘<br />
  29. 29. INDEX02_优化方法<br />101 KB<br />79 KB<br />
  30. 30. INDEX02_优化方法<br />优化后品质80% 79 KB<br />优化前品质80% 101 KB<br />
  31. 31. INDEX02_优化方法<br />渐进JPEG<br />
  32. 32. 标准JPEG<br />12.4KB<br />渐进JPEG<br />10.9KB<br />
  33. 33. INDEX02_优化方法<br />Photoshop<br />Fireworks<br />
  34. 34. INDEX02_优化方法<br />JPEG图像噪点<br />
  35. 35. INDEX02_优化方法<br />没有噪音<br /> 13,711KB<br />5 %噪音<br />14,817KB<br />10 %噪音 <br />17,408 KB<br />
  36. 36. INDEX02_优化方法<br />纯色 <br />192 bytes<br />5%噪音<br /> 26,426 bytes<br />10%噪音<br />26,457 bytes<br />
  37. 37. INDEX02_优化方法<br />在Photoshop中去除噪点:<br />1.打开图片(废话)。<br />2. 图像—模式— Lab颜色。<br />3. 转到通道面板。<br />4.将a通道进行高斯模糊数值在15左右,b通道也同样处理。<br />5.回到Lab通道(点一下Lab那里就可以了)。<br />6.滤镜 — 杂色— 取出杂色(有的版本叫去斑)。<br />7.最后可以使用模糊工具调整一下比较生硬的图像。<br />
  38. 38. INDEX02_优化方法<br />JPEG 2000<br />
  39. 39. 原图 48.9KB<br />JPEG压缩 1.85KB<br />JPEG2000 压缩 1.79KB<br />
  40. 40. INDEX02_优化方法<br />JPEG2000详细资料<br />http://baike.baidu.com/view/300613.htm?fr=ala0_1_1<br />
  41. 41. INDEX02_优化方法<br />PNG格式<br />
  42. 42. 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 />PNG 的格式<br />
  43. 43. INDEX02_优化方法<br />比PNG32更小的替代品<br />
  44. 44. INDEX02_优化方法<br />PNG32<br />58KB<br />?<br />18KB<br />
  45. 45. INDEX02_优化方法<br />Video<br />
  46. 46. INDEX02_优化方法<br />Alpha PNG<br />
  47. 47. INDEX02_优化方法<br />Alpha PNG3226.9KB<br />Alpha PNG8 8.23KB<br />
  48. 48. INDEX02_优化方法<br />
  49. 49. 优化工具<br />
  50. 50. GIF 及 PNG 优化工具<br />
  51. 51. INDEX03_优化工具<br />http://www.phpied.com/give-png-a-chance/<br />
  52. 52. INDEX03_优化工具<br />http://www.phpied.com/big-list-image-optimization-tools/<br />
  53. 53. INDEX03_优化工具<br />
  54. 54. INDEX03_优化工具<br />
  55. 55. INDEX03_优化工具<br />Fireworks vs Photoshop<br />
  56. 56. INDEX03_优化工具<br />
  57. 57. INDEX03_优化工具<br />Fireworks<br />Photoshop<br />
  58. 58. INDEX03_优化工具<br />TweakPNG<br />
  59. 59. INDEX03_优化工具<br />
  60. 60. 结语<br />感谢大家的参与和支持!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×