关于 网页图片优化和体积压缩

时间:2024-04-05 12:06:59

质量不要太高,画质能忍受就好(储存为web时品质50-70)

另外用 ctrl+alt+shift+s 储存为web所用格式,比直接另存为jpg少了很多备注信息,会小一点

 

jpg质量和文件大小的平衡点大约在7左右,大于7之后,画质增加缓慢,大小增加很快,小于7之后,画质下降很快,大小减少较慢

 

如何用Photoshop优化你的网页图片

要想制作一个优秀的网页,好的图片时必不可少的,但在把各种图片加到你的网页中之前,对这些图片进行优化是非常必要的,否则就可能让你的网页出现加载时间过长,浪费流量或者图片画质低下的问题。这里我们就来了解一下如何用Photoshop全方位优化你的图片。

在进入正题之前,我们先来了解一下各种常有的图片格式:

1.BMP(BitMap)

这是Windows系统中的标准图像格式,不采用任何压缩方法,但颜色深度可以任意改变。所有在Windows系统上运行的图片浏览软件都一定能支持BMP格式,但由于它没有经过任何压缩,体积过大,因此网页中是不能使用这种格式的所有的论坛、博客的上传功能中都不支持BMP格式的图片。另外,有一种叫WBMP(Wireless BMP)的格式,专门用于移动设备,仅支持黑白两种颜色。在前些年单色屏幕手机霸占市场的时候拿它来做WML网页中的图片是最佳选择,但在这个彩屏普及的年代,这种格式也被淘汰了。

2.JPEG(Joint Photographic Experts Group)

可以说这种格式是网页中最常用的格式,大部分数码照相机生成的图像文件也默认是这个格式。JPEG支持8位(不常用)和24位色彩的图像。它之所以流行于各种网页,是因为它具有很高的压缩比(1MB的BMP图像最高可以压缩到20多KB),但这种高度压缩却会牺牲图片的品质,这也是我们看某些网络图片带有大量模糊斑块的原因。幸运的是,在Photoshop等图片处理软件中我们可以在生成JPEG图像时调整图片的品质(这也是我们优化图片的重点),来寻找画质与体积的平衡点

关于 网页图片优化和体积压缩

一个品质被设定得很低的JPEG图片,我们可以看到很多模糊斑块。在颜色丰富的区域还会出现马赛克。

3.GIF(Graphics Interchange Format)

GIF格式使用的是一种LZW的压缩算法,一般情况下压缩率在50%多(但如果图片中有大片平色区域的话压缩比会更高,可能会压到几KB或更少),是一种无损压缩。但这种格式并不适合色彩太丰富的图片,因为GIF最高只支持8位256色的色彩深度,因此如果图片色彩太多或优化不好的话会严重失真。GIF还有一个最大的特点就是支持动画,这是其它图片格式办不到的。

4.PNG(Portable Network Graphic Format)

PNG格式可以说是一种万能的图像格式,在网络图片上可以替代GIF,在打印机设备上可以替代TIFF,它还支持很多GIF不能实现的特性,如它可以支持最高48位的色彩深度(但我们在Photoshop中生成的PNG大多是24+8位或8位的),支持流式读写和渐次显示(允许边下载边显示),还能完美的展示半透明效果[因为它的Alpha通道最高可以有16位,而GIF只能有一位]。PNG使用LZ77无损压缩,在高色彩模式下可以避免任何失真,不过这也使文件体积相对于JPEG来说稍微大一些。PNG与GIF相比唯一的不足就是不支持动画。

好了,我们现在开始了解如何全方位优化图片:

1.JPEG,GIF or PNG?

一般网络图片也就这三种格式,而我们优化图片首先就要选择合适的格式,这样才能达到最佳的效果。

先说JPEG。JPEG虽然是有损压缩,但它损失的并不是图片中的重要部分,而是一些不引人注意的细节,况且我们可以调节图像质量,因此我们并不需要担心有损压缩能让图片变得多难看。JPEG最适合各种照片和屏幕截图(一般照相机默认生成的就是JPEG格式)等色彩丰富的图片。

至于GIF,可就不能用于色彩丰富的图片了,特别是照相机拍摄出来的作品,因为照片的色彩一般非常丰富,而GIF最多能显示256种颜色,这样出来的照片色彩失真就会很严重了。但是GIF处理平色的能力很强,还支持背景透明,适合网页中的Logo、导航条等基本元素,因为这类图片使用的色彩一般并不是很多。还有,制作动态图片也可以用到GIF格式。

PNG我在前面也说了,它不仅是无损压缩,还支持与JPEG一样的色彩深度,但是上传的照片、截图最好不要用这种格式,因为它的体积还是有点大,如果上传这种大文件的话会影响网页加载时间,还可能浪费移动设备用户的网络流量。不过PNG适合那些带有半透明和阴影效果的图标和网站Logo,如AtomSquare的Logo就是PNG格式的。

2.裁剪/缩小图片

一个尺寸过大的图片是不能放在网页上的,这样可能会使图片超出整个浏览器的阅读范围而影响视觉效果,还会让文件体积变大,因此我们需要控制图片的尺寸。

首先我们应该裁减掉图片周围不需要的部分,如大片的白纸、无用的背景等,这在Photoshop中很容易办到,使用裁剪工具即可。

关于 网页图片优化和体积压缩

关于 网页图片优化和体积压缩

