您的位置 首页 > 数码极客

【动图格式】干货!网页设计图片格式PNG,JPG,GIF的选择

网页设计图片格式选择png、jpg、GIF GIF优点:

GIF最突出的地方是他支持动画片。同时,GIF也是无损照片形式。也就是说,修改照片后,画质没有损失。此外,GIF支持半透明(完全透明或完全不透明)。

据谷歌称,

Gif非常适合非常小或简单的照片(1010以下或3种颜色以下的照片)。缺点不支持透明度。如果有多种图片颜色,特别是红色,请少使用GIF。否则可能会扭曲。

PNG优点:PNG包括PNG-8和真彩色-PNG (png-24或png-32)。与GIF相比,png最大的优点是3360 通常体积更小支持Alpha(完全透明)但是我们知道PNG不支持动画。同时,IE6可以支持PNG-8,但需要注意的是,处理PNG-24的透明度时,IE6显示为灰色。相关示例包括sitepoint .可以参考。一般来说,以PNG-8储存图片,以相同的品质获得比GIF小的体积,但完全透明的照片现在只能使用PNG

JPG的优点:JPG可以显示比GIF、PNG更多的颜色,同时也很容易压缩,所以JPG非常适合保存数码照片。但那是扭曲的压缩。这意味着每次修改照片时都会发生像素失真。

具体陈述

损失与无损

图片文件格式可以对图片的文件大小进行不同的压缩。图片的压缩分为有损压缩和无损压缩两种类型。

有损压缩。指在压缩文件大小的过程中,损失了一部分图片的信息,也即降低了图片的质量,并且这种损失是不可逆的,我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段,是按照一定的算法将临近的像素点进行合并。

无损压缩。只在压缩文件大小的过程中,图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

GIF是无损的,采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩,GIF格式的图片,其文件大小要远小于BMP格式的图片。文件小,是GIF格式的优点,同时,GIF格式还具有支持动画以及透明的优点。但,GIF格式仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色。

GIF格式适用于对色彩要求不高同时需要文件体积较小的场景,比如企业Logo、线框类的图等。因其体积小的特点,现在GIF被广泛的应用在各类网站中。

JPEG

JPEG是有损的、采用直接色的、点阵图。

JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。

与GIF相比,JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊,而直接色的选用,又会导致图片文件较GIF更大。

PNG-8

PNG全称Portable Network Graphics,PNG-8是PNG的索引色版本。PNG-8是无损的、使用索引色的、点阵图。

PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8还支持透明度的调节,而GIF并不支持。 现在,除非需要动画的支持,否则我们没有理由使用GIF而不是PNG-8。当然了,PNG-8本身也是支持动画的,只是浏览器支持得不好,不像GIF那样受到广泛的支持。

可以看到PNG-8具有更好的透明度支持。

PNG-24

PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。

无损的、使用直接色的点阵图,听起来非常像BMP,是的,从显示效果上来看,PNG-24跟BMP没有不同。PNG-24的优点在于,它压缩了图片的数据,使得同样效果的图片,PNG-24格式的文件大小要比BMP小得多。当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

虽然PNG-24的一个很大的目标,是替换JPEG的使用。但一般而言,PNG-24的文件大小是JPEG的五倍之多,而显示效果则通常只能获得一点点提升。所以,只有在你不在乎图片的文件体积,而想要最好的显示效果时,才应该使用PNG-24格式。

另外,PNG-24跟PNG-8一样,是支持图片透明度的。

那么简单粗暴地说,小图标,用png储存最好。

png可以储存透明,完爆gif的地方在于失真小,没锯齿;劣势是不支持动画;

png采用无损压缩,在多数情况下都可以保留图片里所有像素。PNG无损压缩算法,简单地说,就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片。

png分为两种,一种是Index,一种是RGB。Index记录同一种颜色的值和出现的位置(简单地说,比如一个2px*2px的超级小图,从左往右从上往下依次的颜色是红,白,白,红,那么记录的方法就是“红-1,4;白-2,3”);而RGB图则把所有像素的色值依次记录下来(即“红,白,白红”)。对于相同的图片,Index格式的尺寸总是小于RGB。

但除非图片尺寸,颜色层次丰富,这时候可能会失真,因为无论PNG8还是PNG24,储存的索引色的数量都是有限的(PNG8最多储存256个索引色,PNG24可以储存1600多万个,但相应的尺寸也会更大。)这时候,反而用jpg会好一些。你问题中说的是小图标,那么就png是恰当的。

jpg适用于摄影图片,以及色彩丰富的图片。它采用压缩算法,会对图片上每8px*8px的像素进行处理,通过强制渐变的方法来减小文件尺寸,因此无论选择的储存质量多高,还是会多多少少失真一些,但对于摄影之类的图片来说,jpg格式就会比png小很多了。

关于作者: admin

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