- 如何为网站选择正确的图片格式
- 栅格/位图与矢量图
- 有损和无损
- JPEG
- GIF
- PNG
- SVG
- SVG格式优点
- WebP
- 总结
- 译者注
如何为网站选择正确的图片格式
更多关于作者的文章
GreenSock初学者动画教程
样式变量实用指南(自定义属性)
WordPress主题可扩展性能提升
截至2017年3月，网站内容图片占比超过65%。
这并让人惊讶， 图片增添美感，表达信息，讲述故事同时与你的网站访问者建立联系。
反面就是，如果用的不正确，图片总会是 低性能网站的祸根 和糟糕的用户体验。
正确使用图片主要包含两方面的考虑:
- 选择合适的图片格式
- 优化图片
本文将会讨论第一点。我将会专门介绍web专用的图片格式以及它们最适用的场景。
在进一步讨论前，让我简要解释一些术语。
栅格/位图与矢量图
栅格或位图由二维像素网格组成，每个像素保存颜色及透明度值。
栅格图片缩放效果不好: 如果你放大一张栅格图片，它的清晰度和质量将会下降。
Web常用的栅格图片类型有JPEG、JPG、gif和png格式。
这里有两张苹果的栅格图片(JPG)。第一张图片是自然大小。第二张展示的放大版本。
栅格图片自然大小示例
栅格图片放大示例
注意相比自然原图放大图片的失真部分。
相反，矢量图片由线、图形和路径点。矢量信息并保存在像素中。当然他们是以完全与像素独立的数学绘制指令形式进行保存。
Alex Walker在谈到SVG的时候解释的很清楚，最流行的Web矢量格式有:
SVG 并不是一种图片格式, 它不仅仅是一张图片 教程。
为什么JPEG图片像麦当劳苹果派而SVG确不是
与清晰度无关的好处是当前缩放矢量图片至核心内容， 总是看起来十分清晰，尤其是视网膜屏幕。
缩小版SVG图片
放大版SVG图片
上面的两张图片是相同的矢量图片， 但第二张相比较第一张放大了两倍尺寸，质量仍然没有任何丢失。
有损和无损
有损和无损指的是应用于数据媒体,如：图片、音频、视频的文件压缩技术。
有损压缩:
并不能解压出100%原始数字数据。有损方法提供高压缩率和相对较小的压缩文件, 但一些原始像素、声波、视频帧会永久删除
PCMag.com Encyclopedia
这意味实际上你越压缩一个有损文件，文件越小。但是小尺寸文件相比原始文件将会不可逆的损失一些质量。
有损压缩在文件大小和质量之间做了折衷。
Web上你看到最多的有损图片类型是JPEG。
相反，无损压缩在压缩文件和原始文件之间采取无数据损失处理。
这意味着压缩并不会降低文件质量。但是，正因为这样，无损文件格式总是比有损压缩尺寸要大。
Web上的无损图片格式一般有GIF和PNG。
这些辅助信息对需要决定使用何种图片格式时有帮助。
我将会在下面介绍前面的三种图片文件，如,JPG、GIF、PNG， 已经在Web上使用很长时间。
后面两个，如: SVG和webP, 尽管不是新格式，也不是主流格式。但是因为他们十分适用响应式和
快速加载网站的需求， 它们正越来越流行。
JPEG
JPEG或JPG是一种由Joint Photographic Experts Group开发的有损图片格式。
几乎Web上3%的内容类型都是JPG图片。
以下是这种图片格式如此流行的原因:
JPG格式能够显示百万种颜色。这成成为Web上显示图像的理想选择。
由于是一种有损文件类型，你能使用高压缩比从而减小文件尺寸。 JPG文件提供不同的压缩比:
Web图片大约60%就可以， 但是超过75%的压缩比将会产生失真。所有支持互联网的设备都支持JPG图片格式， 更加容易用在网站上。
值得注意的一点的是JPG文件不支持透明度。因此， 如果你想在网页上用透明背景装饰图片或者结构， JPG图片并不是
合适的选择。最好选我下面要说的几种。
GIF
GIF是图像互换格式的简称。它是一种8位无损格式，最多支持256种颜色。这也限制GIF文件并不适合展示更宽色彩范围和逼真图片。
以下是网页中经常使用GIF最需要注意的几点:
由于256色限制， 文件总是出奇的小
支持透明度
支持动画。适用于展示循环动画图片，像: 图标、表情字符、广告横幅等等。
特别适合单一颜色简单图片，但不适用照片
PNG
PNG是可携带网络图像的简称。 它是由W3C开发的一种可替代GIF图片的格式。
同GIF一样，PNG使用无损压缩逻辑, 可用于8位或者24位。两种都支持透明度。
但是24位PNG图片的透明度使用的是红绿蓝通道的伴随alpha通道。
因此GIF和8位PNG图片要不是全非透明或者全透明。PNG图片的每个像素提供256级不透明度。
24位PNG图片可用做：
不同级别透明度的Web图片
复杂的照片和图像
需要频繁编辑和导出的图像, 同时PNG的无损格式保证不失真。
SVG
SVG是可伸缩矢量图像的简称， 是一种基于XML的矢量文件类型。
尽管从2001年开始使用， 在web开发中变的十分流行。
之前由于较少浏览器支持，SVG近些年势头佷弱。
幸运的是, 我很高兴的说，在写本文的时候，所有主流浏览器已经都支持SVG
尽管还是有一些局限和BUG。
SVG格式优点
SVG总是比栅格图体积更小， 特别是优化SVG和开启GZIPPED压缩
可伸缩，这意味着在不同分辨率的屏幕下始终保持清晰
可以在HTML中编写SVG代码，节省HTTP请求
SVG代码可以使用CSS定制样式
可以做动画， 包括特殊部分，可以用CSS和JavaScript, 很酷
因为文件大小会增长，请避免在web上使用过度复杂的SVG图像。
最后, SVG不适合照片图像, 最好选择JPG格式或webP。
WebP
尽管从2010年开始出现，我不会否认webP仍然很新，也没有JPG或PNG出名。
但是这种图片格式DNA就与web相关: 它为专用web而生，超级有趣。
webP是一种由谷歌开发的开源图片格式。有如些关键特性:
webP是一种web上具有优异无损和有损压缩率的现代图片格式。
WebP无损图片大小比PNG图片小26%。WebP有损图片大小比JPG图片小25%-34%。
无损WebP支持透明度, 仅需要额外22%的字节数。对于有损RGB压缩可接受的场景，
有损WebP同样支持透明度, 并且大小比PNG小3倍。WebP website
WebP之美在于结合JPG和PNG格式的优点，同时文件尺寸不大。
现在，浏览器已经很好支持WebP:
基于Blink引擎的浏览器已经率先支持WebP, 毕竟WebP是谷歌创造的。
在不支持webP的浏览器向后兼容性，如：IE/edge, firefox, safari, 已经有人设计出合适的折衷方案。
以下是一些你可以了解和使用WebP相关优秀资源：
WebP 答疑
什么是WebP以及为什么WebP很重要?
如何选择最佳图片格式优化网站
WebP图片使用指南: 案例研究
使用WebP图片
总结
本文，我总体介绍Web使用的图片格式，简要讨论每种图片格式适用的类型。
JPG，GIF和PNG十分流行，已经用了很多年。 SVG和webP作为很好的替代相对较新。
SVG十分适用绘画和简单图片，webP覆盖JPG和PNG使用的所有场景。
你在开发工作已经在用SVG或WebP吗？ 你遇到了什么挑战？ 或者你获得了显著性能提升?
欢迎在讨论区分享。
译者注
原文链接
因译者水平有限，如有错误，欢迎指正交流