web图像存储窥见

详细介绍Web图片的使用

Transcript

1. web图像存储窥见 WEB Image Save
2. WEB Image Save 0-1 序文 流水之谜 图 0-1 ~ 0-2 模糊？ 图片模糊甚至出现马赛克？… 图 0-3 ~ 0-4 颜色丢失？ 出现失真甚至出现色块 现象？…
3. WEB Image Save 0-2 序文 落花之谜 图 0-5 ~ 0-6 毛刺？ 边缘过渡不平滑，有白 色毛刺？… 图 0-7 ~ 0-8 透明丢失？ 图片透明区域无法完 美保存？…
4. WEB Image Save 0-3 序文 轻烟之谜 Size:20.8K 图 0-9 庞大？ 图片文件过大，如何平衡质量和传 输(下载)速度？… jpg png24 图 0-10 如何选择？ 应该用什么格式保存这张图片? 啥格式能得到最大实惠？…
5. WEB Image Save 0-4 序文 元芳你怎么看？ ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? 曾经内心两头小鹿乱撞？ 曾经梦里被一万只欢腾的 草泥马践踏？ 曾经一度世界观崩溃？ 你 需 要 正 能 量 �
6. WEB Image Save 0-4 内容大纲 常见图片种类 各类图片的存储优势 GIF/PNG/JPG 浅析 优化已经优化的图片 结束致词 1 2 3 5 6 常用的优化方法 4
7. WEB Image Save 图片 (image) 矢量图 (vectogram) 位图 (bitmap) Illustrator,Coreldraw .ai,.cdr,eps,svg… Photoshop,Fireworks .gif,.png,jpg,.bmp… 1-1 图片族谱 png8 png24 png32 …… 升级的解决方案 保存Alpha通道数据 全色PNG gif png jpg(jpeg) bmp (Bitmap) LZW无损压缩(256) 不压缩 LZ77无损压缩 有损压缩(24位) 高保真，文件也较 大，不适合web传输 最常见，压缩率高达 100:1。以牺牲图像 质量为代价。 支持动画
8. WEB Image Save 1-2 GIF简介 图 1-1 图 1-2 图 1-3 体质：256色小家碧玉型 技能：支持动画卖萌 放大 6 倍后…
9. WEB Image Save 1-3 PNG简介-(png8) 图 1-4 图 1-5 体质：256色贤妻良母型 技能：更优存储算法 16色，足够满足我们的桑尼号… 图 1-6 256色能做啥… 图 1-7 注意阴影…
10. WEB Image Save 1-4 PNG简介-(png24/32/…) 体质：彩妆艳丽丰满型 技能：透明通道存储 管子和阴影的部分，像素带有一定透明度。 我们将这种像素称为： Alpha通道数据 图 1-9 支持全色彩 图 1-10 图 1-11 能存a通道 png8无法保存a通道，通常软件会自动把a通道数据填充成白色。
11. WEB Image Save 1-5 JPG简介 体质：素颜蛇蝎佳人型 技能：无视色彩数量 保存写实图片最适 合的格式… 适合处理颜色丰富的图像，特别 是处理渐变色时尤其出众。 图 1-12 注意：有损压缩，不支持a通道数据 图 1-13 jpg格式 支持最高 级别的压缩(100: 1)，不过，这种压 缩是牺牲图像质量 为代价。 80%品质 1%品质
12. WEB Image Save 1-6 像素图特别篇 像素图：由有序的像素点组成的，图片小。是一种以“像 素”（Pixel）为基本单位来制作的电脑绘图表现形式。 位图：大量无序的像素点组成，图片大。是使用像素阵 列来表示的，完整效果很精细的图片。 像素图和传统位图的关系？ 像素图中所说的像素，是特指像素艺术， 一种以“点”为主要手法的绘图方式。 图 1-15 为什么要谈论像素图？ 和即将要讨论的优化有关，无损格式以颜 色为保存单元，图像颜色数和体积成正比。
13. WEB Image Save 2-1 gif/png8/png24/jpg 浅析 体质：256色小家碧玉型 技能：支持动画卖萌 gif 体质：彩妆艳丽丰满型 技能：透明通道存储 png24 png8 体质：256色贤妻良母型 技能：更优存储算法 体质：素颜蛇蝎佳人型 技能：无视色彩数量 jpg png8 常 作为 gif 的升级方 案使用。 但处理颜 色数极少 (2~6)，高 宽(< 20) 极小的情 况下，gif 要优于 png8。 无损图世界中的 三个基友，保存 时以颜色为基础 单位。对于颜色 较少、实心或纯 色区域大的较简 单的作品，常能 较理想的存储 一句话概况 主旨：自残 欢乐多！对 于色彩复杂 的图像，处 理的比较优 雅。 gif/png8 支持透 明通道，但值只 能是 0 或 1.即完 全透明和不透明
14. WEB Image Save 2-2 gif/png8/png24/jpg 浅析 互动环节，一起猜最佳存储： 图 2-1 图 2-2 图 2-3 你猜到了嘛？……
15. WEB Image Save 3-1 使用 Photoshop 优化 图 3-1 展开软件菜单：文件 -- web和设备 所用格式，或按快捷键 Ctrl+Shift+Alt+S (windows)。 1.左上角是工具箱 2.左下角显示当前图像的存储大小 3.中间区域是图像预览 4.右侧是我们主要要讲的配置选项 图3-1 选择的格式不同，可用的配置项也不尽 相同。本次仅分享 ps 下的设置方法。 无论何时，选择“无”都不会是坏主意
16. WEB Image Save 3-2 Photoshop gif/png gif 和 png8 配置选项雷 同，这里仅以 gif 为例。 图 3-2 勾选则予许保存完全 透明的像素。 根据图片实际情况选择颜 色数量。(可实验得出) 天外音：透明颜色，也算作一种颜色，切记
17. WEB Image Save 3-3 Photoshop png24/jpg ps 可对 png24 进行优化的选项 非常少，稍后将用其他方式弥补。 图 3-3 左边是右边的预设方案，可直接对右 边进行细致调整，预览区会即时更新。 通常选品质80，结果会比较理想。 天外音：选择合适的格式之后，才有优化可谈论 图 3-4 连续和优化只能勾选其一，往往前者效果 略胜后者……
18. WEB Image Save 3-4 Photoshop 色调分离 色调分离技巧，是对 ps 优化 png24 能力不足的一丝弥补。 通常能优化 10%~30% 的存储空间 图 3-5 这个值为实验得出，改变加测试大 小，找到存储的平衡点。 天外音：png24里假如不存储透明像素，效率将坐火箭 图 3-6 该技巧需要略微练习……
19. WEB Image Save 4-1 优化工具介绍 WEB：punypng( http://www.punypng.com/ ) 天外音：不同优化算法可对同一张图多次使用 图像均采用一定算法编织，熟悉对应图像算法的人可以对图像进行算法级的优化，假 如你不是这个人，也不关心具体的图像算法，那就让工具帮你吧…… Windows：RIOT(Radical Image Optimization Tool) Mac OS X：ImageOptim AdvPNG、OptiPNG、Pngcrush、JpegOptim、jpegtran、Gifsicle 和 PNGOUT AdvPNG、OptiPNG、PNGOUT
20. WEB Image Save