潘杰茂 网络图像优化 V21 - Presentation Transcript 1. 2010年Webrebuild年会广州站 网络图像优化 WebRebuild stevenpan 2. 选择格式 3. INDEX01_选择格式 真色彩jpg、png24、png32 4. INDEX01_选择格式 当真色彩图像，使用GIF或PNG8后？ PNG8： 256种色 原图：大于256色 GIF ：256种色 5. INDEX01_选择格式 调色板gif、png8 6. INDEX01_选择格式 当调色板图像，使用JPG或PNG24后？ PNG24： 23.4 KB PNG8：7.7 KB JPG14.5 KB 7. INDEX01_选择格式 小图用PNG8 8. INDEX01_选择格式 57 X 57 PNG24：8.1 KB GIF：3.1 KB PNG8：3.0 KB 9. INDEX01_选择格式 一些简单的图像 10. INDEX01_选择格式 JPEG不适合保存图形分明线条简单的图像。 GIF: 1450byte PNG8: 907byte JPG: 1850 byte 11. 优化方法 12. INDEX02_优化方法 GIF 动画压缩 13. INDEX02_优化方法 优化前 177 KB 优化后 107 KB 14. INDEX02_优化方法 15. INDEX02_优化方法 ImageMagick ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用，图片的旋转、组合，文本，直线，多边形，椭圆，曲线，附加到图片伸展旋转。ImageMagick是免费软件：全部源码开放，可以自由使用，复制，修改，发布。它遵守GPL许可协议。它可以运行于大多数的操作系统。ImageMagick的大多数功能的使用都来源于命令行工具。 http:/// Gifsicle *Batch mode for changing GIFs in place. * Prints detailed information about GIFs, including comments. * Control over interlacing, comments, looping, transparency... * 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. * It can shrink colormaps and change images to use the Web-safe palette (or any colormap you choose). * It can optimize your animations! This stores only the changed portion of each frame, and can radically shrink your GIFsmercial optimizers. * Unoptimizing animations, which makes them easier to edit. http://www.lcdf.org/~eddietwo/gifsicle/ 16. INDEX02_优化方法 隔行扫描 17. INDEX02_优化方法 逐行扫描 18.7KB 隔行扫描 21.1KB 18. INDEX02_优化方法 Photoshop Fireworks 19. INDEX02_优化方法 GIF vs PNG 20. INDEX02_优化方法 GIF 15.9 KB PNG8 13.3 KB 21. INDEX01_选择格式 一些简单的小图像 22. INDEX01_选择格式 宽15像素 高11像素 单一的17种红色 PNG8： 218 byte GIF： 205 byte 23. INDEX02_优化方法 JPEG压缩品质 24. INDEX02_优化方法 品质80% 品质85% 品质95% 品质90% 25. INDEX02_优化方法 100%品质 79K 80%品质 19K 26. INDEX02_优化方法 12KB 9KB 5KB 27. 18 KB 22 KB 20 KB 15 KB 28. INDEX02_优化方法 删除 锐化颜色边缘 29. INDEX02_优化方法 101 KB 79 KB 30. INDEX02_优化方法 优化后品质80％ 79 KB 优化前品质80％ 101 KB 31. INDEX02_优化方法 渐进JPEG 32. 标准JPEG 12.4KB 渐进JPEG 10.9KB 33. INDEX02_优化方法 Photoshop Fireworks 34. INDEX02_优化方法 JPEG图像噪点 35. INDEX02_优化方法 没有噪音 13,711KB 5 %噪音 14,817KB 10 %噪音 17,408 KB 36. INDEX02_优化方法 纯色 192 bytes 5%噪音 26,426 bytes 10%噪音 26,457 bytes 37. INDEX02_优化方法 在Photoshop中去除噪点： 1.打开图片（废话）。 2. 图像—模式— Lab颜色。 3. 转到通道面板。 4.将a通道进行高斯模糊数值在15左右，b通道也同样处理。 5.回到Lab通道（点一下Lab那里就可以了）。 6.滤镜 — 杂色— 取出杂色（有的版本叫去斑）。 7.最后可以使用模糊工具调整一下比较生硬的图像。 38. INDEX02_优化方法 JPEG 2000 39. 原图 48.9KB JPEG压缩 1.85KB JPEG2000 压缩 1.79KB 40. INDEX02_优化方法 JPEG2000详细资料 http://baike/view/300613.htm?fr=ala0_1_1 41. INDEX02_优化方法 PNG格式 42. INDEX02_优化方法 * PNG8 调色板图像，支持半透明。 * PNG24 真色彩，不支持透明。 * PNG32 真色彩，支持半透明。 Fireworks Photoshop PNG 的格式 43. INDEX02_优化方法 比PNG32更小的替代品 44. INDEX02_优化方法 PNG32 58KB ？ 18KB 45. INDEX02_优化方法 Video 46. INDEX02_优化方法 Alpha PNG 47. INDEX02_优化方法 Alpha PNG3226.9KB Alpha PNG8 8.23KB 48. INDEX02_优化方法 49. 优化工具 50. GIF 及 PNG 优化工具 51. INDEX03_优化工具 http:///give-png-a-chance/ 52. INDEX03_优化工具 http:///big-list-image-optimization-tools/ 53. INDEX03_优化工具 54. INDEX03_优化工具 55. INDEX03_优化工具 Fireworks vs Photoshop 56. INDEX03_优化工具 57. INDEX03_优化工具 Fireworks Photoshop 58. INDEX03_优化工具 TweakPNG 59. INDEX03_优化工具 60. 结语 感谢大家的参与和支持！