• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,109
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
103
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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://www.imagemagick.com.cn/
    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 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.
    * 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.baidu.com/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://www.phpied.com/give-png-a-chance/
  • 52. INDEX03_优化工具
    http://www.phpied.com/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. 结语
    感谢大家的参与和支持!