灏天阁

图片的优化策略，推荐 WebP

· Yin灏

图片是页面上重要的组成部分，在页面加载的过程中，应当优先让图片和文字最快的展示，从而提高页面的加载速度

图片 JPG 格式

  • 图片特点 JPG 格式以 24 位存储单个图，可以呈现多达 1600 万种颜色，足以应对大多数场景下对色彩的要求，这一点决定了它压缩前后的质量损耗并不容易被我们人类的肉眼所察觉
  • 图片特性 有损压缩 体积小 加载快 不支持透明
  • 使用场景 适用于呈现色彩丰富的图片，经常作为大的背景图、轮播图或 Banner 图

图片 PNG-8 与 PNG-24 格式

  • 图片特点 PNG-8 最多支持 256 种颜色，而 PNG-24 可以呈现约 1600 万种颜色。PNG 图片比 JPG 图片具有更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持
  • 图片特性 无损压缩 质量高 体积大 支持透明
  • 使用场景 适用于呈现小的 Logo、颜色简单且对比强烈的图片或背景等

图片 SVG 格式

  • 文件概览 SVG 是一种矢量图格式，可以无限放大而且不会失真 | 在线矢量图库
  • 对比 JPG 和 PNG 的优势 文本文件 文件体积更小 可压缩性更强
  • 使用方式 可以直接写在 HTML 里成为 DOM 的一部分，也可以作为 .svg 后缀的独立文件，在使用上和普通图片一样

图片 Base64 编码

  • 编码概览 Base64 是一种索引编码，每个字符都对应一个索引，具体的关系图，如下： base64.webp Base64 是基于 64 个可打印字符来表示二进制数据的编解码方式 可打印字符包括大写字母 A-Z 、小写字母 a-z、数字 0-9 共 62 个字符，再加上 2 个 + 和 / 号
  • 使用方式 在使用上和普通图片一样，将编码后的字符串作为图片 src 或背景的 url 内容
  • 使用场景 作为小图标解决方案而存在，目的为了减少加载网页图片时对服务器的请求次数，从而提升网页性能
  • 工具推荐 推荐使用 webpack 的 url-loader 来进行 Base64 编码。它可以根据文件的大小，判断图片是否有必要进行编码

图片 WebP 格式

  • 图片特点 WebP 是一种同时提供了 有损压缩 与 无损压缩 的图片文件格式，支持透明度，支持动图，且文件体积更小 在动画图像文件的情况下，将 GIF 图像转换为 WebP 图像会将文件大小减少一半，同时保持图像质量
  • 注意事项 存在兼容性问题，在 Safari 等浏览器下无法正常显示
  • 优雅降级方案 先加载一个 WebP 图片，如果能获取到该图片的宽度和高度，就说明是支持 WebP 的，反之则不支持
const isSupportWebp = (nature = "lossy") => {
  const strategies = Object.assign(Object.create(null), {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", //有损
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", // 无损
    alpha:
      "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", // 透明
    animation:
      "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA", // 动图
  });
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => img.width > 0 && img.height > 0 && resolve(true);
    img.onerror = () => resolve(false);
    img.src = `data:image/webp;base64,${strategies[nature]}`;
  });
};

isSupportWebp().then((bool) => {
  // true 表示支持，false 表示不支持
});
  • 渐进增强方案
  <picture>
    <source type="image/webp" srcset="https://www.alicdn.com/pic.webp"></source>
    <img src="https://www.alicdn.com/pic.jpg" alt="picture">
  </picture>

支持 picture 与 webp 格式的浏览器下，就会加载 webp 格式的图片；否则忽略将picture 与 source 元素，应用 img 标签中的 jpg 格式图片 通过 type 属性指定文件 MIME 类型 通过 media 属性指定媒体条件，类似于媒体查询，示例如下：

<picture>
  <source type="image/webp" srcset="https://www.alicdn.com/pic.webp" media="(min-width: 600px)"></source>
  <img src="https://www.alicdn.com/pic.jpg" alt="picture">
</picture>

使用 CDN 图片

  • 概览 专门为图片做优化的，通常包含缩放、格式转换等 可以把它看成是一个 API，通过传入尺寸、质量、格式等参数，获取对应的图片内容
  • 使用场景 将更新频率较低的图片可以直接放在服务器上，既能降低访问延时，又可以适用于多种不同的场景

雪碧图（CSS Sprites）

  • 核心思路 将多个小图标和背景图片合并到一张图片上的图像拼合技术，然后利用 CSS 的背景定位 backrground-position 来控制需要显示的图片部分 | 在线生成雪碧图工具
  • 设计背景 当应用系统中的小图标和小图片过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低了页面的加载速度
  • 优化效果 有效地减少服务器接收和发送请求的次数，提高页面的加载速度

在线压缩工具

  • Tinypng 使用有损压缩技术来减小图片大小，支持 webp、jpeg、png 格式的图片，可以进行批量压缩 缺点：图片大小不能超过 5M
  • Squoosh 可以压缩超过 5M 的图片，支持 webp、jpeg、png 格式的图片
  • Picdiet 不限制图片大小，仅支持 jpg 格式的图片压缩

- Book Lists -