图的分类

光栅图和矢量图

  • 光栅图：是基于 pixel 像素构成的图像。JPEG、PNG、webp等都属于此类

  • 矢量图：使用点、线和多边形等几何形状来构图，具有分辨率和缩放功能。SVG就是一种矢量图。

    无压缩、无损压缩、有损压缩

  • 无压缩：无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP格式就是其中之一。

  • 无损压缩：压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。PNG是其中的代表。

  • 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。

    图片格式

    GIF

    诞生时间：1987
    一种位图图形文件格式，以 8 位色（即 256 种颜色）重现真彩色的图像，采用 LZW 压缩算法进行编码。
    介绍：栅格图形。支持 256 色；仅支持完全透明和完全不透明；如果需要比较通用的动画， GIF 是唯一选择。
    优点：

  • 支持动画和透明背景

  • 兼容性好
  • 灰度图像表现佳
  • 部分接收到的文件可以以较低的质量显示

缺点：

  • 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
  • 支持透明，但不支持半透明，边缘有杂边

不适合：每个像素只有 8 比特，不适合存储彩色图片。
非常适合：动画，图标。

Base64

诞生时间：1987
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个 http 来请求图片。
优点：

  • 无额外请求
  • 对于极小或者极简单图片
  • 可像单独图片一样使用
  • 没有跨域问题，无需考虑缓存、文件头或者 cookies 问题

缺点：

  • 相比其他格式，体积会至少大 1/3
  • 编码解码有额外消耗

JPEG

诞生时间：1992
针对彩色照片而广泛使用的有损压缩图形格式。
介绍：栅格图形。常用文件扩展名为 .jpg，也有 .jpeg 、.jpe ，.jpeg 在互联网上常被应用于存储和传输照片。
优点：

  • 压缩率好
  • 兼容性好
  • 色彩丰富

缺点：

  • 不支持动画、背景透明

不适合：线条图形和文字、图标图形，因为它的压缩算法不太适合这些类型的图形；并且不支持透明度。
非常适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。

PNG

诞生时间：1996
一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。
介绍：栅格图形。 PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG 或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图形（PNG-24）和 8 位灰度图像（PNG-8）。PNG-8 跟 GIF 的属性是相似的，都是索引色模式，而且都支持背景透明。PNG-24 其实就是无损压缩的 JPEG 。而 PNG-32 就是在 PNG-24 的基础上，增加了透明度的支持。
如果没有动画需求推荐使用 png-8 来替代 gif 。
优点：

  • 不失真的情况下尽可能压缩图像文件的大小
  • 像素丰富
  • 支持透明

缺点：

  • 文件大

不适合：由于是无损存储，彩色图像体积太大，所以不太适合。
非常适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

SVG

诞生时间：1999
SVG 是一种基于 xml 的适量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。
优点：

  • 可伸缩性，可以随心所欲的改变图像大小
  • svg 平均比 gif、jpeg、png 小得多，甚至在极高的分辨率下也是如此
  • 支持动画
  • 与 dom 无缝连接，可以直接使用 html、css 和 javascript 来操作

缺点：

  • svg 复杂度高贵减慢渲染速度
  • 不适合游戏类等高互动动画

JPEG2000（了解即可）

诞生时间：1997 to 2000
JPEG 2000 是基于小波变化的图像压缩标准，由 Joint Photographic Experts Group 组织创建和维护。 JPEG 2000 通常被认为是未来取代 JPEG （基于离散余弦变换）的下一代图像压缩标准。 JPEG 2000 文件的副档名通常为 .jp2， MIME 类型是 image/jp2 。
JPEG2000 的压缩比更高，而且不会产生原先的基于离散余弦变换的 JPEG 标准产生的块状模糊瑕疵。 JPEG2000 同时支持有损压缩和无损压缩。
目前就 safari 支持。
优点：支持有损压缩和无损压缩
缺点：支持率太低了

APNG

