潘杰茂_网络图像优化
-
Upload
webrebuild -
Category
Technology
-
view
2.083 -
download
5
description
Transcript of 潘杰茂_网络图像优化
网络图像优化
WebRebuild
一、选择格式二、优化方法三、优化工具
如何优化?
选择格式
INDEX01_ 选择格式
真色彩 jpg 、 png24 、 png32
真色彩图像 256 色以上 GIF : 256 色 PNG8 : 256 色
INDEX01_ 选择格式
当真色彩图像,使用 GIF 或 PNG8 后?
INDEX01_ 选择格式
调色板 gif 、 png8
调色板图像 PNG8 : 7.7 KB JPG14.5 KB PNG24 : 23.4 KB
INDEX01_ 选择格式
当调色板图像,使用 JPG 或 PNG24 后?
INDEX01_ 选择格式
小图片
PNG24 : 8.1 KB GIF : 3.1 KB PNG8 : 3.0 KB
57 X 57
INDEX01_ 选择格式
INDEX01_ 选择格式
一些简单的图像
JPG: 1850 byte GIF: 1450byte
INDEX01_ 选择格式
GIF: 1450byte
INDEX01_ 选择格式
GIF: 1450bytePNG8: 907byte
INDEX01_ 选择格式
优化方法
INDEX02_ 优化方法
GIF 动画压缩
优化前 177 KB 优化后 107 KB
INDEX02_ 优化方法
INDEX02_ 优化方法
INDEX02_ 优化方法
ImageMagickImageMagick (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/
INDEX02_ 优化方法
隔行扫描
隔行扫描 21.1KB
逐行扫描 18.7KB
INDEX02_ 优化方法
PhotoshopFireworks
INDEX02_ 优化方法
INDEX02_ 优化方法
GIF vs PNG8
GIF 15.9 KB PNG8 13.3 KB
INDEX02_ 优化方法
INDEX01_ 选择格式
一些简单的小图像
INDEX01_ 选择格式
PNG8 : 218 byteGIF : 205 byte
宽 15 像素 高 11 像素
单一的 17 种红色
INDEX02_ 优化方法
JPEG 压缩品质
品质 90% 品质 95% 品质 85% 品质 80%
INDEX02_ 优化方法
100% 品质 79K 80% 品质 19K
INDEX02_ 优化方法
12KB 9KB 5KB
INDEX02_ 优化方法
22 KB 18 KB
20 KB15 KB
INDEX02_ 优化方法
删除 锐化颜色边缘
INDEX02_ 优化方法
101 KB
79 KB
INDEX02_ 优化方法
优化后品质 80 % 79 KB优化前品质 80 % 101 KB
INDEX02_ 优化方法
渐进 JPEG
标准 JPEG
渐进 JPEG 10.9KB
12.4KB
PhotoshopFireworks
INDEX02_ 优化方法
INDEX02_ 优化方法
JPEG 图像噪点
没有噪音 13,711KB
5 % 噪音 14,817KB
10 % 噪音 17,408 KB
INDEX02_ 优化方法
纯色 192 bytes
5% 噪音 26,426 bytes
10% 噪音 26,457 bytes
INDEX02_ 优化方法
在 Photoshop 中去除噪点:1. 打开 图片(废话)。
2. 图像—模式— Lab 颜色。
3. 转到通道面板。
4. 将 a 通道进行高斯模糊数值在 15 左右, b 通道也同样处理。
5. 回到 Lab 通道(点一下 Lab 那里就可以了)。
6. 滤镜 — 杂色— 取出杂色(有的版本叫去斑)。
7. 最后可以使用模糊工具调整一下比较生硬的图像。
INDEX02_ 优化方法
INDEX02_ 优化方法
JPEG 2000
原图 48.9KB JPEG 压缩 1.85KB JPEG2000 压缩 1.79KB
JPEG2000 详细资料http://baike.baidu.com/view/300613.html
http://www.souxin.com/jpeg2000/index.htm
http://www.crc.ricoh.com/~gormish/jpeg2000_university_talk_200104_4up.pdf
http://www.crc.ricoh.com/~gormish/jpeg2000.html
http://zh.wikipedia.org/zh-tw/JPEG_2000
http://www.qianjia.com/html/2007-04/27006.html
INDEX02_ 优化方法
INDEX02_ 优化方法
PNG 格式
PNG8
调色板图像,支持半透明。
PNG24
真色彩,不支持透明。
PNG32
真色彩,支持半透明。
Fireworks Photoshop
INDEX02_ 优化方法
INDEX02_ 优化方法
比 PNG32 更小的替代品
PNG3258KB
?18KB
INDEX02_ 优化方法
INDEX02_ 优化方法
Video
INDEX02_ 优化方法
Alpha PNG
INDEX02_ 优化方法
Alpha PNG32 26.9KB Alpha PNG32 8.23KB
INDEX02_ 优化方法
优化工具
GIF 及 PNG 优化工具
http://www.phpied.com/big-list-image-optimization-tools/
INDEX03_ 优化工具
INDEX03_ 优化工具
INDEX03_ 优化工具
Fireworks vs Photoshop
INDEX03_ 优化工具
INDEX03_ 优化工具
INDEX03_ 优化工具
Fireworks
Photoshop
TweakPNG
INDEX03_ 优化工具
INDEX03_ 优化工具