【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

图片流量节省大杀器:基于 CDN 的 sharpP 自适应图片技术实践

  • 2019-08-22
  • 本文字数:3154 字

    阅读完需:约 10 分钟

图片流量节省大杀器:基于CDN的sharpP自适应图片技术实践

目前移动端运营素材大部分依赖图片,基于对图片流量更少,渲染速度更快的诉求,我们推动 CDN,X5 内核,即通产品部共同推出了一套业务透明,无痛接入的 CDN 图片优化方案:基于 CDN 的 sharpP 自适应图片无痛接入方案。据统计效果可在原图基础上节省 60%-75%的流量,比之前 webP 无痛接入方案效果提升 40%-50%,减少流量的同时提高页面渲染速度,提升用户体验。

效果数据

目前手 Q 增值业务:VIP 中心、游戏中心、动漫、游戏公会、特别关心 以及增值渠道的 QQ 钱包,空间的个性化商城已经接入 sharpP 自适应,优化效果数据:



sharpP 自适应方案在原有 webP 自适应方案效果提升 40%-50%,提升效果主要来自 sharpP 高于 webP 的编码压缩率,同时能优化到 webP 无法覆盖的 png 图片(备注:之前 webP 无痛方案只实现了 jpg 的支持),sharpP 方案和原图对比可以节省 60%-75%的流量。


以我们的 VIP 中心为例,之前 webP 方案:



上 sharpP 方案后



在图片增加的情况下 图片流量减少了近 100K,页面速度也有提升,并且 sharpP 图片的效果也经过设计同学的验证,肉眼几乎无法区分,图片质量参数细节后面会介绍。

方案概述

利用自建 CDN 结点的缓存,以及带请求头的回源能力做到同一个 URL 根据终端分辨率,以及是否支持 sharpP 解码,按需返回不同的原图副本,做到图片资源的最合理利用:


手 Q X5 内核支持 sharpP 图片的解码,请求图片时会带上 accept: image/sharpp 标识,User-Agent 中会加上手机的分辨率 Pixel 参数,CDN 节点收到请求后,先检查如果有对应的 sharpP 自适应副本直接返回,如果没有则将请求回源到 CDN 源站,源站会根据请求的 User-Agent、Accept 参数返回对应分辨率的 sharpP 图片副本(原图上传后,或第一个用户请求触发 CDN 源站服务器图片转换,生成不同尺寸的 sharpP 图片), 如果请求头没有 sharpP 标识,则按原有逻辑返回原图,不影响业务。



整套优化方案接入对基于 X5 内核的 H5 业务完全透明,无需改动代码,即可让页面的图片获得可观的图片专项优化效果;app 业务接入,音视频有提供 sharpP 解码的 sdk 的接入。

方案详解

1、何为 sharpP

sharpP 是腾讯公司 SNG 即通产品部音视频技术中心推出的一种图片压缩组件,现已支持 iOS、Android、Windows、Linux 四个平台。编码压缩率、编码耗时、解码耗时相比 webP 有明显的优势。

2、CDN sharpP 方案

在原有 webP 自适应无痛方案基础上,我们联合终端、CDN 进一步升级优化,做了如下优化改造:


终端支持:增值业务大部分是基于手 Q webview 的 hybird 应用,安卓平台基于 X5 内核,X5 内核于 2.1.1 版本开始引入了 sharpP 组件,支持 sharpP 解码,并约定支持 sharpP 的版本发起的请求会在 http 请求的头部带上 Accept: image/sharpp 字段,同时 X5 内核 UA 中会带上终端分辨率 Pixel 字段,iOS 平台由于系统对 webview 内核的限制,暂时无法很好的嵌入 sharpP 组件,未能支持 sharpP 解码。未来可以在原生 app 引入 sharpP 组件,原生请求带上 Accept:image/sharpp,就可以使用到 CDN 的 sharpP 能力。


CDN 侧改造:CDN 源站转换工具集成了 sharpP 组件,CDN 的 OC 结点新增支持 sharpP 副本的缓存,整体流程大致如下:



客户端发起请求后,OC 结点根据请求 UA 检查 Accept 字段是否带有 image/sharpp,并获取 Pixel 分辨率信息,OC 结点判断是否有满足要求的原图副本缓存,没有缓存则将 URL+请求头回源,源站识别请求头中的信息,返回图片对应的 sharpP 副本,OC 结点缓存下来。源站图片如果未转换完成(图片上传后或第一次请求触发 CDN 源站异步转换),源站会先返回原图,max-age=10,让 OC 结点暂时不缓存,再次请求时,判断转换完成才返回 sharpP 图片并设置默认的缓存时间 max-age=25920000。


