前端性能优化之：图片缩放 🚀

哈喽，大家好。今天，我们来聊一个非常接地气但又极其重要的话题------图片缩放。

你可能会说："切，图片缩放？img 标签上加个 width 和 height 不就行了？" 🤔

朋友，如果事情这么简单，那我就没必要写这篇文章了。在如今这个移动互联网时代，流量、加载速度、用户体验，每一个环节都至关重要。一张未经处理的高清大图，可能会让你的网页在移动端"瞬间劝退"用户。

所以，今天我要带大家深入探讨一下，如何利用云存储服务，优雅且高效地实现图片缩放，全面提升你的应用性能！

1. 前言：为什么我们需要图片缩放？

1.1 背景：移动端的"流量刺客"

想象一个场景：你的产品运营上传了一张 50MB 的高清 Banner 图，分辨率高达 4000x3000。在 PC 端，这可能没什么问题。但在移动端，一个用户的屏幕宽度可能只有 375px，你却让他加载了一张宽度是你 10 倍还多的图片。

这会带来什么问题？

加载缓慢 ⏳：用户在 4G/5G 环境下，需要消耗更多的时间和流量来下载这张大图，白屏时间大大增加。
体验糟糕 😫：图片加载出来之前，页面布局可能会因为图片尺寸未知而发生跳动（CLS），非常影响观感。
成本增加 💰：对于按流量计费的云服务来说，加载不必要的图片数据意味着真金白银的浪费。
内存崩溃 🤯：在微信小程序等有严格内存限制的环境中，加载过大的图片会迅速消耗宝贵的内存资源，极易导致小程序闪退或崩溃。

因此，按需加载合适尺寸的图片，是移动端开发中必须考虑的优化项。

1.2 目标：只为用户提供"刚刚好"的图片

我们这篇文章的目标很明确：解决上述痛点。我们要实现一个方案，能够根据前端页面所需的尺寸，动态地从云存储请求一张"刚刚好"大小的图片。

这样做的好处是显而易见的：

提升加载速度：图片体积大大减小，加载速度飞快。
优化用户体验：图片秒开，布局稳定。
节省带宽成本：只传输必要的数据，为公司省钱。

2. 主体：云存储缩放的黑魔法

2.1 原理揭秘

很多新手可能会以为图片缩放是前端或者后端服务的工作。其实，现在主流的云存储服务（如阿里云 OSS、腾讯云 COS、华为云 OBS）都内置了强大的数据处理功能，图片处理只是其中之一。

其实现方式非常简单：通过在图片的 URL 链接后拼接特定的参数，来告诉云存储服务你想要对这张图片做什么样的处理。

云服务在接收到这个请求后，会实时地对原图进行处理（例如缩放、裁剪、加水印等），然后将处理后的结果返回给用户，整个过程无需我们自己部署任何图片处理服务。

下面我画了一个简单的流程图来说明这个过程：

graph TD A["用户设备 (Client)"] -- "请求一张 300x200 的图片" --> B("前端代码"); B -- "组装URL: https://.../image.jpg?param=w_300,h_200" --> C("云存储服务 (OSS/COS/OBS)"); C -- "找到原图 image.jpg" --> D{"图片处理模块"}; D -- "根据参数实时缩放/裁剪" --> E["生成 300x200 的新图片"]; E -- "返回处理后的图片" --> A;

2.1.1 图片缩放的技术原理简介

你可能会好奇，云服务背后是怎么把一张大图变小的呢？这其实涉及到图像处理中的插值算法。简单来说，就是当图片的像素点数量发生变化时，如何计算新图中每个像素点的颜色。

常见的算法有这么几种：

最近邻插值 (Nearest Neighbor) ：最简单粗暴的一种。新图像中的像素点，直接照搬原图中离它最近的那个像素点的颜色。优点是速度飞快，缺点是缩放后的图片容易出现锯齿，质量较差。
双线性插值 (Bilinear Interpolation) ：它会考察原图中目标位置周围的 4 个像素点，并根据它们与目标位置的距离，加权计算出新像素点的颜色。效果比最近邻平滑得多，是速度和质量的一个很好的平衡点。
双三次插值 (Bicubic Interpolation) ：更高级的玩法。它会考察周围 16 个像素点，使用更复杂的计算公式来生成新像素。缩放后的图片更清晰，细节保留得更好，但计算量也更大。

大部分云厂商的图片处理服务，默认会采用效果较好的双线性或双三次插值，以确保输出的图片质量。

2.2 代码实现

理论说完了，我们来看代码

我司针对阿里云 / 腾讯云 / 华为云等都做了包封装。其中包含了多端(PC/Taro/Uni/React Native)等图片上传和缩放的逻辑封装

下面是关于图片缩放部分的实现。仅作演示讲解，并不代表最佳实践和通解。如果你有更好的实现方案。欢迎讨论

核心逻辑：`trunc` 函数

在所有实现中，工具函数：

javascript 复制代码

// 几倍图
const multiple = 2

/**
 * 计算整数
 */
function trunc(nu: number) {
  return Math.trunc(nu) * multiple
}

这个函数的作用是取一个整数，并乘以 multiple（这里是 2）。这是为了适配高分屏（Retina 屏幕） 。在这些设备上，一个 CSS 像素点背后对应着多个物理像素点（DPR > 1）。为了让图片在这些屏幕上看起来更清晰，我们通常会请求 2 倍或 3 倍大小的图片。

