[译] 你用对图片格式了吗？

截至2017年3月，超过65%的网页内容都是由图片组成的。

这并不是一件令人意外的事情：图片是一种美观并具有感染力的信息载体，它可以直观的和你网站的访问者建立联系并讲述内容。

但出于事物的两面性，如果使用的不得当，图片往往会变成导致网页加载缓慢和差劲用户体验的罪魁祸首。

适当的在网页上使用图片，有以下两点：

• 选择合适的图片格式
• 优化你的图片

在这篇文章中，我会对第一点做出讨论。我会专门介绍在网页上表现最好的图片格式以及在对应情况下最合适的图片格式。

不过在我说那些之前，让我们先来简要地将一些术语讲清楚。

光栅图片 vs 矢量图

光栅图由二维的像素网格组成。每个像素存储了颜色和透明度的值。

光栅图并不能很好的支持缩放：如果你将一张光栅图放大，图片的锐度和清晰度都会下降。目前主流的光栅图有这些格式：JPEG(jpg)、GIF和PNG。

相比之下，矢量图由一些线条、形状和路径点组成。矢量图的各种信息并不是保存在像素点中，而是保存在精确的绘画指令中，而这些指令是完全独立于像素的。Alex Walker 曾对SVG表达了自己的喜爱，认为SVG是在网页上最棒的矢量图：

SVG isn't an image format — it’s more of an image recipe.

独立于分辨率意味着你可以将一张矢量图放大聚焦之至你想要聚焦的任何地方：图片的呈现会一如既往的赞，尤其适合 Retina 屏。

有损 vs 无损

这里的有损和无损指的是文加压缩技术对数字媒体文件进行压缩时的场景，即，图片，音频和视频。

有损压缩：

这句话的意思是，在实际操作中，你越是压缩一个有所文件，你得到的“成品”就会越小。同时，伴随着更小的文件体积，你也会制造一些不可逆的质量丢失。对于有损压缩而言，你需要在更小的文件体积和文件质量之间做一个合理的取舍。

JPEG 是目前人们见的最多的有损图片类型。

相比之下，无损压缩在压缩的过程中则不会出现数据丢失的情况。这意味着压缩不会造成文件质量的削减。但也正是因为如此，无损文件的体积一般要比有损文件大。

最常见的无损图片格式是 GIF 和 PNG。

每当你需要选择用哪种图片格式来展示你的内容时，这些信息会变得很有用。

JPEG

JPEG 是由 Joint Photographic Experts Group 所开发出的一种有损图片。

现如今，几乎有3%的互联网资源文件是 JPEG 格式的图片。这种图片格式之所以这么受欢迎，是因为：

• JPEG 格式的图片可以呈现数百万种颜色。所以每当需要在网站上展示摄影作品时，JPEG 总是最佳选择。
• 正因为是有损图片，你可以通过压缩大大的减少图片的体积。JPEG 图片提供了多种级别的压缩选择：网上的图片用60%级别比较合适，如果选择大于75%的压缩等级，则会使图片有明显的质量下降。
• 所有可以上网的设备都支持显示 JPEG 图片，所以开发者可以随意的使用而不用担心兼容性问题。

一个值得注意的点是，JPEG 格式的图片并不支持透明效果。因此，如果你打算在页面上用透明的效果来美化背景，JPEG 图片并不是一个明智的选择。

GIF

GIF 的意思是 Graphics Interchange Format，是一种最多支持256种颜色的8位无损图片格式。这个限制让 GIF 格式对于多颜色或者摄影图片的展示无能为力。

以下这些点，是支持 GIF 格式长期被用于网站的原因：

• 正因为只支持256中颜色，所以文件体积通常都很小
• 支持透明
• 支持动画，这让 GIF 非常适合去展示一些无限循环的动画，比如图标、表情、广告栏等。
• 对于一些只有简单色彩的图片非常合适，但并不适用于照片

PNG

PNG 的意思是 Portable Network Graphics。这个由W3C开发的图片格式，在大多数场景下可以替代 GIF。与 GIF 相同，PNG 采用了一种无损的压缩算法并且同时支持8位和24位。两者都支持透明度。值得一提的是，24位的PNG图片透明度支持使用RGB。因此，尽管GIF和8位的PNG图片变成了完全不透明或完全透明，PNG图片的每个像素提供了高达256层级的透明度。

在使用时，24位的PNG有以下特点：

• 具有多层级透明度的网络图片
• 支持复杂的照片和图形
• 对于经常需要导出的图片：PNG的无损压缩保障了压缩后没有质量退化

SVG

SVG 的意思是 Scalable Vector Graphics，是一种基于XML的矢量文件类型。

尽管 SVG 在 2001 年就问世了，但近几年才变得流行起来。之所以迟到这么久，是因为浏览器对 SVG 的支持在很长的一段时间内并不是很友好。幸运的是，在我写这篇文章的时候， SVG 已经被各大主流浏览器支持了 ，当然了，某些时候还是会出现一些不兼容的小bug。

SVG格式的图片有非常多的好特性，因此对于网站来说，它会是一个非常棒的选择，特别是用来展示一些小的图片logo、地图、图标等。

SVG 格式的优点

• SVG 格式的图片通常要比光栅格式的图片小很多，特别是当你作了特别的优化并且启用 gzip 压缩的时候
• 它们是可缩放的，这意味着 SVG 图片能在各种分辨率的屏幕上展现的很清晰
• 你可以把 SVG 的代码丢到 HTML 中以减少请求数量
• 你可以用 CSS 来 DIY 任何 SVG
• 最酷的是，你可以用 JavaScript 或者 CSS 让你的 SVG 变成动画

避免在网页上使用一些非常复杂的SVG图片，因为这会导致文件的体积变大很多。最后，对于类似于摄影作品之类的图片，SVG并不是一个好的选择，你最好还是乖乖的用 JPEG 或者 webP 吧。

WebP

WebP 在 2010 年就面世了，如果说 webP 仍然是一种新的图片格式并且它的知名度远远不如 JPEG 或者 PNG，那就大错特错了。这种格式的图片，从骨子里就是专门为网站而生的。

WebP 是由 Google 开发的一种开源图片格式，它有这些特性：

WebP 的美妙之处在于它以更小的体积糅合了 JPEG 和 PNG 的优点。

此时此刻， 浏览器对 webP 的支持还算不错 ：毕竟是 Google 的亲儿子，所有以 blink 为内核基础的浏览器都开始支持 webP 了。为了在一些不支持的浏览器中实现向后兼容，一些聪明的开发者也已经在例如 IE/Edge、Firefox 和 Safari 中实现了兼容的解决方案。

以下是一些关于 webP 不错的资源，你可以利用它们开始使用 webP 了：

• WebP Frequently Asked Questions
• What is the WebP Image Format (And Why Does It Matter)?
• How to Select the Perfect Image Format to Optimize Your Website
• Guide To Using WebP Images Today: A Case Study
• Using WebP Images

Conclusion

在这篇文章中，我说明了一些图片格式以及简要的讨论了一下它们的适用场景。

JPEG，GIF 和 PNG 是目前主流的网络图片格式，并且已经被使用了很长一段时间。

SVG 和 webP 是令人兴奋的新兴图片格式。SVG 适合于插画和简单图像的展示，而 webP 则在所有用到了 JPEG 和 PNG 的场景下成为了更好的选择。

你在开发的时候已经开始使用 SVG 和 webP 了吗？你都面临着哪些挑战呢？你尝到性能提升的甜头了吗？