HTML图片概述

“HTML 图片”更正确的称呼应该为“Web 图片”，它可以增强 Web 的表现力，能更直观地表示网页信息和展现文字不能表现的内容。Web可用的图像格式非常的多，但从图片的图像质量、传输体积、浏览器支持等情况考虑，通常选用的有以下几种格式（其中 PNG、JPG/JPEG 和 GIF 为最为常用的 Web 图片格式）：

PNG

基本描述：便携式网络图形（Portable Network Graphics）。是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。

优点：图像本身体积优化得比较不错，是一种无损的图像格式，所以图像质量比较高。支持透明通道，可以呈现不规则形状的图像。

缺点：这种格式真的没有什么缺点，但是通过对比JPG/JPEG和GIF来说，它的传输体积要大一些，而且它是不能被常规手段压缩的，只能通过图形制作软件来减少颜色数来到达压缩的效果。

应用：主要用于呈现一些网页内对清晰度要求较高的图标、彩色图形按钮、网站Logo等。

JPG/JPEG

基本描述：联合照片专家组（Joint Photographic Expert Group）。名称虽然奇怪，但它却是互联网发展至今最常见的一种图像格式。是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失。大家在网页中看到的照片、相机拍摄基本上都是这种格式的图片。

优点：市面上的浏览器100%支持，可高度压缩。一张10MB的图片可以轻松压缩到几百KB的大小。

缺点：相对于PNG图片来说，未经压缩的JPG/JPEG原图体积会更大。高度压缩后图像会比较模糊。不支持透明通道，只能呈现为规则的矩形图片。

应用：网页中的非图标内容基本都可以用这种格式来呈现，包括各类商品图片、人像、设计图、软件截图等。

GIF

基本描述：图形交换格式（Graphics Interchange Format）。谈到这种格式，大家第一个想到的一定是“动态图片”，但是需要弄清楚的是可以作为动态图片的不止GIF这种格式，很多图形格式都能生成动态图，之所以这种格式出现的动态图最多纯粹是因为这种图像格式的体积小，归结到底是因为这种图像格式的色彩少，它最多可以呈现256种颜色。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几乎所有相关软件都支持它，公共领域有大量的软件在使用gif图像文件。

优点：体积小。内部采用“隔行存放”的方式渲染，在页面上成像速度更快，通过这种方式也能模拟出透明通道的效果。

缺点：色彩数较少，图像质量通常不会太高，在表现复杂图像时效果不理想。

应用：用于呈现单双色图标或一些色彩数较少的图形，可用于制作动态图。

ICO

基本描述：Windows 的图标文件格式（icon）。图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

优点：体积小，能模拟透明通道效果。可以自定义 Windows 操作系统的文件夹图标，增加文件的可辨识度。

缺点：应用范围较小，一般只作为文件夹图标、浏览器标签页或收藏夹图标使用，在其它系统上需要借助第三方软件才能查看。

应用：ico 可以作为浏览器标签页的图标，还可以在收藏夹内收藏内容的前段显示小图标。

SVG

基本描述：可缩放矢量图形（Scalable Vector Graphics）。它不能被普通的图像软件打开，因为它是基于XML的（Extensible Markup Language,可扩展标记语言）。一种开放标准的矢量图形语言，可任意放大图形显示，边缘异常清晰，文字在SVG图像中保留可编辑和可搜寻的状态，没有字体的限制，生成的文件很小，下载很快，十分适合用于设计高分辨率的Web图形页面。可以用一些主流的代码编辑器打开，并修改内部的代码从而生成不一样的图像。

优点：体积很小，简单图案的图像的传输体积甚至可以无视，而且它还可以作为HTML代码的一部分并不需要引用外部文件。由于是“矢量图”，所以图形的缩放并不会影响其清晰度，16*16和1600*1600在成像质量上没有区别。可以通过修改XML代码对图像进行编辑，不依赖图像制作软件。

缺点：只支持版本较新的主流浏览器。SVG是基于XML代码生成的，制作图案丰富的图像成本巨大，需要相关专业的知识，不能被常规的图像编辑软件打开和编辑（包括Photoshop）。

应用：由于传输体积很小、矢量特性和可被编辑的特点，现已被世界各知名网站大量的使用，用于呈现一些简单图案的背景，精致的图标按钮等。

WebP

基本描述：WebP是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。它是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

优点：WebP的压缩率要高于PNG原图压缩率，同样支持有损与无损压缩。也就是说PNG的优点WebP都具有，而且不存在PNG在颜色位数为8bit的时候出现锯齿的问题。

缺点：由于是一种比较新的技术，老版本浏览器是不支持的，就是该图像的制作商Google也是在其浏览器Chrome v32之后才开始全面支持的，而苹果公司的桌面浏览器和手机浏览器到目前为止仍然全不支持（因为存在竞争关系）。

应用：这种格式应该是除比较特殊的SVG以外最好的格式了，它的应用范围基本没有限制。这种格式在很多定制化开发的网站中都已经在大量使用了。

BMP

基本描述：位图（Bit MaP）。它是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准，因此在Windows环境中运行的图形图像软件都支持BMP图像格式

优点：BMP颜色深度范围大，支持1位到24位颜色深度。设备无关，不存在兼容性问题。

缺点：体积过于庞大，一张电脑壁纸图片的体积通常都是好几MB，在10MB以上的也不在少数，非常不合适网络传播。

应用：用于呈现一些精度要求较高的工程图、设计稿、电脑壁纸等。

当然，这些并不是所有的图片格式，除此之外还有 TIF、PCX、TGA、EXIF、FPX、PSD、CDR、PCD、DXF、UFO、EPS、AI、RAW、WMF 等图片或图形文稿格式，但从 Web 图片应用角度来说，我们只需要能识别并运用上文列表中所示格式即可。