html页面中图像格式的选用之我见_经验交流

今天有个学生问我：页面中使用GIF格式，失真太大，怎么办呢？这个问题比较简单啊，只要用JPG就可以了。我们常用的页面的图片格式有三种，GIF、JPG、PNG。那么这三种格式我们怎么选择使用呢？下面就我的一些经验来谈谈我对于这三个格式的使用上的一些看法。

下面我们先了解一下几种格式的比较正式的解释(注：以下内容源自百度知道)：

GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只认识GIF格式。GIF是一种索引颜色格式，在颜色数很少的情况下，产生的文件极小，它的优点主要有： 

GIF格式支持背景透明。GIF图片如果背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。 
GIF格式支持动画。在Flash动画出现之前，GIF动画可以说是网页中唯一的动画形式。GIF格式可以将单帧的图象组合起来，然后轮流播放每一帧而成为动画。虽然并不是所有的图形浏览器都支持GIF动画，但是最新的图形浏览器都已经支持GIF动画。 
GIF格式支持图形渐进。渐进是指图片渐渐显示在屏幕上，渐进图片将比非渐进图片更快地出现在屏幕上，可以让访问者更快地知道图片的概貌。 
GIF格式支持无损压缩。无损压缩是不损失图片细节而压缩图片的有效方法，由于GIF格式采用无损压缩，所以它更适合于线条、图标和图纸。 
GIF格式的缺点同样相当明显。索引颜色是历史遗留的产物，在DOS下的老游戏几乎无一例外的采用索引颜色，这种格式本来早就应该淘汰了。但是由于带宽的限制，GIF从DOS时代红到了Internet时代。GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。

JPEG 代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG，JPG图片的扩展名为jpg。 

JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。有损压缩会放弃图像中的某些细节，以减少文件长度。它的压缩比相当高，使用专门的JPG压缩工具其压缩比可达180：1，而且图像质量从浏览角度来讲质量受损不会太大，这样就大大方便了网络传输和磁盘交换文件。JPG较GIF更适合于照片，因为在照片中损失一些细节不像对艺术线条那么明显。另外，JPG对照片的压缩比例更大，而最后的质量也更好。

但是从长远来看，JPG随着带宽的不断提高和存储介质的发展，它也应该是一种被淘汰的图片格式，因为有损压缩对图像会产生不可恢复的损失。所以经过压缩的JPG的图片一般不适合打印，在备份重要图片时也最好不要使用JPG。还有，JPG也不如GIF图像那么灵活，它不支持图形渐进、背景透明，更不支持动画。

PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。 

PNG文件格式保留GIF文件格式的下列特性： 

使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。 
流式读/写性能(streamability)：图像文件格式允许连续读出和写入图像数据 
这个特性很适合于在通信过程中生成和显示图像。 
逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。 
透明性(transparency)：这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。 
辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。 
独立于计算机软硬件环境。 
使用无损压缩。 
PNG文件格式中要增加下列GIF文件格式所没有的特性： 

每个像素为48位的真彩色图像。 
每个像素为16位的灰度图像。 
可为灰度图和真彩色图添加α通道。 
添加图像的γ信息。 
使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。 
Méthode d'affichage par approximation successive pour accélérer l'affichage de l'image.
Boîte à outils de lecture/écriture standard.
Peut stocker plusieurs images dans un seul fichier.
Structure des fichiers

Ces trois formats ont leurs propres avantages et inconvénients, parmi lesquels PNG présente de nombreux avantages. Bien que sa popularité soit encore très générale, ses avantages particuliers nous ont particulièrement intéressés. Au moins, j'aime ce format maintenant. Bien entendu, pour ceux qui créent la page, la taille totale de la page est une question de compétitivité. Il faut donc encore faire attention à l’usage mixte de ces trois formats. Alors, quand utiliser GIF, quand utiliser PNG et quand utiliser JPG ? Analysons-les un par un ci-dessous.

Dans le travail réel, j'ai constaté que les graphiques généraux en couleur unie, tels que certaines petites icônes et arrière-plans en mosaïque, ont relativement peu de couleurs. Bien que le format GIF ne comporte que 256 couleurs, il ne peut pas gérer ce type de graphiques. . La photo doit être très appropriée. Bien sûr, nous n'excluons pas la richesse des couleurs de certaines petites icônes spéciales, mais je pense qu'en tant que petites icônes, une légère perte de couleur n'affectera pas l'effet visuel global. Par conséquent, la portée applicable du GIF est : petite. icônes, arrière-plans carrelés et autres couleurs Relativement peu de petites images.

Comment choisir une image aussi grande ? Tout d'abord, découvrons le JPG. Nos amis qui utilisent Photoshop savent tous que lors de l'exportation de l'image à la fin, il y aura un endroit pour choisir la qualité de l'image. cette image JPG, 100% Cela signifie aucune compression. Lorsque nous avons exporté la même image et l'avons comparée avec des images de qualité différente, nous avons constaté que celle de mauvaise qualité était évidemment beaucoup plus sale que celle de haute qualité, donc la photo avait l'air très mauvaise. Bien sûr, nous avons également constaté cette situation. Elle ressort toujours sur les images avec des blocs de couleur plus grands. Ainsi comme le ciel, le portrait. Des taches brunes disgracieuses apparaîtront notamment sur le visage des portraits. Bien sûr, si vous n’avez pas d’exigences strictes en matière de qualité photo, vous pouvez utiliser JPG et réduire la qualité. Mais cela ne s’applique pas aux arrière-plans et aux petites icônes.

Je pense personnellement que le PNG se situe quelque part entre le GIF et le JPG de haute qualité. Choisissez, si c'est le cas. est une simple petite icône, PNG sera un peu plus grand que GIF, mais la qualité est similaire. S'il s'agit d'une image ordinaire, le PNG est encore un peu plus petit que le JPG de haute qualité, mais le PNG présente encore une certaine perte de couleur. Cependant, il est pratiquement impossible de le voir si l’image n’est pas agrandie. Fondamentalement, nous ne créons pas de pages uniquement pour que les gens les magnifient et les critiquent. Le PNG est donc une option intermédiaire. Bien entendu, PNG présente également un grand avantage, à savoir la transparence, même si IE6 ne prenait pas en charge cette fonctionnalité auparavant. GIF a également de la transparence, mais GIF ne prend en charge que la transparence absolue et ne prend pas en charge la translucidité, il y a donc souvent un cercle de points blancs sur le bord de l'image GIF. PNG n'a pas ces problèmes. Avec l'évolution des temps, lorsque IE6 deviendra de l'histoire ancienne, je pense que nous pourrons voir la véritable puissance de PNG.

Bien sûr, il existe une situation particulière qui peut être très particulière, et c'est là que l'image d'arrière-plan et l'image de premier plan se rencontrent. Ce genre d'endroit nécessite une structure de couleur cohérente pour produire de bons effets visuels. Alors pour le moment, veillez à ne pas mélanger au maximum les différents formats.