作者 |马超，网络生态负责人；

张西平，产品经理

一、背景说明

字节跳动自公司成立以来就打造了图像处理平台。最初主要服务今日头条APP的图文资源。随着业务的拓展，逐渐服务了抖音相册、短视频翻唱、今日头条等几乎所有用户。所有图片均为场景；火山引擎视频云团队将字节跳动图像处理的实践整理成“进化之路”系列，将从服务器、客户端、网络库、业务场景和优化等多个角度进行阐述。介绍图像处理压缩、成本节约、体验优化等方面的经验和解决方案；

本文重点介绍Web端演变和提供的能力。图片是网站中的重要元素。图片体积、格式、分辨率和渲染方式对用户体验有重大影响。火山引擎为企业提供灵活高效的一站式图片解决方案和静态素材托管解决方案，覆盖图片生产和消费阶段的上传、存储、处理、分发、评估等各个环节。

2. 解决的问题

图片在Web场景中的应用非常广泛，从传统的图形到视频封面。画面体验是用户体验中非常重要的一部分。常用来衡量网站性能的LCP和CLS指标都将图片列为最重要的元素之一。随着业务的发展，用户数量的增加也带来了CDN带宽成本的快速增加。最重要的元素是图片和视频。因此，该方案从体验和成本出发，旨在提升用户体验的同时降低带宽成本。

2.1 用户体验可视化

画面体验问题通常包括以下几点：

开发者往往忽视图像体验，不了解图像对网站性能的影响。还缺乏可量化的数据来衡量网站的图像体验。参考性能优化指南，该方案集成了图像压缩、图像延迟加载、图像稳定布局、错误恢复等能力，并集成了数据监控能力。它可以与火山引擎控制台结合查看实时市场数据，为业务提供数据报告和数据。分析、数据追踪、数据报警等全链路支持。

2.2 带宽成本问题

以下问题通常会导致额外的带宽成本：

除了图像压缩外，该方案还支持WebP、AVIF等高压缩图像格式的自适应加载，以及图像分辨率的自适应加载，以尽可能减小图像尺寸。同时集成了图片延迟加载，避免在不可见区域加载图片，降低网站CDN成本，也提高了网站整体加载速度。据内部业务数据显示，图像传输带宽和图像加载时间通常可降低50%以上。

3. 方案结构

解决方案一般可以分为两部分：图片加载和数据监控。

如图所示，图片加载部分支持分辨率、格式适配、延迟加载、稳定布局等特性。图片处理部分基于引擎服务，如图片转码、缩放、压缩等。SDK端生成当前环境下最好的图片格式和分辨率，从服务中获取对应的图片URL，并使用云端在运行时动态生成所需图像的处理能力。

数据监控部分可分为加载时间监控、图像细节监控、图像质量评估、大图监控、云控配置。监控SDK根据云端下发的配置采集相关数据并上报数据。 服务对数据执行操作。清理完成后，可以在控制台端查看数据盘。

4. 模块详细介绍

4.1 图片加载

4.1.1 图片格式适配

常见的图像格式有PNG、JPEG、GIF、WebP、AVIF、HEIC等，其中WebP、AVIF、HEIC等高压缩率图像格式可以显着减小图像尺寸。但由于不同的浏览器对高压缩格式的支持不同，所以应用时需要考虑图像加载环境。三种高压缩率格式在Web端的兼容性如下：

1.WebP

2.AVIF

3.HEIC

APP端，对于不支持的图片格式，可以使用SDK软解码进行解码渲染。侧面的性能可以保证图像解码的耗时和流量节省能够取得很好的效益。在Web端，由于浏览器性能限制，内部性能测试表明，SDK软方案在整体图像耗时方面的优势并不明显，尤其是在多图场景下，因此格式自适应方案更适合在Web端网页端。即根据浏览器的支持情况加载相对最优的图像格式。

一个常见的方法是使用

标签实现格式适配，

该标签具有较好的兼容性，支持包含零个或多个元素以及一个元素为不同浏览器环境提供图像版本。浏览器将选择可以从上到下渲染的图像。如果没有匹配，则选择元素中的图片作为备份。该方案最初用于加载SDK，如下：

<picture> <source srcset="image1.webp" type="image/webp" /> <img src="image1.jpg" decoding="async" loading="lazy"/>picture>

但由于浏览器版本众多，实际应用中可能会出现很多意想不到的情况，例如：

