在线SEO优化教程
SEO基础入门视频教程

当前位置:seo教程 > SEO基础>seo排名点击:JPG、PNG和GIF图片的基本原理及优化方法

seo排名点击:JPG、PNG和GIF图片的基本原理及优化方法

时间:2018-11-06 03:22  作者:财富SEO

说到图像,我们必须从位图开始。位图(也称为位图或渲染图像)由称为像素(图像元素)的各个点组成。可以不同地排列和染色这些点以形成图片。放大位图时,您可以看到构成整个图像的无数单个方块。

JPG,PNG和GIF也是我们常见图像格式的位图,因此它们的数据结构大致相同,只是每种图像格式都有不同的压缩算法和不同的扫描方法,但优化方法有一个共同的点都围绕着每个像素的颜色值,那么我们如何优化?下面我将使用马海翔博客的平台介绍图片的一些基本原理和优化方法:

"> 一,JPG图像的原理和优化

JPG是压缩和解压缩连续色调图形(如彩色或灰度)的标准,由ISO/IECJTC1/SC29WG10定义。

压缩算法是正反向离散余弦变换,如下图所示:

"> 如果它是反离散余弦变换,则整个过程是相反的。

马海翔提醒大家,这里的8X8像素模块是我们JPG优化方法的重点,它将涉及采样,块量化和扫描的步骤。然而,采样和块量化的两个步骤将导致图像失真。该过程也是我们优化工作的核心部分。

1.采样

上面提到的可以很好地解释以下JPG优化方法中的颜色优化;

JPG将不同的颜色视为单独的组件,因此如果各个颜色组件之间没有相关性,则可以将每个组件视为灰度图像。压缩的效果可以得到最好的处理,因此红色(R),绿色(G)和蓝色(B)的成分转换为:亮度(Y),色度(Cb和Cr)。所以没有相关的组件:

Y=0.299R+0.587G+0.144B

CB=-0.169R-0.331G+0.500B

CR=0.500R-0.419G-0.081B

由于人类视觉系统对色度不敏感,YCbCr色度意味着您可以进行另一次采样(子采样)以减少信息量,如下所示:

"> 4:4:4格式表示YCbCr的原始完整信息,可以再次采样,格式为4:2:2或4:2:0;4:2:2格式将原始信息减少到三分之二,4:2:0格式可以将信息减少三到一半。尽管色度信息量减少了。但对于人的视觉神经,感觉只有很小的差异。

2.块量化

为了说明执行离散余弦变换(DCT)的效果,我们将一个图形下的8×8块的亮度数据转换为符合DCT操作范围的系数表,如下图所示:

"> 低频部分包含块的大部分能量,而对视觉不太敏感的高频部分通常仅包含较低的能量。

接下来,用于量化亮度系数的矩阵系数表如下图所示:

"> 在亮度系数的量化中,每个DCT系数除以相对量化矩阵的值,并且在舍入之后,获得以下量化的DCT系数(例如,-80/16=-5),如下图:

"> 注意,在量化块的高频部分中存在许多零值,这意味着人类视觉系统对高频部分不敏感。由于在解码期间不能再现圆形部分,因此该步骤将是失真的过程。

3.扫描

在量化块之后,仅低频部分具有非零值。为了进一步减小存储空间的大小,将零值尽可能地组合在一起,使得处理可以由几个零而不是单独的处理来表示。为零,所以使用下图进行对角线扫描:

"> 沿着空间频率增加的方向扫描该倾斜扫描的扫描线,从而可以将许多零串在一起以获得更好的结果。

在理解了上述3个过程之后,我们稍后会做JPG。 优化会更加得心应手,如何处理色彩,如何在降低色值的同时至少降低图像失真率。

接下来,马海翔将向您介绍JPG中常用的几种优化方法:

1,8像素网格

如下图2所示,图片为32X32,白色正方形为8X8:

如您所见,左上角的小方块在“8像素网格”中精确对齐,这可确保小方块保持清晰。保存后,图像被分成多个8×8px块,并且软件针对每个块独立优化。由于右下角的方块与这些块不匹配(即,块跨越多个块,仅在块的交叉点上),优化器在查找索引时会查找黑色和白色。平衡,即增加噪音。

8像素网格示例:

"> 如果你不仔细看,你可能找不到它。在第二张图片中,盒子黑色封面的左侧区域结束,99号码的额外数字被删除。198.00元下调了一个像素。这三个简单的操作可以减少大约1K。 要做到这一点,每个人都一定会考虑一个问题。每次拍照时拉动辅助线都不麻烦吗?

实际上,这只是为了进行精确的演示。如果应用于工作,我们可以将8X8辅助方块更改为16X16或32X32。

2,画质

不要保存质量为100的图像。这不是最高质量的图像,只是数字优化的底线,并且最终会得到一个不合理的大文件。事实上,将质量设置在95以上就足以防止信息丢失。

