前往顾页

JPG图片优化紧缩根本教程及技能

时候:2012-04-12 01:14来源:知行网www.zhixing123.cn 编辑:麦田守望者

当人们会商图象优化时,他们只重视到一些风行软件供应的那几个独一的参数调度东西,比方“质量”滑块,色彩数调板,颤栗等。别的,多数特地的软件,如OptiPNG和JPEGtran,设法紧缩一些多余的数据来优化图象。所有这些都是非常驰名的东西,它们为网页开辟者和设想师供应简朴直接的体例来优化图象。


在本文中,我们会向您揭示一种不合的体例来优化图象,这类体例是源于“图象数据在不合图片格局中的储存道理”。我们从JPEG格局开端,这里有个根本技术称“8像素栅格” (原文:eight-pixel grid )


eight-pixel grid


就如你已知的,JPEG图象由一系列8px × 8px区块构成,当您吧JPEG的图象质量调的太低的时候,这些区块特别较着。这些东西若何帮忙我们优化我们的图象呢?请察看下面的例子:

 

32×32 px, 图片质量:10(PS中),396 bytes

两个白色小方块都是8×8 px。固然都是低质量,但右下角看起来失真更加的严峻了(正如您预感的一样),而左上角的却非常的洁净。这是怎样回事?要答复这个问题,我们需求看看这个衬在网格下的图象:

 

正如你看到的,左上角的小方块恰好对齐在“eight-pixel grid”,如许就确保小方块保持是锋利。

当保存的时候,图片会被分成很多的8×8 px的区块,而软件是对每个区块进行自力优化的。因为右下方的方块其实不婚配这些区块(也就是这个方块超越了几个区块,恰好落于区块的交代线上),优化器在寻觅索引的时候就会在玄色和白色之间寻觅均衡(在JPEG里,每个8×8 px的区块都是根据正弦算法来进行编码的

原句:in JPEG, each 8×8 block is encoded as a sine wave)。这就诠氏缢失真的启事了。很多特地的JPEG优化软件都有挑选性优化的服从,它能按照图象的不合地区设置不合的优化质量,以到达保存更多图象信息的目标。

这项技术对在保存含有有矩形图形的图片时特别有效。我们一路来看看在实际中是怎样利用的:

 

13.51 KB.

12.65 KB.

在第一个图象里,微波炉的地位是随机的,在保存第二个文件之前,我们把图象遵循eight-pixel grid来对齐。质量一样都设置在55。让我们把图象放年夜看看(红线标示出区块的鸿沟)

正如你看到的一样,我们只是调剂好图片的地位就已减少了1kb的空间。当然,我们也把图片变得“洁净”了!

优化色彩

 

这项技术相当复杂并且仅合用于某些范例的图象,不过我们会继续下去,我们只是学习它的事理。

起首,我们需求晓得JPEG利用哪一种色彩形式。年夜多数的图片格局都是利用RGB色彩形式,但JPEG格局也能够是YcbCr,这是一种遍及用于电视的色彩形式。RGB近似于HSV形式(年夜多数设想师都熟谙HSV形式)。HSV由三部分构成,色采(H),纯度(S),明度(V)。此中在这里最首要的就是明度(也称为亮度),优化图象的时候凡是是紧缩色彩通道,但尽可能保持高亮的亮度通道,因为人们对它最为敏感。Photoshop有一个叫Lab的色彩形式,这有助于我们对图象做出预措置,以便使JPEG优化有更好的结果。

我们继续利用微波炉来作为我们的例子。在微波炉的门上有一层很小的网纹,这是一个很好的例子来演示我们的优化色彩体例。颠末一个简朴的紧缩后,图象质量调度到55,文件体积是64.39KB。

990×405 px, 图象质量: 55 (PS中), 64.39 KB.

浏览年夜图

在Photoshop中翻开下面的年夜图,然后转换成Lab形式:图象>>图象>>Lab色彩。

Lab形式与HSV或YcbCr非常靠近,但不完整不异。亮度通道包含了图象里的亮度信息。A通道显现了图象包含了多少的白色和绿色信息,而B通道则节制图象的黄色和蓝色部分。固然有些辨别,但这个色彩形式使我们避免了很多多余的色彩信息。

转到通道面板,检察A通道和B通道,这时候辰我们很较着可以或许看到网纹的纹理,并且我们能看到它是由三种不合亮度的色块构成的。

