网页设计中，图片格式的选择非常重要，未经优化的图片和不当的图片格式都会导致网页加载时间过程和响应速度过慢——也就是打开很慢，这样就会严重影响用户的体验，有时候甚至延迟几秒就足以使许多新访客离开。所以在设计网站时，设计师必须特别注意图像格式和优化，以便在图片质量和加载时间之间找到平衡。
为了让大家做出更好的网页，秒秒学小编(www.miaomiaoxue.com）给大家介绍几种常用的图片格式，并详解在不同情况下该使用哪种文件类型，各位网页设计的小白一定要记住了!
1、JPEG
JPEG是迄今为止最常见的图像格式，它是网络上绝大多数图像的选择格式。默认情况下，大多数中低档数码相机还会以JPEG格式存储图像。虽然格式相同，但JPEG图像可能使用.jpeg或.jpg文件扩展名。JPEG自1986年发明以来一直是压缩图像文件的行业标准。
JPEG有一点要清楚，它是有损的。换句话说，它牺牲了图像质量来换取更小的文件空间，这也意味着在网站上有更快的加载时间。JPEG也具有各种级别的压缩，压缩越厉害图像质量越低。Web图像的最佳压缩级别大约为60%，尽管高达75%的数据可能适用于视觉组件可能达到75%的数据，但质量不是最优的，高于75%，原始图像开始变得明显扭曲和模糊。
所有互联网设备，数码相机，Web浏览器和现代操作系统都支持此种格式，JPEG是用于不需要大质量的静止图像的最常用格式。由于它可以显示数百万种不同的颜色，包括较浅和较深色调之间的明显区别，因此适用于几乎所有情况。然而，当需要专业和原始的图像质量时，JPEG是不合适的。因此，绝大多数专业摄影师始终将其图像的原始副本保留为未压缩格式，如BMP或RAW。
2、GIF
GIF是在1987年发明的，GIF跟JPEG一样，是为了突破早期拨号互联网连接的局限性而节省带宽发明的，同时也节省了当时相对较小的硬盘空间。
与JPEG不同，GIF支持动画视觉效果，因此它一直用于渲染小动画。因此，它在小图标，按钮和其他导航功能，社交网络上的动画表情符号中是用得最多的。从技术上讲，GIF是一种无损压缩格式，因为它不会删除任何原始数据，而是使用完全不同的算法进行压缩。但是，格式也受到8位调色板的限制，这意味着它每帧最多只显示256种颜色。由于这个限制，它非常适合单色图像，这是8位性质的。
虽然在线上接触得非常多，但GIF在网页设计中几乎没有实际应用。相反，大多数动画内容通过视频流媒体格式传送，而静态图像则使用JPEG或其他格式。尽管如此，尽管实际的动画可能在设备上不起作用，GIF仍然像JPEG一样得到广泛支持。
3、PNG
与GIF不同的是，PNG只能使用静态图像，尽管有称为APNG(基于PNG(Portable Network Graphics)的位图动画格式，扩展方法类似主要用于网页的GIF 89a)的扩展存在，但不被广泛支持。PNG使用无损压缩算法来保留原始图像的细节。
PNG分为两种：PNG-8，支持256色的8位版本，与GIF类似;PNG-24，配有一个24位调色板，可显示多达1600万种颜色，如JPEG。最重要的是，这两个版本都支持透明度，因此可以使用其他图像来创建各种不同的背景和特殊效果。设计人员可以使用格式支持的Alpha通道更改透明度级别，例如淡入不同的背景图像。换句话说，PNG图像可以放置在任何颜色的背景上，同时保持其原始外观。
PNG最适合用于设计和标志类的品牌元素，几乎所有浏览器都支持此类格式。该格式也适用于诸如照片类的复杂图像，但文件大小是个问题，因为PNG占用的空间大大超过JPEG。
4、SVG(可缩放矢量图形)
与上面提到的位图图像格式不同，SVG是矢量图形格式。矢量可以缩放到任何尺寸，而不会损失质量，因为每个矢量就已经分配了颜色，形状，曲线和线条的厚度。
SVG发明于2001年，SVG是基于可扩展标记语言最常见的矢量图形格式。虽然不像JPEG，GIF或PNG一样得到广泛支持，但大多数浏览器(如最新版本的Google Chrome，Microsoft Edge和Mozilla Firefox)都支持它。尽管如此，SVG是复杂图表中最合适的格式，例如蓝图，计划和设计，因为它保留了所有原始信息，并且可以在不影响图像质量的情况下进行放大。另一方面，SVG格式完全不适合照片。由于许多旧版浏览器，特别是移动设备不支持矢量图形，如果不支持，网页设计人员应始终提供替代的JPG来代替SVG文件。
在大多数情况下，网页设计师只需在具有特定要求时，可使用GIF，PNG或SVG格式，没有要求时最好使用JPEG格式，要注意的是选择最佳的压缩级别，以便在质量和性能之间找到一个很好的平衡。譬如说相册这类设计，通常最好在网页上显示较低质量的缩略图，当点击时，打开全分辨率，高质量的版本比较好。
至于有关网页设计更多的图像处理和优化，可参考以下推荐教程：
《AI网页设计五部曲之图像优化》
http://www.miaomiaoxue.com/show/bookshow/aabe88fc59b9cb1e015a175fc7303378.html?tt
《AI网页设计五部曲之SVG设计》
http://www.miaomiaoxue.com/show/bookshow/aabe88fc5aabdef8015aac1b1a7500f3.html?tt
等等相关的教程，在实际案例中学会不同情况下如何选择合适的图像格式。
联系客服