质量有一个分水岭,这就是为什么我们通常建议大约60左右的JPG质量。当Photoshop中的质量设置低于51时,它执行另一个称为“colordown-sampling”的优化算法,平均大约8个像素,这是在边缘。产生噪音。

因此,如果图像很小且对比鲜明,建议不要在Photoshop中将质量设置为低于51。

传奇(左边是质量51右边是质量50):

3.颜色优化

这里的优化原理是在减压过程,去量化和倾斜扫描。这涉及两个量化矩阵(亮度和色度)的处理。

然而,该方法中使用的方法相对较小,因此这里仅作简要介绍。

Photoshop具有Lab颜色模式,L表示亮度,a表示从品红色到绿色,b表示从黄色到蓝色。

'JPG,PNG和GIF图像的基本原理和优化方法-马海翔Blog'src='https://www.caifuseo.com/uploads/allimg/181031/1606261a1-12.jpg'style='width:600px;height:316px'Title='颜色优化'/>

这里最重要的是亮度(也称为亮度)。优化图像时,它通常是压缩的颜色通道,但保持亮度通道尽可能明亮,因为人们对它最敏感。

马海翔提醒大家,这里最重要的是过滤器> > 斑驳的颜色> > 针对两个通道A和B的颜色处理中间值。

二,PNG图片的原理和优化

PNG是一种图像文件存储格式,旨在取代GIF和TIFF文件格式,同时添加GIF中不可用的功能。PNG提供5种图像类型:灰度,真彩色,索引颜色,带alpha通道的灰度,带alpha通道的真彩色,遗憾的是Photoshop只能导出3种图像类型:透明索引颜色,真彩色,真实颜色和透明度。

对于PNG图像,可以将其分为索引(索引)图和RGB图。索引图仅包含固定数量的颜色,并且RGB图的颜色数量不受限制。

索引图:为了节省存储空间,图像中使用的颜色与颜色表相关联。索引颜色通常是16种颜色,32种颜色,64种颜色,128种颜色或256种颜色,但不超过256种颜色;

RGB图像:每个像素保持表示像素颜色的RGB值。因此,RGB图像中有多少像素,以及文件中存储了多少RGB值。

1.压缩

PNG采用LZ77无损数据压缩算法:LZ77算法通过将当前数据替换为编码器或解码器中出现的相应匹配数据信息,简单地实现压缩功能。

最重要的是线性滤波(也称为“三角滤波”)。PNG有5个滤波器,None(无滤波),Sub(当前值减去左像素的值),Up(减去上部像素的值)。),平均值(减去左上像素的平均值)和Paeth (替换左侧,左侧或上方的像素值,并使用AlanPaeth重新命名)。以下是其中一个Up过滤器的示例:

"> 由数字2标识的每一行经历“向上过滤器”,并且“向上过滤器”向png解码器发送消息:“对于当前像素,提取上部像素的值并将其添加到当前值。”图中的线2-5在垂直方向上都具有相同的值。因此它们的值都是0,压缩比越大,压缩比越大。

2.扫描

PNG扫描非常简单,只有两种:非隔行扫描,Adam7(7遍隔行扫描法)

Adam7(由AdamM.Costello开发的7遍交错方法),原理如下所示:

">

">
图片示例:

"> 马海翔博客常用的两种PNG优化方法:

1.色相分离

优化原理:有效减少颜色数量,合并相似颜色,创建色调区域,更好地执行“线性过滤”以获得高压缩比。

缺点:此方法有一定的局限性,特别是当优化的图像与html背景合并时。

这里的色标值可以根据实际情况设置:

"> 2,层分离

有时必须保存“重量级”PNG-24文件,因为图像中有一些半透明像素。如果将这样的图像分成两个,一个是不透明的,另一个是半透明的,然后每个都以适当的格式保存。

例如,您可以保存PNG-24格式的半透明像素,而不透明像素则以PNG-8或JPEG格式保存。

例如:

马海翔博客推荐步骤:

(1)在“图层”面板中,按住Ctrl+左键单击图层以创建选区;

(2),切换到通道面板,将选择保存为通道;

(3),选择通道,取消选择,并设置阈值(图像-> 调整-> 阈值)调整为255;

(4),Ctrl+左键单击通道创建选择并隐藏通道,然后选择原始图层,打开图层-> 新-> 通过剪切图层,您可以获得上面两张分开的图片。

(5),可以再次优化两个图像的分色方法。

该方法类似于背景太大时背景图像太大的情况。出于同样的原因,通过添加一个请求来分割和叠加图像。

三,GIF图片的原理和优化

由于GIF目前以较低的速率使用,除非需要GIF动画,否则建议将PNG用于透明图像,因为PNG本身是由开发人员开发的用于替换GIF的图片格式。以下马海翔将简要介绍GIF的原理:

GIF(GraphicsInterchangeFormat)的原始含义是“图像交换格式”,它是由CompuServe在1987年开发的图像文件格式.GIF文件的数据是基于LZW算法的连续色调无损压缩格式。它的压缩比一般在50%左右,不属于任何应用。GIF格式的另一个特点是它可以在GIF文件中存储多个彩色图像。如果一个接一个地读出存储在文件中的多个图像数据并显示在屏幕上,则它可以形成最简单的一个。动画。

