veImageX 演进之路：Web 图片加载提速50%

背景说明

火山引擎veImageX演进之路主要介绍了veImageX在字节内部从2012年随着字节成长过程中逐步演进的过程，演进中包括V1、V2、V3版本并最终面向行业输出；整个演进过程中包括服务端、客户端、网络库、业务场景与优化等多个角度介绍在图像处理压缩、省成本与体验优化的经验与方案；

本篇文章重点介绍在web端演进和提供的能力，图片是 Web 站点中的重要元素，图片体积、格式、分辨率以及渲染方式对用户体验有着显著影响。火山引擎veImageX 为业务提供了灵活、高效的一站式图片解决方案和静态素材托管方案，涵盖了上传、存储、处理、分发、评估等图片生产和消费阶段的全部链路。

解决的问题

Web 场景下图片的应用非常广泛，从传统的图文到视频封面都有图片的身影，图片体验是用户体验中很重要的一环，常用于衡量站点性能的 LCP 和 CLS 指标都把图片列为最重要的元素之一。随着业务的发展，用户量增长的同时也带来了 CDN 带宽成本的快速提升，最主要的元素则是图片和视频。因此，方案从体验和成本出发，旨在为用户提升体验的同时降低带宽成本。

用户体验可视化

图片体验问题通常有以下几点：

• 加载速度慢：图片体积、网络、CDN、处理耗时等因素均会影响加载耗时；

• 加载失败率高：导致图片加载失败的因素很多，重点在于如何及时定位问题；

• 渲染体验差：包括图片区域长时间空白、加载后导致页面抖动、出错后无兜底等场景；

开发者往往忽视了图片体验，也不了解图片对站点性能的影响，并且缺少可量化的数据来衡量站点的图片体验。参考 Lighthouse 性能优化指南，方案整合了图片压缩、图片懒加载、图片稳定性布局、错误兜底等能力，并集成了数据监控能力，可结合 火山引擎veImageX 控制台实时大盘数据查看，为业务提供数据上报、数据分析、数据追踪、数据告警等全链路支持。

带宽成本问题

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

• 图片压缩率低；

• 图片原始分辨率和渲染分辨率不匹配；

• 采用传统的 PNG、JPEG 等低压缩率格式；

• 图片未进行懒加载；

除了图片压缩，方案支持了 WebP、AVIF 等高压缩率图片格式的自适应加载和图片分辨率的自适应加载，尽可能减小图片体积。同时集成了图片懒加载，避免不可见区域的图片加载，降低站点 CDN 成本，同时也提升站点整体加载速度。根据内部业务数据，图片传输带宽和图片加载耗时通常可降低 50% 以上。

方案架构

方案总体上可划分为图片加载和数据监控两个部分。

方案架构.png

如图所示，图片加载部分支持分辨率、格式自适应以及懒加载、稳定性布局等特性，其中涉及到图片处理部分基于火山引擎veImageX 服务实现，如图片转码、缩放、压缩等。SDK 侧生成当前环境下最佳的图片格式和分辨率，从服务获取相应的图片 URL，借助云端处理能力在运行时动态生成所需的图片。

数据监控部分可分为加载耗时监控、图片详情监控、画质评估、大图监控、云控配置几部分，监控 SDK 收集相关数据，根据云端下发的配置上报数据，火山引擎veImageX 服务对数据做清洗后可在控制台侧查看数据大盘。

模块详细介绍