阿里云 OSS 实现 (`index.ts`)

阿里云 OSS 的图片处理参数以 ?x-oss-process=image 开头。

javascript 复制代码

function getResizeUrl({ width, height }: ISize = {}) {
  // 参数以 x-oss-process=image/resize 开头
  // 如果同时有宽高，则使用 m_fill 模式（固定宽高，自动裁剪）
  let url = `?x-oss-process=image/resize${width && height ? ',m_fill' : ''}`
  if (width) {
    // w_宽
    url += `,w_${trunc(width)}`
  }
  if (height) {
    // h_高
    url += `,h_${trunc(height)}`
  }
  return url
}

export function assembleResizeUrl(url?: string, size?: ISize) {
  return url ? url + getResizeUrl(size) : ''
}

腾讯云 COS 实现 (`tecent-yun.ts`)

腾讯云的参数风格则完全不同，它使用 ?imageView2 作为入口。

javascript 复制代码

export function assembleResizeUrl(url?: string, size?: ISize) {
  return url
    ? `${url}?imageView2/2/w/${trunc(size?.width) || ''}${
        size?.height ? `/h/${trunc(size?.height)}` : ''
      }/gravity/center`
    : ''
}

华为云 OBS 实现 (`huaweiyun.ts`)

华为云的参数又是一种风格，以 ?x-image-process=image 开头，和阿里云非常相似。

arduino 复制代码

function getResizeUrl({ width, height }: ISize = {}) {
  if (!width && !height) {
    return ''
  }
  let url = '?x-image-process=image/resize'

  // m_fixed 模式等同于阿里云的 m_fill
  if (width && height) {
    url += ',m_fixed'
  }

  if (width) {
    url += `,w_${trunc(width)}`
  }

  if (height) {
    url += `,h_${trunc(height)}`
  }

  return url
}

2.3 各家云厂商实现方式对比

云厂商	主要参数指令	缩放模式示例 (固定宽高)	优点	注意事项
阿里云 OSS	`x-oss-process`	`m_fill`	功能强大，文档详细，生态完善	参数拼接较为复杂，逗号分隔容易出错
腾讯云 COS	`imageView2`	`imageView2/2`	URL 路径形式，语义化更强，更直观	必须开通数据万象服务，开通后存储桶将自动绑定数据万象
华为云 OBS	`x-image-process`	`m_fixed`	与阿里云参数类似，迁移成本较低	视频处理等功能可能需要额外开启 MPC 服务

2.4 云服务 vs 开源自建方案

除了使用各大云厂商提供的服务，我们还有另一种选择：自建图片处理服务。社区也有一些非常优秀的开源项目。

Thumbor: 一个非常老牌和强大的图片处理服务，用 Python 编写。它的功能极其丰富，甚至包括基于人脸识别的智能裁剪。但功能强大的背后是部署和维护相对复杂。并且如果你有视频截帧的需求，就用它！
Imgproxy : 一个用 Go 编写的后起之秀。它以速度、安全、简单为核心设计理念。虽然功能不及 Thumbor 那么花哨，但它的性能极高，资源消耗低，并且非常容易通过 Docker 进行部署，是目前非常流行的选择。虽然很好用但是很多高级功能比如视频截帧并不开源。

怎么选？

初创团队/中小型项目：直接用云厂商的服务。开箱即用，按量付费，省心省力。
大型项目/有特殊需求：当图片处理请求量巨大，或者有深度定制化的需求时，可以考虑自建方案。虽然有运维成本，但长期来看可能会更节省费用，并且拥有更高的自主性。

3. 总结

好了，关于云存储图片缩放的话题，今天就聊到这里。我们来回顾一下核心要点：

为什么要做？ 为了提升移动端加载速度、优化用户体验、节省带宽成本，以及防止在小程序等环境中内存崩溃。
原理是什么？ 利用云存储服务或自建服务，通过 URL 参数对图片进行实时处理，其背后是各种图像插值算法在起作用。
如何实现？ 可以选择云厂商的服务（方便快捷），也可以选择 Thumbor 或 Imgproxy 等开源方案进行自建（灵活可控）。

这个技术虽然简单，但效果立竿见影，是前端性能优化中的"必杀技"。希望这篇文章能帮助你更好地理解和应用它。

如果你觉得这篇文章对你有帮助，别忘了点赞、评论、分享三连哦！👍❤️

下次见！👋

前端性能优化之：图片缩放 🚀

1. 前言：为什么我们需要图片缩放？

1.1 背景：移动端的"流量刺客"

1.2 目标：只为用户提供"刚刚好"的图片

2. 主体：云存储缩放的黑魔法

2.1 原理揭秘

2.1.1 图片缩放的技术原理简介

2.2 代码实现

核心逻辑：trunc 函数

阿里云 OSS 实现 (index.ts)

腾讯云 COS 实现 (tecent-yun.ts)

华为云 OBS 实现 (huaweiyun.ts)

2.3 各家云厂商实现方式对比

2.4 云服务 vs 开源自建方案

3. 总结

核心逻辑：`trunc` 函数

阿里云 OSS 实现 (`index.ts`)

腾讯云 COS 实现 (`tecent-yun.ts`)

华为云 OBS 实现 (`huaweiyun.ts`)