跳到主要内容

图片大小优化

图片格式​

jpeg​

栅格图形，扩展名常用.jpg

不适合​

  • 线条图形
  • 文字、图标图形

因为它的压缩算法不太适这些类型的图形；并且不支持透明度。

非常适合​

  • 颜色丰富的照片
  • 彩色图大焦点图、通栏 banner 图；
  • 结构不规则的图形

png​

栅格图形，一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。

PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG 或者 GIF 大，但是 PNG 非常好的保留了图像质量，支持 Alpha 通道的半透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。

不适合​

由于是无损存储，彩色图像体积太大，所以不太适合。

非常适合​

地图、透明、线条绘图、图标；边缘清晰，有大块相同颜色区域；颜色较少但需要半透明。

GIF​

GIF (Graphics Interchange Format)

介绍​

栅格图形。 支持 256 色; 仅支持完全透明和完全不透明; 如果需要比较通用的动 画, GIF 是唯一选择。

不适合​

每个像素只有 8 比特, 不适合存储彩色图片。

非常适合​

动画, 图标。

Webp​

  • Webp 是一种现代图像格式,可为图像提供无损压缩和有损压缩,这使得它非常灵活。由 Google 在购买 On2 Technologies 后发展出来,以 BSD 授权条款发布。
  • 介绍:优秀算法能同时保证一定程序上的图像质量和比较小的体积;
  • 可以插入多帧,实现动画效果;
  • 可以设置透明度;
  • 采用 8 位压缩算法。无损的 Webp 比 PNG 小 26%,
  • 有损的 Webp 比 JPEG 小 25-34%,比 GIF 有更好的动画。

不适合​

最多处理 256 色,不适合于彩色图片。

非常适合​

适用于图形和半透明图像。

其他的一些占内存较小的图片后缀​

按优化效果排

  • jpeg-xl
  • heif
  • avif
  • webp

按普及程度则是

  • webp
  • avif
  • jpeg-xl

如何判断图片格式​

看 Content-Type 比如

Content-Type: image/webp

图片组件可以用 web-component 封装

用工具进行图片压缩​

png​

压缩 png 可以使用 npm 包node-pngquant-native

优点： 跨平台，压缩比高，压缩 Png24 非常好

https://www.npmjs.com/package/node-pngquant-native

jpg​

使用 npm 包jpegtran

http://jpegclub.org/jpegtran

gif​

gifsicle 通过改变每帧比例，减小 git 文件大小

同时可以利用透明来达到更小的文件大小，目前公认的解决方案

http://www.lcdf.org/gifsicle/

使用要点：

  • 优化级别设置为不小于 2，1 的话基本不压缩

  • 将透明部分截去

图片尺寸随网络环境变化​

不同网络环境下（Wifi/4G/3G）下 加载不同尺寸和像素的图片

通过在图片的后缀加不同参数来改变

assets/img100x100
assets/img1000x1000

用别的方式替代传统图片​

  • web font
  • 使用 Data URI
    • 即 base64 可以把 base64 代码以 css 文件的形式缓存在本地
  • 使用雪碧图

服务端做图片优化​

前端只要图片名称后加参数就行，服务端来做图片优化方案