我们继续做一些色彩上的优化,为了保存本来的文件,先复制一份,如许在一个自力的窗口里编辑会非常有效。我们的目标在两个色彩通道里是光滑这些颗粒状的纹理。如许就可以有更多简化的数据来让优化器措置了。你可能会奇特为甚么我们挑选如许的一块地区(微波炉的门)来措置呢?很简朴,因为这个部分是由玄色像素和橙色像素相间而成的。玄色意味着0亮度,这个信息已被保存在了亮度通道里了。所以~如果我们在色彩通道里将这个地区完整变成橙色,我们将不会丧失任何的信息。因为亮度通道决定了那些像素应当是玄色的,而在如许的纹理上,纯玄色和暗橙色则显得十分的含混。(这里的意义年夜概是在亮度通道中的对比更强一些,容易看清楚)

转换到A通道,伶仃挑选每区块,为每个区块别离利用:滤镜>>正色>>中间值,半径应当尽可能的小(直到纹理消逝为止),如许不会丧失太多的眩光结果。在此图中,第1区块半径应调度成4,第2区块为2,然后第3区块调度成4。现在,这个门看起来应当是如许的:

浏览年夜图

现在,图片的饱和度比较低,我们需求去改良它。为了使色彩的转变可以或许及时地显现出来,所以这里我们复制一个活动窗口:窗口>>摆列>>新建窗口。在新的窗口里,点击Lab通道检察图片,现在你的事情界面应当像下面如许了:

右边的是原始的图象,左边的是复制出来的正本,底下的是事情现在的事情空间。

在A通道里把三个区块都挑选上,翻开色阶窗口(Ctrl+L 或 图象>>调剂>>色阶)。将中间的滑块向左边挪动,如许正本里的微波炉的色彩就和原始的图象非常靠近了(这里我把中间的滑块移到1.08的地位)。B通道进行一样的措置,现在的结果应当是如许的:

[img]http://media1.smashingmagazine.com/wp-content/uploads/images/jpg-optimization-techniques/optimized-previ

ew.jpg[/img]

990×405 px, 图象质量: 55 (PS中), 59.29 KB

浏览年夜图

 

正如你所见,我们又减少了5 KB的年夜小(之前是64.39 KB)。固然这项技能看似非常得复杂费事,但是它仅需求你用上一分钟就可以完成:转换到Lab色彩形式,挑选色彩通道里的不合部分利用中间值滤镜,然后做一些饱和度修改。如前面说的一样,这个技能比它的实际更来的有效,我常常利用这个技能来调剂一些年夜型告白图片,使他们看起来洁净而锋利。

通例的JPEG优化技能

本文将以以下的JPEG优化技能作为尾声。

每次你挑选紧缩图片的时候,请细心挑选你的紧缩软件,JPEG标准非常严格的,它只决定如安在转换的时候减少图片的体积,而软件的开辟商却决定了该怎样精确操纵JPEG优化器。(这里的意义年夜概是每个软件的优化算法都不合)

比方,有些商家使他们的软件做出做年夜程度的优化,许可您将文件紧缩到很小的体积但仍然保持高质量的设置,而photoshop则保存出来一个比这个年夜了一倍的文件。不要依靠如许的软件,每个软件都有他们的价值观来决定哪些信息是有效的,他们会按照这些标准来设定他们的优化算法。

独一的鉴定标准是图象的质量和图象年夜小之间的比。如果你在Photoshop中保存一个质量55到60的文件,它可能跟在其他软件里把质量设置在80的时候输入的质量和体积差不多。

不要保存质量为100的图片。这个其实不是最高质量的图片,只是一个数值上的优化底线,终究你会获得一个不公道的年夜文件。究竟上把质量设置在95以上就已足以避免丧失期息了。

记着,当你在Photoshop中把质量设置低于50的时候,它就会履行另外一个叫做“降色采样(原文:color down-sampling)”的优化算法,它会在8个像素四周均匀采样,如许会在边沿产生正色:

48×48 px, 图象质量: 50 (PS中), 530 bytes.

48×48 px, 图象质量: 51 (PS中), 484 bytes.

是以,如果图片很小并且对比很年夜,建议在Photoshop中不要设置质量低于51。

顶一下
(0)
0%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):photoshop ps photoshop实例教程 Photoshop技能 photoshop教程 ps教程 ps技能
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