例如:我不需要这张照片周围的白纸部分,因此我要对其进行裁剪。方法很简单,点击Photoshop工具箱中的裁剪工具,然后选中你想留下的部分,然后右键点图片,按"裁剪"即可。这样可以省去不需要的背景,从而增加网页的可读性,还可以为移动设备用户节省流量。

照相机生成的照片通常有几百万甚至上千万像素,这样的照片放在网页上毫无疑问会超出浏览器的可读范围,也会使体积剧增,因此我们还要在最后缩小这个图像。放在网页上的图像宽度应该在650像素左右(大约是AtomSquare中放置正文的宽度)。虽然一般网页的总宽度都在1000多像素,但放置正文的宽度应该窄一些,这样能使阅读更舒适。

关于 网页图片优化和体积压缩

在"储存为Web和设备所用格式"中点击"图像大小"即可设置图像的尺寸。注意,一定要"约束比例",也就是等比缩放,否则出来的图片可能会非常令人尴尬,不是地球变瘪了就是正方型变成长方形了。

尺寸调整好以后先不要急着保存,还有一些地方需要设置

3.JPEG的各种配置

关于 网页图片优化和体积压缩

JPEG是一种有损压缩,但我们可以调整它的品质损耗程度,使图像在微小损耗的条件下获得最高的压缩比。Photoshop中JPEG的品质级别为0-100,0为最差,压缩比最高,100为最好,但图像体积很大。但品质与文件体积之间并不是一个线性关系在50-60和80-100之间曲线非常陡,而其他范围曲线比较平缓

关于 网页图片优化和体积压缩

事实证明,当品质为80时几乎看不出图片品质的损耗,而此时文件体积比品质为100时要小一半多,因此80的品质是JPEG的最佳选择。如果不需要高画质的话可以选择50,但再往下就没必要了:品质低于50图像的模糊斑块数量会剧增,但文件体积并不会减小多少

我们再看一下其他的选项。"优化"可以进一步缩小文件体积,但可能会降低兼容性;"连续"是干什么的呢?"连续"的JPEG图像可以先显示低分辨率,下载完以后再呈现高分辨率的图像。ICC配置文件用于打印机等设备的色彩补偿。

由于JPEG适合平滑颜色的压缩,因此适当模糊可以减小体积。在Photoshop中我们还可以对JPEG图像进行"加权优化",也就是选取一块需要高清晰度的区域,剩下的背景按普通品质来压缩。具体方法如下:

1.在图片上选择一块区域。

关于 网页图片优化和体积压缩

2.点选择->保存选区,然后随便给新加的通道命名。

关于 网页图片优化和体积压缩

关于 网页图片优化和体积压缩

然后保存为JPEG格式,在"品质"右边有一个小按钮,点击它,进入"修改品质设置"对话框

关于 网页图片优化和体积压缩

通道选择刚才新建的通道,然后把品质调成比较高的一个值,然后确定。

这样被选取的区域很清晰,而剩下的不需要强调的区域则是普通画质。

关于 网页图片优化和体积压缩

优化好了以后保存即可。

4.GIF/PNG-8的配置

关于 网页图片优化和体积压缩

对于GIF来说,我们不需要调整它的品质(因为它是无损压缩,虽然它有"损耗"选项,但这种损耗将会使图片有被撕裂的感觉),要调整的是调色板类型、仿色和透明度。

Photoshop内置了很多标准调色板,分别有可感知、可选择、随样性、受限、自定义、Mac、Windows、灰度、黑白这几种。其中前三种调色板是Photoshop根据图像的色彩自动生成的,可以保证图像尽量少失真;受限、Mac、Windows是使用固定的调色板,图像会失真(由于现在基本上没人使用256色的显卡,这三种调色板也就没什么意义了);灰度可以处理黑白相片,而黑白仅仅是单色图像,就像WBMP一样。

为了减少图像失真,仿色是必须使用的,但Photoshop提供的三种仿色(扩散、图案、杂色)需要根据图片来选择,哪种仿色的效果好就使用哪种。

至于透明度,GIF虽然支持透明但仅支持1位Alpha,这种透明也就仅仅能做到背景透明了,虽然它有"透明度仿色"可以模拟出半透明的效果,但实际效果并不是太好,所以如果你的图片存在必要的半透明效果,那么请使用PNG格式。

还有颜色深度,如果你需要减小图像体积,那么你就应该通过适当减少颜色深度来达到这个目的。减少时需要一点点地尝试,当图像刚好不大量失真时的颜色数为最好。

注:PNG-8与GIF的配置是一样的,但PNG-8生成的图像体积似乎要比GIF小;还有任何带有关于 网页图片优化和体积压缩标志的选项都可以像JPEG的品质那样进行加权优化

5.PNG-24配置

PNG24的配置选项就很少了,因为它是无损压缩,不需要调节品质,又支持真彩色,不需要调色板和仿色,我们能选择的仅仅是是否支持透明度和是否交错。这里我就不多说了,根据自己的需要进行配置就可以了。

关于 网页图片优化和体积压缩

结束的分割线

经过这些全方面的优化,我们终于可以存储制作好的图片并把它加入到网页或上传到Blog/Forum中了,这样也就不会让网页半天加载不完或浪费无线网络用户的流量了。这篇文章或许并不是非常的专业,仅仅能提供基本的优化知识(我在本文中基本上没提到各种格式的底层工作模式),但对于制作网站或上传博客、论坛图片的人是非常有帮助的。

 
关于 网页图片优化和体积压缩