GIF格式的特点是压缩比高,磁盘空间小,因此这种图像格式得到了迅速应用。原始GIF仅用于存储单个静止图像(称为GIF87a)。随后,随着技术的发展,可以同时存储多个静止图像以形成连续动画,使其成为当时支持2D动画的少数格式之一。其中之一(称为GIF89a),可以在GIF89a图像中指定透明区域,使图像具有非凡的显示效果,这使得GIF充满了风景。Internet上使用的大多数颜色动画文件都是这种格式的文件,也称为GIF89a格式文件。

另外,考虑到网络传输的实际情况,GIF图像格式还增加了淡入模式,即在图像传输过程中,用户可以先看到图像的轮廓,然后逐渐作为传输过程继续。查看图像中的详细信息以适应用户的观看心理。

但是GIF 存在一个小缺点,即不能存储超过256种颜色的图像。尽管如此,这种格式仍然在互联网上流行,这与GIF图像文件的缺点,快速下载速度以及使用相同大小的许多图像文件组合动画的能力密不可分。

LZW压缩算法

LZW是通过创建字符串表并使用更短的代码来表示更长的字符串来实现压缩。字符串和编码之间的对应关系是在压缩过程中动态生成的,并且隐含在压缩数据中并进行解压缩。当根据表恢复时,它是无损压缩。

例如:

普通文本:好人经常说他们是好人,但我真的是个好人。

压缩文本:1美元经常说它是1美元,但我真的是1.$$1=[好人]

马海翔博客知识延伸:

除了基本灰度“红色,绿色和蓝色”(外语缩写:rgb)或“青色,品红色,黄色,黑色”(外语缩写:cmyk)和“轻量级ab”(外语缩写:lab)模式,photoshop支持(或处理)其他颜色模式,包括位图模式,灰度模式,双色调模式,索引颜色模式和多通道模式。这些颜色模式有其特殊用途。例如,灰度模式下的图像仅具有灰度值而没有颜色信息;虽然索引颜色模式可以使用颜色,但与rgb模式和cmyk模式相比,可以使用的颜色非常小。以下是一些颜色模式。

1.位图模式

位图模式使用两种颜色(黑色和白色)来表示图像中的像素。位图模式下的图像也称为黑白图像。因为它的深度是1,所以它也被称为一位图像。由于位图模式仅使用黑色和白色来表示图像的像素,因此在将图像转换为位图模式时会丢失大量细节,因此photoshop提供了几种算法来模拟图像中缺失的细节。

在具有相同宽度,高度和分辨率的情况下,位图图像具有最小的图像尺寸,其大约是灰度模式的1/7并且小于rgb模式的1/22。

2,灰度(灰度)模式

灰度模式可以使用多达256种灰度来表示图像,使图像的过渡更平滑,更细腻。灰度图像的每个像素具有0(黑色)和255(白色)之间的亮度值。灰度值也可以表示为黑色墨水覆盖率的百分比(0%等于白色,100%等于黑色)。使用黑色折叠或灰度扫描仪生成的图像通常以灰度显示。

3.双色调模式

双色调模式使用2-4种颜色墨水来创建由两种色调(2种颜色),三种颜色(3种颜色)和四种颜色(4种颜色)与其颜色级别混合组成的图像。在将灰度图像转换为双色调模式的过程中,可以编辑色调以产生特殊效果。双色调模式的主要用途是尽可能少地使用颜色来表示尽可能多的色阶,这对于降低打印成本很重要,因为在打印时,每个额外的色调需要更多的成本。

4,索引颜色(indexedcolor)模式

索引颜色模式是在线和动画中常用的图像模式,并且当彩色图像被转换为索引图像时包含近256种颜色。索引颜色图像包含颜色表。如果原始图像中的颜色不能用256色表示,photoshop将从可用颜色中选择最接近的颜色来模拟这些颜色,这将减小图像文件的大小。用于存储图像中的颜色并为这些颜色创建颜色索引。颜色表可以在转换过程中定义,也可以在声明索引图像后进行修改。

5.多渠道模式

多通道模式对于具有特殊打印要求的图像非常有用。例如,如果图像中仅使用一种或两种或三种颜色,则使用多通道模式可以降低打印成本并确保正确的颜色输出。

6,8位/16位通道模式

在灰度“红绿蓝”(外语缩写:rgb)或“青色,品红色,黄色,黑色”(外语缩写:cmyk)模式中,可以使用16位通道代替默认的8位通道。默认情况下,8位通道包含256个级别,如果增加到16位,则每个通道的级别数为65536,这样可以获得更多颜色细节。Photoshop可以识别和输入16位通道的图像,但此图像有许多限制,无法使用所有滤镜,并且无法打印16位通道模式的图像。

与“seo排名点击:JPG、PNG和GIF图片的基本原理及优化方法”相关文章