Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
web图像存储窥见
Search
w3cplus
December 14, 2012
Technology
5
490
web图像存储窥见
详细介绍Web图片的使用
w3cplus
December 14, 2012
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
190
CSS Future
w3cplus
2
590
Web Animation
w3cplus
5
460
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
540
Responsive小试牛刀
w3cplus
3
520
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
360
http协议与缓存简述
w3cplus
5
500
Other Decks in Technology
See All in Technology
アジャイル開発とスクラム
araihara
0
160
Building Products in the LLM Era
ymatsuwitter
10
4.4k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
2.5Dモデルのすべて
yu4u
2
610
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
SCSAから学ぶセキュリティ管理
masakamayama
0
140
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fireside Chat
paigeccino
34
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Producing Creativity
orderedlist
PRO
343
39k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building an army of robots
kneath
302
45k
The Cult of Friendly URLs
andyhume
78
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
15k
Transcript
web图像存储窥见 WEB Image Save
WEB Image Save 0-1 序文 流水之谜 图 0-1 ~ 0-2
模糊? 图片模糊甚至出现马赛克?… 图 0-3 ~ 0-4 颜色丢失? 出现失真甚至出现色块 现象?…
WEB Image Save 0-2 序文 落花之谜 图 0-5 ~ 0-6
毛刺? 边缘过渡不平滑,有白 色毛刺?… 图 0-7 ~ 0-8 透明丢失? 图片透明区域无法完 美保存?…
WEB Image Save 0-3 序文 轻烟之谜 Size:20.8K 图 0-9 庞大?
图片文件过大,如何平衡质量和传 输(下载)速度?… jpg png24 图 0-10 如何选择? 应该用什么格式保存这张图片? 啥格式能得到最大实惠?…
WEB Image Save 0-4 序文 元芳你怎么看? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? ??? 曾经内心两头小鹿乱撞? 曾经梦里被一万只欢腾的 草泥马践踏? 曾经一度世界观崩溃? 你 需 要 正 能 量 �
WEB Image Save 0-4 内容大纲 常见图片种类 各类图片的存储优势 GIF/PNG/JPG 浅析 优化已经优化的图片
结束致词 1 2 3 5 6 常用的优化方法 4
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。以牺牲图像 质量为代价。 支持动画
WEB Image Save 1-2 GIF简介 图 1-1 图 1-2 图
1-3 体质:256色小家碧玉型 技能:支持动画卖萌 放大 6 倍后…
WEB Image Save 1-3 PNG简介-(png8) 图 1-4 图 1-5 体质:256色贤妻良母型
技能:更优存储算法 16色,足够满足我们的桑尼号… 图 1-6 256色能做啥… 图 1-7 注意阴影…
WEB Image Save 1-4 PNG简介-(png24/32/…) 体质:彩妆艳丽丰满型 技能:透明通道存储 管子和阴影的部分,像素带有一定透明度。 我们将这种像素称为: Alpha通道数据
图 1-9 支持全色彩 图 1-10 图 1-11 能存a通道 png8无法保存a通道,通常软件会自动把a通道数据填充成白色。
WEB Image Save 1-5 JPG简介 体质:素颜蛇蝎佳人型 技能:无视色彩数量 保存写实图片最适 合的格式… 适合处理颜色丰富的图像,特别
是处理渐变色时尤其出众。 图 1-12 注意:有损压缩,不支持a通道数据 图 1-13 jpg格式 支持最高 级别的压缩(100: 1),不过,这种压 缩是牺牲图像质量 为代价。 80%品质 1%品质
WEB Image Save 1-6 像素图特别篇 像素图:由有序的像素点组成的,图片小。是一种以“像 素”(Pixel)为基本单位来制作的电脑绘图表现形式。 位图:大量无序的像素点组成,图片大。是使用像素阵 列来表示的,完整效果很精细的图片。 像素图和传统位图的关系?
像素图中所说的像素,是特指像素艺术, 一种以“点”为主要手法的绘图方式。 图 1-15 为什么要谈论像素图? 和即将要讨论的优化有关,无损格式以颜 色为保存单元,图像颜色数和体积成正比。
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.即完 全透明和不透明
WEB Image Save 2-2 gif/png8/png24/jpg 浅析 互动环节,一起猜最佳存储: 图 2-1 图
2-2 图 2-3 你猜到了嘛?……
WEB Image Save 3-1 使用 Photoshop 优化 图 3-1 展开软件菜单:文件
-- web和设备 所用格式,或按快捷键 Ctrl+Shift+Alt+S (windows)。 1.左上角是工具箱 2.左下角显示当前图像的存储大小 3.中间区域是图像预览 4.右侧是我们主要要讲的配置选项 图3-1 选择的格式不同,可用的配置项也不尽 相同。本次仅分享 ps 下的设置方法。 无论何时,选择“无”都不会是坏主意
WEB Image Save 3-2 Photoshop gif/png gif 和 png8 配置选项雷
同,这里仅以 gif 为例。 图 3-2 勾选则予许保存完全 透明的像素。 根据图片实际情况选择颜 色数量。(可实验得出) 天外音:透明颜色,也算作一种颜色,切记
WEB Image Save 3-3 Photoshop png24/jpg ps 可对 png24 进行优化的选项
非常少,稍后将用其他方式弥补。 图 3-3 左边是右边的预设方案,可直接对右 边进行细致调整,预览区会即时更新。 通常选品质80,结果会比较理想。 天外音:选择合适的格式之后,才有优化可谈论 图 3-4 连续和优化只能勾选其一,往往前者效果 略胜后者……
WEB Image Save 3-4 Photoshop 色调分离 色调分离技巧,是对 ps 优化 png24
能力不足的一丝弥补。 通常能优化 10%~30% 的存储空间 图 3-5 这个值为实验得出,改变加测试大 小,找到存储的平衡点。 天外音:png24里假如不存储透明像素,效率将坐火箭 图 3-6 该技巧需要略微练习……
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
WEB Image Save