06.03 干货！网页设计图片格式PNG,JPG,GIF的选择

网页设计图片格式PNG,JPG,GIF的选择 GIF优点：

GIF最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失.再者GIF支持半透明(全透明或是全不透明).

根据Google的说法：

GIF适用于很小或是较简单的图片(10×10以下或是3种颜色以下的图片). 缺点 不支持透明，如果图片颜色很多种，特别是有红色的时候，尽量少用gif 不然会失真

PNG优点： PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相对于GIF最大的优势是: ①通常体积会更小 ②支持alpha(全透明) ③但是我们知道PNG是不支持动画的 ④同时需要留意IE6是可以支持PNG-8的 但是在处理PNG-24的透明时会显示会灰色.相关例子可以参考sitepoint. ⑤,通常图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而全透明的图片我们现在只能使用PNG-24.但是请留意在保存图片在PNG-8与GIF中进行比较.因为定律并不一直正确.

JPG优点： JPG所能显示的颜色比GIF,PNG要多的多,同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真.

具体说法

有损vs无损

图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。

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

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

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小很多了。