目前 CDN sharpP 已支持了我们 BGtop5 流量的域名:

imgcache . gtimg . cn、i . gtimg . cn、imgcache . qq . com、qzonestyle . gtimg . cn、qzs . qq . com


整体方案:结合之前我们做的自适应、webP 方案,与 sharpP 可以完全兼容,在 CDN 源站是 3 项单独的配置,可以按需配合或单独使用,整体方案如下图



优先判断是否有自适应,然后检查 sharpP,如果 sharpP 和 webP 都支持优先返回 sharpP。

3、项目中踩过的坑

1)运营商内容劫持,由于同一个 URL 可能返回不同的内容(不同分辨率的 sharpP/原图) 线上观察发现联通运营商会在请求到我们自建 CDN 结点之前加一层缓存,默认会按 URL 来缓存内容,其实就是内容劫持,导致不同请求头,返回错乱与我们期望的不一致,后面找到一种解决方法,基于 http 协议的 vary 字段,CDN 源站以及 CDN 结点返回内容的时候带上 Vary:User-Agent,Accept 字段,告诉运营商的缓存服务器根据请求的 Accept+User-Agent+Url 来缓存内容,经验证可以解决问题。


2)质量参数设置,尽可能保证图片压缩的更小,效果与原图差距不大


sharpP 采用有损压缩,转换工具会读取原图质量参数,适当降低:如果原图质量参数低于 75 则保持原质量参数直接转 sharpP,如果质量参数高于 75,则在原图基础上降低一些质量参数,根据业务要求自行设置,目前根据观察质量参数不低于 75 的 sharpP 图片基本肉眼无法区分。


3)新的业务开启 sharpP 自适应,源站图片转换导致磁盘 IO 压力过大


用脚本凌晨闲时对存量图片预转换生成各尺寸的副本;转换工具监听图片目录的新增文件,用户上传后就做转换;转换脚本做了优化,只有第一次请求触发转换。


4)sharpP 转换工具对某些图片转换失败,生成空文件


捕获转换失败错误码,空文件用原图替换,避免返回给结点空文件


5)有时候业务图片需要强制使用原图


支持 nosharpp 参数,url 带上参数后,CDN 强制返回原图。


6)图片缓存清理


由于一个图片 URL,对应了多份 CDN 结点缓存副本,如果图片更新的时候,可能有个别副本缓存刷新不及时,导致不同分辨率、sharpP、原图的用户看到的图片不一致,需要优化 CDN 缓存刷新工具,支持一次清理所有缓存副本。


以上皆为项目推进中遇到的问题,未考虑周全可能就会影响功能,线上实施前得在测试结点充分验证,结点部署要控制节奏,并且要有完善的线上监控机制,以及功能回退的能力。

4、图片检测监控

1、为了提高接入效率,减少人工验证步骤,我们开发了图片检测监控工具,定时监控业务页面图片在各 OC 结点返回是否正常。原理:工具根据业务 URL,抓取页面内所有 CDN 域名的图片,随机抽取一部分 OC 结点,构造 sharpP,webP,原图 3 种请求,根据返回的图片格式,大小对比验证图片是否正常。


2、现网图片加载数据上报:为了监控更多用户的图片加载真实数据,我们在业务中接入了图片加载上报组件,原理是利用 X5 内核收集的资源加载信息,过滤出图片信息,上报图片类型,返回码,加载耗时,网络类型等。

5、sharpP 开启验证

上传一张新图片,使用手 Q 安卓版本访问已支持 sharpP 域名的 CDN 图片,如果请求带了 Accept:image/sharpp,检查返回图片格式是否为 sharpP





如果旧的图片未按预期返回,返回了 webP 或原图可能是 OC 结点缓存,正常 3 天后过期回源则会返回 sharpP 图片。

未来规划

1、app 业务接入 sharpP 优化方案目前只有安卓平台基于 X5 内核的应用能得到这套 CDN sharpP 方案的优化效果,根据 CDN 日志的流量统计 BG 内最大的流量还是来自终端发起的请求,后续我们计划联合 CDN 大流量的终端业务接入 sharpP 解码组件,让这套方案能给更多业务带来收益,同时也为公司和用户节省流量成本。


2、sharpP 工具优化 sharpP 组件在不断优化,包括转码效率、成功率,gif 格式支持等,CDN 转换工具也将迭代支持。


作者介绍:


陈忱,腾讯工程师,13 年毕业加入腾讯,从事过研发流程平台工具开发,现负责手 Q VIP 中心,喜欢研究新技术,专注于前端性能优化。


本文转载自公众号小时光茶舍(ID:gh_7322a0f167b5)。


原文链接:


https://mp.weixin.qq.com/s/sj27FHBsjZkUPJxcDdY86Q


2019-08-22 16:175133

评论

发布
暂无评论
发现更多内容

Spring中事务嵌套使用一定得警惕这个问题了!

Java你猿哥

spring SSM框架 spring cloud

MySQL 移动数据目录后启动失败

GreatSQL

不同编程语言的程序,能够被 ChatGPT 自动生成的可能性的一些思考

Jerry Wang

人工智能 神经网络 机器学习 深度学习 三周年连更

Orillusion荣获SegmentFault AIGC Hackathon 2023 线上黑客马拉松赛二等奖&最佳创意奖

Orillusion

开源 元宇宙 webgpu AIGC ChatGPT

长连接Netty服务内存泄漏,看我如何一步步捉“虫”解决 | 京东云技术团队

京东科技开发者

内存泄露 京东云 netty 企业号 4 月 PK 榜

Node工程的依赖包管理方式 | 京东云技术团队

京东科技开发者

JavaScript node.js 前端 京东云 企业号 4 月 PK 榜

使用 buildx 构建跨平台镜像

江湖十年

Docker docker build Docker 镜像

SpringBoot之如何实现热部署|超级详细,建议收藏

bug菌

Spring Boot 热部署 三周年连更

Image Search-这是你的图像搜索

六月的雨在InfoQ

OSS 图像搜索 三周年连更 Image Search

跨平台应用开发进阶(五十四):Android APP调试工具:ADB

No Silver Bullet

android adb 跨平台应用开发 三周年连更 APP调试工具

一文读懂Redis哨兵

京茶吉鹿

数据库 nosql redis哨兵

eBPF的发展演进---从石器时代到成为神(一)

统信软件

Linux 内核 Linux内核

CDP实操篇03:自检清单,您的企业适合实施CDP吗?

游读分享

开放原子全球开源峰会,全面升级再出发!

开放原子开源基金会

开源 软件 创新 峰会 全球

京东小程序接入ARVR的技术方案和性能调优 | 京东云技术团队

京东科技开发者

小程序 人脸识别 京东云 企业号 4 月 PK 榜 ARVR

算法题每日一练:全排列

知心宝贝

数据结构 算法 前端 后端 三周年连更

为什么说得帆的CRM是低代码PaaS赛道最好的CRM?

得帆信息

低代码 CRM 低代码平台

玩转Redis|学会这10点让你分分钟拿下Redis,满足你的一切疑问

浅羽技术

Java 数据库 redis 缓存 三周年连更

太强了,全面解析缓存应用经典问题

架构精进之路

缓存 后端 Redis 核心技术与实战 三周年连更

Unity 之 超级实用的小技巧

陈言必行

Unity 三周年连更

ArkCompiler开发

坚果

OpenHarmony 三周年连更

全栈开发实战|​电子商务平台的设计与实现(Spring Boot + MyBatis + Thymeleaf)

TiAmo

Spring Boot mybatis thymeleaf 全栈开发 三周年连更

App复杂动画实现——Rive保姆级教程 | 京东云技术团队

京东科技开发者

京东云 企业号 4 月 PK 榜 rive

使用MASA全家桶从零开始搭建IoT平台(一)环境准备

MASA技术团队

.net IoT MASA

「Go框架」深入理解gin框中Context的Request和Writer对象

Go学堂

golang 开源 程序员 个人提升

财联社专访 | 澜舟科技周明:大模型的落地场景是关键,B端市场是应用富矿

澜舟孟子开源社区

大模型 认知智能 AIGC 澜舟科技

视频剪辑调色:达芬奇DaVinci Resolve Studio 18 Mac版

真大的脸盆

Mac 视频剪辑 Mac 软件 视频调色 视频剪辑调色软件

“烧钱”的大模型:初探成本拆解与推理优化方法

Baihai IDP

人工智能 深度学习 大模型 LLM 企业号 4 月 PK 榜

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

肥晨

js 特效 三周年连更

【Linux】iptables之防火墙的应用及案例、策略、备份与还原(2)

A-刘晨阳

Linux iptables 防火墙规则 三周年连更

ShareSDK第三方平台注册指南

MobTech袤博科技

图片流量节省大杀器:基于CDN的sharpP自适应图片技术实践_大前端_陈忱_InfoQ精选文章