Fork me on GitHub

前端性能优化与原理实践之【图片性能优化】

网络篇:对图片的性能优化!

一、图片优化

JS 和 CSS 确实影响着图片的展示,最关键的就是对图片的展示方式影响最大。但是对于图片的显示,和图片大小有关,有时候我们做图片优化的同时,降低了图片的质量。所以我们图片优化的目标就是在图片质量和性能之间寻找一个平衡点。

二、选择图片的方案

前端最常用的图片有 JPEG/JPG 、PNG、WebP、Base64、SVG 等。对于不同格式的图片,都有它的优势所在,也对于不同的业务场景中。

2.1 JPEG/JPG

关键字:有损压缩、体积小、加载快、不支持透明

JPG 优点:

虽然 JPG 是有损压缩,压缩至原来的 50% 以下,但是 JPG 仍然可以把持住 60% 的品质。此外的 JPG 的格式是以 24 位存储单个图,可呈现 1600 种颜色,对付大多数的场景完全可以,而且人的肉眼是察觉不出来的。(呈现大图保证质量,但又不会带来性能问题

JPG 缺点:
  • 对于大图 JPG 完全没有问题,但是杜宇矢量图形和Logo等条纹、颜色对比度大的图片,图片就会变的模糊。

  • 而且不支持透明度。

适用场景:

一般处理复杂的、色彩层次丰富的图片,比如:大的背景图、轮播图、Banner 图。

2.2 PNG-8 和 PNG-24

对于这两种格式的图片,最好的办法就是输出图片,用肉眼进行对比,如果对图片质量要求不是太高,可以选择 PNG-8 ,因为 PNG-8 可以避免体积过大的问题,PNG 优势就是处理线条和颜色的对比度比较优秀。

适用场景:

根据 PNG 的优势,我们用于处理一下小的 Logo、颜色对比度强烈的小图片。

2.3 SVG

关键词:文本文件、体积小、不失真、兼容性好

SVG(可缩放矢量图形)是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着本质的不同:SVG 对图像的处理不是基于像素点,而是是基于对图像的形状描述。

SVG 优点:

SVG 是文本文件,我们既可以像写代码一样定义 SVG,把它写在 HTML 里、成为 DOM 的一部分,也可以把对图形的描述写入以 .svg 为后缀的独立文件(SVG 文件在使用上与普通图片文件无异)。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
</html>
1
<img src="文件名.svg" alt="">

PNGJPG 相比:

  • 体积更小
  • 压缩性更强
  • 无限放大不失真
  • SVG 就是 HTML 文件,成为 DOM 的一部分,使用更加的灵活。
适用场景:

2.4 Base64

关键字:文本文件、依赖编码、小图标解决方案

Base 64 不是一种图片格式,而是一种编码方式。Base64 主要用于小图标解决方案。Base64 的出现为乐减少加载网页图片时对服务器的请求次数,从而优化网络请求,提高性能。一般使用 webpack 进行编码。

Base64 的优势:

  • Base64 是图片的8 bit字节码编码方式,通过对图片的进行Base64编码,可以将编码结果写入 HTML 和 CSS
  • 减少了图片 HTTP 的请求次数
  • 浏览器是可以识别Base64编码的,不会发起请求,而是直接将编码解析为图片。

应用场景:

  • Base64 主要应用于小图片,比如非常小的 Logo、图片。

  • 图片的实际尺寸很小(大家可以观察一下掘金页面的 Base64 图,几乎没有超过 2kb 的)

  • 图片无法以雪碧图的形式与其它小图结合(合成雪碧图仍是主要的减少 HTTP 请求的途径,Base64 是雪碧图的补充)
  • 图片的更新频率非常低(不需我们重复编码和修改文件内容,维护成本较低)

PS:大图为什么不能转化为 Base64,大图的转化虽然减少了 HTTP 请求,不但整个文件的体积增加了,而且浏览器解析大图的时间效率也会增加,然而性能就会增加,得不偿失。

2.5 WebP

WebP 旨在加快图片加载速度的图片格式,支持有损压缩和无损压缩。

优势:

  • 和 JPEG 相比,支持细节丰富的图片。
  • 和 PNG 相比,支持透明度。
  • 可以显示 GIF 动态图片。

WebP 无损图像的尺寸缩小了 26%。

WebP 有损图像比同类 JPEG 图像小 25-34%。

对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。

局限性:

  • WebP 兼容性很差,最低支持 IE11
  • WebP 和编码的 JPG 相比,占用很多的计算机资源。

适用条件:

因为 WebP 的兼容性非常差,在 Safari 浏览器下无法显示图片的情况,我们通常做兼容性处理,通常设置两种形式的图片,在不同的浏览器中显示的图片格式也不同。

PS:把判断工作交给后端,由服务器根据 HTTP 请求头部的 Accept 字段来决定返回什么格式的图片。当 Accept 字段包含 image/webp 时,就返回 WebP 格式的图片,否则返回原图。