图像类型
位图 ( 光栅 ):一种图像,由称为像素的单个彩色盒子网格组成. 位图图像包括gif, jpg, psd, tiff, pict, bmp等文件格式. 位图图像有时会出现“像素化”,并且当它们的大小增加时会失去质量.
向量: 用数学方程式描述线条和填充区域的图像. 矢量图像包括png、ai和swf文件等. 矢量图像可以在不损失任何质量的情况下调整大小. 矢量图像经常被转换成位图图像(gif和jpg)用于网络. 这种转换, 有时也称为图形的“光栅化”, 可以是非常有用的,因为我们目前没有一个建立和接受的矢量格式在网络上.
一些浏览器, 例如Internet Explorer 4+, Netscape 7, 和Safari, 可以显示PNG文件(矢量图像). 然而, 因为不是所有的浏览器都支持矢量格式, 矢量图像应该转换为位图图像,以适应尽可能多的用户.
夏季的文件格式
gif
- 图形交换格式
- 压缩相同颜色的水平条带
- 用于线条绘制, 1色区域的图纸, 形状简单,边缘坚硬, 文本, 动画, 还有纹理映射
- 不适合大多数照片
- 256色限制
- 可以包含透明度
- 能不能在网页上显示,跨平台,跨浏览器
- 您可以通过在导出时从调色板中删除颜色来更改文件大小
jpeg / jpg
- 联合摄影专家组
- 将相邻像素更改为平均颜色(消除复杂性)
- 用于照片,需要柔软光滑边缘的形状
- 不适合需要硬边的小文本或形状
- 能包含超过1600万种颜色吗
- 无法显示透明度
- 能不能在网页上显示,跨平台,跨浏览器
- 压缩比GIF小,因为它在压缩时会删除数据
- 您可以通过选择导出时的损失量来更改文件大小
- 反复压缩和解压,有不同程度的损失, 随着时间的推移, 当单个文件在互联网上传播时,会导致jpeg降级吗
psd,人工智能
- 从烟花,Photoshop和Illustrator的原始文件
- 保存在一个单独的文件夹,不要扔掉!
- 将允许您编辑图层,文本对象,调色板等
- png文件可以在ie4 +、Netscape 7和Safari中显示,但不能在任何其他浏览器中显示
- PSD和ai文件无法在web上显示
png
- 便携式网络图形
- 文件类型:光栅图像
- 跨平台的
- 无损,高效压缩
- Optimizable
- 易于实现
- 开源——经常用于各种各样的应用程序、视觉效果和界面
- 颜色深度的范围为每像素1-64位,但仅限于rbg衍生的编解码器. 例如,这就排除了CMYK.
tiff
- 标记图像文件格式
- 文件类型:光栅图像
- 最广泛用于桌面出版和存档高质量照片的文件格式
- 支持RGB, CMYK,灰度,实验室和索引颜色
图像文件大小
调色板
RGB
- 最常见的调色板
- 由红、绿、蓝三色混合而成
- 可以在较新的电脑浏览器中看到吗
合法的
- 216种颜色在Macintosh和窗户电脑上的显示效果相似
- 是否可以在只能显示256色的旧电脑/显示器上工作
自定义
- 设置何时导出GIF图像或在导出JPG图像之前
- 减少颜色的数量,只保留绝对必要的颜色
- 最小调色板=最小文件大小
CMYK
- 青色/红色/黄色/黑色
- 打印图像需要这种颜色模式(RGB文件必须转换为CMYK才能打印)
- CMYK不用于网页图像
解决方法: 阅读从实习生Binder链接的文档.
图片尺寸: 尺寸越大,文件大小越大.
处理图像的技巧
犹豫不决
用于gif上,允许“更多”的颜色. 不同的颜色以棋盘图案的方式放在相邻的像素上,以欺骗眼睛,使其认为它们混合在一起形成了一种新的颜色. 由于gif的压缩方式,抖动会大大增加图像的文件大小. 使用抖动的唯一好时机是当你的图像中有渐变或渐变色的时候. 抖动将使渐变看起来更真实,而不像纯色带.
正常的gif 大小:4 KB |
犹豫gif |
交错gif和渐进式jpg
用于在屏幕上显示更快的图像预览. 隔行gif和渐进式jpg下载交替行像素, 而不是第一个像素到最后. 这给用户一种更快下载的错觉,因为他们能够更快地看到更多的总图像, 但这些图像实际上需要更长的下载时间. 如果您的页面上有很多图像,导致下载速度很慢,这可能会很有用. 用户将能够更快地看到图像的模糊表示,并允许他们在页面完全下载之前浏览页面(或您的站点).
普通gif或jpg | 隔行gif或渐进式jpg |
上面的图片是从上到下下载的.
上图显示了当下载隔行gif和渐进式jpg时发生的情况. (这是放大的图像,不是实际图像.)每一行像素的图像被加载, 用户会注意到这种类型的图像是模糊的. 它通常不明显,除非用户使用非常慢的调制解调器或非常大的图像.
抗锯齿或平滑
用于平滑形状和文本的边缘. 反锯齿和平滑使用中间颜色的模式来将对象的边缘与背景颜色混合. 这可以帮助去除像素化或锯齿状的边缘. 反锯齿不应该用于透明背景的gif,因为它会使物体的边缘看起来模糊和锯齿状. 如果字体大小为10或更小,则不应对文本使用平滑. 请记住,通过压缩过程,jpg的边缘已经在某种程度上平滑了.
正常的gif | 抗锯齿或平滑的gif |
陷阱
在完全完成编辑之前,不要将文件保存/导出为jpg格式!
Jpg压缩是有损压缩. 每次你保存一个jpg文件,你都会丢失信息,所以你的质量会下降. 确保保留原始文件(png, psd,人工智能, tiff等).)进行编辑,并仅在编辑完成时保存或导出为JPG. 这将产生最高质量的jpg.
除非绝对必要,否则不要犹豫!
因为gif压缩只能处理水平带的颜色, 抖动(创建小棋盘图案)将大大减少可以完成的压缩量. 抖动只用于渐变和淡入,并保留到真正必要的时候.