图片
方案架构.png
如图所示，图片加载部分支持分辨率、格式自适应以及懒加载、稳定性布局等特性，其中涉及到图片处理部分基于火山引擎veImageX 服务实现，如图片转码、缩放、压缩等。SDK 侧生成当前环境下最佳的图片格式和分辨率，从服务获取相应的图片 URL，借助云端处理能力在运行时动态生成所需的图片。
数据监控部分可分为加载耗时监控、图片详情监控、画质评估、大图监控、云控配置几部分，监控 SDK 收集相关数据，根据云端下发的配置上报数据，火山引擎veImageX 服务对数据做清洗后可在控制台侧查看数据大盘。
常见的图片格式有 PNG、JPEG、GIF、WebP、AVIF、HEIC 等，其中 WebP、AVIF、HEIC 等高压缩率图片格式可显著减小图片体积。但由于不同浏览器对高压缩率格式的支持情况不同，因此在应用时需要考虑图片加载的环境。三种高压缩率格式在 Web 侧的兼容性如下：
图片
图片
图片
在 APP 端，对于不支持的图片格式可采用 SDK 软解的方式进行解码、渲染，Native 侧的性能可保证图片解码的耗时和流量的节省都能有不错的收益。在 Web 侧，由于浏览器性能限制，veImageX 内部性能测试表明，SDK 软解在图片整体耗时方面的收益并不明显，尤其是多图场景下，因此在 Web 侧更适合走格式自适应的方案，即根据浏览器的支持性加载相对最优的图片格式。
常见的做法是采用标签以实现格式的自适应，标签有相对不错的兼容性，支持包含零或多个元素和一个 元素来为不同的浏览器环境提供图片版本，浏览器会自上而下选择可以被渲染的图片，若没有匹配的，则选择 元素当中的图片作为兜底。加载 SDK 最初也采用了该方案，如下：
<picture> <source srcset="image1.webp" type="image/webp" /> <img src="image1.jpg" decoding="async" loading="lazy"/></picture>但由于浏览器版本众多，在实际应用中，可能会出现很多预期以外的情况，比如：
为了保证图片加载成功率，因此在实际应用中无法直接使用标签，加载 SDK 目前采用格式探测 +相结合的方式来解决该问题。同时，由于 HEIC 支持率太低，格式自适应目前只做了 WebP 和 AVIF 的自适应，同等质量下，WebP 相比 JPEG 可减少 30% 的图片体积，AVIF 则可在 WebP 的基础上再减少 20%；
分辨率自适应指的是客户端根据实际渲染的宽高获取相应分辨率的图片，从而减小图片体积。常见的做法是我们可以借助 HTML 中原生的 srcset 属性来定义图像集，以及每个图像应用的场景。由以下三部分组成：
window.devicePixelRatio可查询显示器像素密度sizes 则定义了一组媒体条件，比如：屏幕宽度。并且指明当媒体条件为真时最佳的图片尺寸。每个条件由以下三部分组成：
max-width:480px，表示可视窗口的宽度不超过480像素时可以将标签和 srcset 属性相结合，实现格式和分辨率的自适应，如下：
<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 内部可以分析并选择出当前模块渲染的最佳分辨率。
Web 侧通常基于 CLS（Cumulative Layout Shift，累积布局偏移）指标用于衡量页面布局的视觉稳定性。当可见元素的位置在页面生命周期内发生了变化时，就会产生布局偏移。
导致布局偏移的因素有很多（如：动态插入元素、iframe加载），无尺寸的图片是影响 CLS 指标的重要因素之一。例如下面两个页面中，右侧指定了图片宽高的页面要比左侧没有指定图片宽高的页面稳定性更好。
图片
数据监控.png
数据监控的整体链路为：
图片
图片
方案致力于为 Web 场景提供极致的图片加载体验，同时在稳定性和场景覆盖上也在不断提升。
上面提到在某些浏览器下会存在部分 WebP、AVIF 图片加载失败的场景，在监控到此类场景后加载 SDK 基于格式探测的方式最低成本的解决了此类问题，同时保证了性能。
例如：在 iOS 14.3 & 14.4 版本下的 Safari 浏览器加载部分的 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;};目前方案支持了 React、Vue2、Vue3 以及小程序，为了保证体验的一致性、降低维护成本，加载 SDK 做了分层的设计，将核心的 Core 层抽离出来给到各个框架使用，并对各项能力做了插件化。
场景覆盖.png
随着方案的迭代，我们也在尝试覆盖更多的业务场景，比如：加密图渲染、Hybrid HEIC 渲染等，火山引擎veImageX 希望给客户带来全面、稳定、流畅的图片体验，同时给业务带来极致的成本收益。
我们将如上能力封装成简单的webSDK，向行业输出，并可以免费获取和使用此SDK，更高级的能力也可以配合veImageX来使用；
本文链接：http://www.28at.com/showinfo-26-12676-0.htmlveImageX 演进之路：Web 图片加载提速50%
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 图形编辑器开发：属性显示与格式转换
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号