为了保证图片加载的成功率，实际应用中不能直接使用。

Tag，加载SDK目前使用格式检测+

解决这个问题的组合方法。同时，由于HEIC支持率太低，格式适配目前仅适配WebP和AVIF。同等质量下，WebP 相比 JPEG 可以缩小 30% 的图像尺寸，AVIF 在 WebP 的基础上可以缩小 20%。 %;

4.1.2 图像分辨率适配

分辨率适配是指客户端根据实际渲染的宽高获取对应分辨率的图像，从而减小图像尺寸。常见的做法是我们可以使用HTML中的原生属性来定义图像集以及每个图像的应用场景。它由以下三部分组成：

定义了一组媒体条件，例如屏幕宽度。并指定媒体条件为真时的最佳图像尺寸。每个条件由以下三部分组成：

可以是

标签和属性结合起来实现格式和分辨率适配，如下：

<picture> <source srcset="image1.webp 200w, image2.webp 600w" sizes="100vw" type="image/webp" /> <img srcset="image1.jpg 200w, image2.jpg 600w" sizes="100vw" decoding="async" loading="lazy" />picture>

但在实际操作中我们会遇到一些问题，比如：

在实际应用中，有些情况下，图像渲染尺寸或者图像所在区域的尺寸是可以预先知道的。结合内置的几种布局方式和设备像素密度等信息，可以内部加载SDK来分析并选择当前模块最佳的渲染方式。最佳分辨率。

4.1.3 图像稳定性布局

Web端通常基于CLS（ ）指标来衡量页面布局的视觉稳定性。当可见元素的位置在页面生命周期中发生变化时，就会发生布局偏移。

造成布局偏移的因素有很多（如动态插入元素、加载），而尺寸不合适的图片是影响CLS指标的重要因素之一。例如，下面的两个页面中，右侧指定了图像宽度和高度的页面比左侧未指定图像宽度和高度的页面更稳定。

受next/启发，加载SDK内置了四种稳定布局方法：、、、fill，通过生成稳定的dom结构，提高视觉稳定性，减少业务开发量。效果如下：

4.1.4 图片延迟加载

图片延迟加载最简单的方法是基于原生属性“lazy”，但在实际应用中也发现了两个问题：

因此，SDK内部基于API实现，相对可控性更强，可以设置延迟加载的距离、目标元素等属性。

4.2 数据监控

数据监控的总体环节是：

监控全局Load和事件，过滤掉属于图片的部分；

基于对图片资源加载情况的监控，事件回调可以获取图片加载时间相关的指标，如DNS、TCP、SSL、请求、下载各阶段所花费的时间。基于该API也可以监控CSS中图片资源的加载情况；

对于图像格式、状态码、图像质量得分等信息，依赖于仅获取资源的方法。因此，在资源加载完成后，再检索本地缓存中的信息，同时避免并发请求影响其他类型的HTTP请求。 ，SDK会根据采样率、当前请求量等信息，读取空闲时需要上报的图片的缓存；

整合所有原始数据，按照采样率上报给数据服务，数据服务对原始数据进行清洗；

经过后端服务处理后，最终可以在质量监控仪表盘上查看。具体支持的指标和维度如下图所示：

一个。下游网络监控

b.客户状态监控

5. 解决方案演进

该解决方案致力于为Web场景提供极致的图片加载体验，同时也不断提升稳定性和场景覆盖率。

5.1 较低的错误率

如上所述，在某些浏览器下，会出现部分WebP和AVIF图像加载失败的情况。监测到此类场景后，通过加载基于格式检测的SDK，在保证性能的同时，以最低的成本解决了此类问题。

例如：iOS 14.3 & 14.4下的浏览器无法加载部分WebP，并且

该标签不检测 WebP 支持。它接受所有传入的 WebP 格式，并且 SDK 无法检测所有传入的图像。因此，只能在业务镜像加载之前构建特定的镜像。检测一下就可以避免这个问题，如下：

const checkWebP = () => { const pro: Promise<boolean> = new Promise<boolean>((resolve) => { if(typeof window === 'undefined') resolve(false); if (window['__support_webp__'] !== undefined) { resolve(!!window['__support_webp__']); } else { const img = new Image(); img.onload = () => { window['__support_webp__'] = true; resolve(true); }; img.onerror = () => { window['__support_webp__'] = false; resolve(false); }; img.src = 'error image'; } }); return pro;};