图形

图像类型

位图 ( 光栅 ):一种图像，由称为像素的单个彩色盒子网格组成. 位图图像包括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
大小:8 KB

 

交错gif和渐进式jpg

用于在屏幕上显示更快的图像预览. 隔行gif和渐进式jpg下载交替行像素, 而不是第一个像素到最后. 这给用户一种更快下载的错觉，因为他们能够更快地看到更多的总图像, 但这些图像实际上需要更长的下载时间. 如果您的页面上有很多图像，导致下载速度很慢，这可能会很有用. 用户将能够更快地看到图像的模糊表示，并允许他们在页面完全下载之前浏览页面(或您的站点).
普通gif或jpg 隔行gif或渐进式jpg

上面的图片是从上到下下载的.

上图显示了当下载隔行gif和渐进式jpg时发生的情况. (这是放大的图像，不是实际图像.)每一行像素的图像被加载, 用户会注意到这种类型的图像是模糊的. 它通常不明显，除非用户使用非常慢的调制解调器或非常大的图像.

抗锯齿或平滑

用于平滑形状和文本的边缘. 反锯齿和平滑使用中间颜色的模式来将对象的边缘与背景颜色混合. 这可以帮助去除像素化或锯齿状的边缘. 反锯齿不应该用于透明背景的gif，因为它会使物体的边缘看起来模糊和锯齿状. 如果字体大小为10或更小，则不应对文本使用平滑. 请记住，通过压缩过程，jpg的边缘已经在某种程度上平滑了.
正常的gif 抗锯齿或平滑的gif

陷阱

在完全完成编辑之前，不要将文件保存/导出为jpg格式!
Jpg压缩是有损压缩. 每次你保存一个jpg文件，你都会丢失信息，所以你的质量会下降. 确保保留原始文件(png, psd,人工智能, tiff等).)进行编辑，并仅在编辑完成时保存或导出为JPG. 这将产生最高质量的jpg.

除非绝对必要，否则不要犹豫!
因为gif压缩只能处理水平带的颜色, 抖动(创建小棋盘图案)将大大减少可以完成的压缩量. 抖动只用于渐变和淡入，并保留到真正必要的时候.