诞生时间：2004
APNG（Animated Protable Network Graphics）顾名思义是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了 24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。
从 can i use 上查看，除了 IE 系列， chrome 、firefox 、safari 均已支持。 2021 年 8 月的时候支持达到 94%。
相对 GIF 来说：

  • 色彩丰富
  • 支持透明
  • 向下兼容 PNG
  • 支持动画

缺点：

  • 生成比较繁琐
  • 未标准化

WebP

诞生时间：2010
是一种现代图像格式，可为图像提供无损压缩和有损压损，这使得它非常灵活。
介绍：优秀算法能同时保证一定程序上的图像质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用 8 位压缩算法。无损的 Webp 比 PNG 小 26% ，有损的 Webp 比 JPEG 小 25-34% ，比 GIF 有更好的动画。
从 can i use 上看，支持率 95% ，主要是 safari 低版本和 IE 低版本不兼容。
优点：

  • 同等质量体积更小
  • 压缩之后质量无明显变化
  • 支持无损图像
  • 支持动画

不适合：最多处理 256 色，不适合于彩色图片。
非常适合：适用于图形和半透明图像。
使用：

  • 图片服务器支持转换
  • js 检测是否支持 webp 并拼接相应参数到图片链接

图片比较

  • 大小比较：通常地，PNG ≈ JPG ＞ GIF 8位的 PNG 完全可以替代掉 GIF
  • 透明性： PNG ＞ GIF ＞ JPG
  • 色彩丰富程度：JPG ＞ PNG ＞ GIF

  • 兼容程度： GIF ≈ JPG ＞ PNG

    图片优化

    用工具进行图片压缩

    压缩PNG

    使用 node-pngquant-native
    跨平台，压缩比高，压缩 png24 非常好。
    说明文档：https://www.npmjs.com/package/node-pngquant-native
    安装方法： npm install node-pngquant-native

    压缩jpg

    使用 jpegtran
    跨平台，有 Linux 、Mac 、 Windows 的解决方案
    官网：http://jpegclub.org/jpegtran/
    安装方法：npm install -g jpegtran
    使用方法：jpegtran -copy none -optimize -outfile out.jpg in.jpg

    压缩GIF

    使用 Gifsicle：通过改变每帧比例，减少 gif 文件大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案。
    安装：http://www.lcdf.org/gifsicle/
    使用方式：

  • 优先级别设置为不小于 2， 1 的话基本不压缩 gifsicle —optimize=3 -o out.gif in.gif_

  • 将透明部分截去 gifsicle —optimize=3 —crop-transparency -o out.gif in.gif

图片尺寸随网络环境变化

不同网络环境（wifi/4G/3G）下，加载不同尺寸和像素的图片，通过在图片URL后缀加不同参数改变。

响应式图片

  • JavaScript 绑定事件检测窗口大小

  • CSS 媒体查询

    1. @media screen and (max-width: 640px) {
    2. my_image{ width: 640px; }
    3. }

  • img 标签属性（x描述符：表示图像的设备像素比）

    1. <img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x"
    2.    src="img-960w.jpg" alt="img">

    逐步加载图像

  • 使用统一占位符

  • 使用 LQIP
  • 使用 SQIP

真的需要图片吗？

  • Web Font 代替图片
  • 使用 Data URI 代替图片
  • 采用 Image spriting （雪碧图）

图片服务器自动优化

图片服务器自动化优化是可以在图片 URL 链接上增加不同特殊参数，服务器自动化生成。
处理方式：

  • 图片裁剪：按长边、短边、填充、拉伸等缩放。
  • 图片格式转换：支持 JPG ， GIF ， PNG ， Webp 等，支持不同的图片压缩率。
  • 图片处理：添加图片水印、高斯模糊、重心处理、裁剪边框等。
  • AI能力：鉴黄以及智能抠图、智能排版、智能配色、智能合成等 AI 功能。

在线压缩工具