如何为网站选择正确的图片格式

如何为网站选择正确的图片格式

更多关于作者的文章

截至2017年3月,网站内容图片占比超过65%
这并让人惊讶, 图片增添美感,表达信息,讲述故事同时与你的网站访问者建立联系。
反面就是,如果用的不正确,图片总会是 低性能网站的祸根 和糟糕的用户体验。

正确使用图片主要包含两方面的考虑:

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

本文将会讨论第一点。我将会专门介绍web专用的图片格式以及它们最适用的场景。
在进一步讨论前,让我简要解释一些术语。

栅格/位图与矢量图

栅格或位图由二维像素网格组成,每个像素保存颜色及透明度值。
栅格图片缩放效果不好: 如果你放大一张栅格图片,它的清晰度和质量将会下降。
Web常用的栅格图片类型有JPEG、JPG、gif和png格式。

这里有两张苹果的栅格图片(JPG)。第一张图片是自然大小。第二张展示的放大版本。

栅格图片自然大小示例

栅格图片自然大小示例

栅格图片放大示例

栅格图片放大示例

注意相比自然原图放大图片的失真部分。

相反,矢量图片由线、图形和路径点。矢量信息并保存在像素中。当然他们是以完全与像素独立的数学绘制指令形式进行保存。
Alex Walker在谈到SVG的时候解释的很清楚,最流行的Web矢量格式有:

SVG 并不是一种图片格式, 它不仅仅是一张图片 教程

为什么JPEG图片像麦当劳苹果派而SVG确不是

与清晰度无关的好处是当前缩放矢量图片至核心内容, 总是看起来十分清晰,尤其是视网膜屏幕。

缩小的SVG图片

缩小版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相关优秀资源:

总结

本文,我总体介绍Web使用的图片格式,简要讨论每种图片格式适用的类型。

JPG,GIF和PNG十分流行,已经用了很多年。 SVG和webP作为很好的替代相对较新。

SVG十分适用绘画和简单图片,webP覆盖JPG和PNG使用的所有场景。

你在开发工作已经在用SVG或WebP吗? 你遇到了什么挑战? 或者你获得了显著性能提升?

欢迎在讨论区分享。

译者注

  • 原文链接

  • 因译者水平有限,如有错误,欢迎指正交流

推荐阅读更多精彩内容

  • 今年的她还是依旧喜欢梅花鹿,但从来没见过,只有在书上或网络图片,看到电脑上的梅花鹿是那样漂亮。 ...
    小暖蛋阅读 33评论 0 0
  • RVM RVM 一个命令行工具,使用它你能简单的通过命令行进行安装,管理和与多个gem集的Ruby环境工作。这个网...
    _willing阅读 1,147评论 0 0
  • 太久的沉寂 让这里变得了无生气 粉饰的美丽散发着阴冷的气息 下一个目标是谁嗜血的蝙蝠在寻觅 谁也无法去代替心中住着...
    贪嗔痴tech阅读 362评论 0 0
  • 17年在一片欢腾中逝去,星空却还是那片星空,那几颗亮着的星却显的更加明亮,甚至照进了我们的心房。不经意,我们又有...
    薇茹阅读 186评论 1 5