首页 > 编程语言 >数据万象AVIF图片压缩 - 小程序省流量利器

数据万象AVIF图片压缩 - 小程序省流量利器

时间:2023-07-04 16:24:49浏览次数:111  
标签:AVIF 图片格式 利器 万象 格式 压缩 图片

导语

微信小程序因其便捷的开发环境和天然的微信生态,使得越来越多企业平台通过小程序建立自己的业务。在小程序上使用图片非常广泛,但传统格式图片(如 JPG/PNG)占用空间大,加载速度慢,可能导致昂贵的图片流量支出。近年来,AVIF 图片以高压缩率、优良画质成为省流量的新选择。本文将介绍如何通过数据万象(CI,Cloud Infinite)的图片压缩能力,解决使用 AVIF 图片的疑虑,助力快速升级小程序,节省图片流量。

AVIF 简介

AVIF 是一种基于 AV1 编解码器的图片格式,相对于 JPEG、WEBP 等图片格式来说,它具有更小的文件尺寸,更快的加载速度和更高的图像质量。AVIF 格式图片能够提升用户使用体验,同时减少加载时间和流量消耗,其高质量的图像效果更是令人赞叹。因此,越来越多的网站和应用开始使用 AVIF 格式图片。但使用 AVIF 图片过程中可能会面临如下问题:

  1. 格式转换问题
    目前转换 AVIF 图片格式一般是通过在线转换工具或者 node 工具包实现,但是通常会面临转换效果不佳、门槛较高的问题;
  2. 兼容性问题
    AVIF 作为一种新的图片格式,许多设备可能无法支持,它的兼容性是大家比较担心的问题,目前仅在 iOS16、Android12 上得到原生支持。
  3. 业务如何快速接入
    现有业务中图片可能基本上都是 JPG/PNG 格式,难道还需要自己手动全转为 AVIF 格式吗?
    有了数据万象,以上问题就无需再担心了!接下来让我们一起看看,数据万象如何通过其强大的图片压缩能力,解决使用 AVIF 图片的困惑!

数据万象AVIF图片压缩

数据万象提供 AVIF 图片压缩能力,采用在线压缩的方式,无需改造已有业务模式,大幅降低分发流量成本,使用时只需要在已有的图片链接后,增加压缩参数,即可将图片压缩成对应格式的图片,格式转化接入方便,改造成本低。
此外还提供了图片自适应压缩配置能力,在 AVIF 图片压缩的基础上,解决前端兼容问题,适应图片在不同终端上的显示,根据终端能力展示最优图片格式,无需业务代码修改,无需考虑新旧版本、各类终端差异,提供一站式图片压缩服务。

一. 准备工作

  1. 登录数据万象控制台,并开通数据万象服务
    访问链接:https://console.cloud.tencent.com/ci

  2. 创建和绑定存储桶

  3. 将待压缩的图片上传至存储桶中。可通过控制台上传,也可以通过sdk上传。

二. 操作步骤

  1. 前往对象存储控制台开启自定义 CDN 加速域名,可参考文档:https://cloud.tencent.com/document/product/436/18670
  2. 开启图片自适应压缩功能
    系统会根据 accept 请求头与原图片格式自动判断终端是否支持对应的图片压缩格式,若支持则进行实时压缩,若全都不支持则返回原图。建议开启 WebP 和 AVIF 格式,若终端支持 AVIF 图片格式,则优先加载 AVIF 图片;如不支持则会自动加载 WebP 图片格式;如两者都不支持,则自动加载原图,以适应图片在不同终端上的显示,有效解决了兼容性问题。

开启了AVIF和Webp压缩配置后,在不同情况下访问得到的图片格式情况如下表所示:

  1. 小程序加载图片
    使用使用 CDN 分发图片,图片链接结构形式为:< CDN 域名>/<对象键>。假设 CDN 域名为:https://www.cdndomain.com,对象键为:test.png,则图片的访问链接为:https://www.cdndomain.com/test.png。

<imagemode="aspectFit" src="https://www.cdndomain.com/test.png"></image>

三. 预览效果

以示例图片为例,下表展示了 AVIF 图片和 WebP 图片的压缩率。

经过上述步骤,无需改造现有的业务模式,无需担心 AVIF 图片格式的兼容性问题,即可在小程序上使用 AVIF 图片压缩,轻松实现节省小程序图片流量。

总结

AVIF 图片能在保持高压缩率的同时,也能很好的保留图片的细节。如果对图片大小和质量有很高的要求,想为业务节省图片流量,提高小程序的品质和用户体验,需要在小程序中使用 AVIF 图片,那么数据万象是一个不错的选择,它既提供了简单便捷的 AVIF 图片格式转换方式,也很好的解决了 AVIF 图片的兼容问题。

标签:AVIF,图片格式,利器,万象,格式,压缩,图片
From: https://www.cnblogs.com/cloudstorageangel/p/17526038.html

相关文章

  • Android各组件/控件间通信利器之EventBus
    来源:https://www.cnblogs.com/lwbqqyumidi/p/4041455.html一、build.gradle中dependencies节增加配置api'org.greenrobot:eventbus:3.0.0'二、注册EventBus,一般放到onCreate里面,代码:EventBus.getDefault().register(this);三、注册与解绑一般都是成对出现,代码:/***解绑Ev......
  • 提升性能的利器:深入解析SectionReader
    一.简介本文将介绍Go语言中的SectionReader,包括SectionReader的基本使用方法、实现原理、使用注意事项。从而能够在合适的场景下,更好得使用SectionReader类型,提升程序的性能。二.问题引入这里我们需要实现一个基本的HTTP文件服务器功能,可以处理客户端的HTTP请求来读取指......
  • 产品质量管理利器,华为云发布CodeArts Defect缺陷管理服务
    美国管理学家彼得曾经说过,“决定水桶盛水量多少的关键因素不是其最长的板块,而是其最短的板块”。在整个产品生命周期中,决定产品长盛不衰的关键往往不是其强大的功能特性,而是对产品缺陷的管理能力。若缺陷管理不善,轻则影响企业声誉与销量,重则带来灾难性的后果。那么,优秀的缺陷管理实......
  • 大语言模型的开发利器langchain
    目录简介什么是langchainlangchain的安装langchain快速使用构建应用聊天模式Prompt的模板ChainsAgentsMemory总结简介最近随着chatgpt的兴起,人工智能和大语言模型又再次进入了人们的视野,不同的是这一次像是来真的,各大公司都在拼命投入,希望能在未来的AI赛道上占有一席之地。因为A......
  • ModifyAjaxResponse,修改ajax请求返回值,前后端调试之利器
    一、概要先看图 京豆多的离谱,你的第一想法肯定是:按F12修改了网页元素没那么简单,你看支持刷新的  肯定还是假的,通过Fiddler或Wireshark等抓包工具修改了响应包;或者干脆改了本地host文件,指向了一个自己写的页面......这些都太麻烦了,如果能在当前网页上拦截这个请求,......
  • 防关联指纹浏览器:保护用户隐私的利器
    防关联指纹浏览器是一种通过采用一系列技术手段,使用户的浏览行为和身份得到有效隐匿的浏览器。它的目标是减少网站和第三方跟踪器通过指纹识别技术收集和关联用户数据的能力。与传统浏览器相比,防关联指纹浏览器具有以下特点。首先,防关联指纹浏览器采用了多种隐私保护技术。其中包括......
  • 自我管理型团队:企业组织力提升利器
    近年来,软件项目的规模和复杂性在以前所未有的速度增长。因此,快速响应需求变化已经成为互联网行业的常态。在这样的环境下,软件产品的快速开发和迭代对于公司迅速占领市场、抢占商机来说具有至关重要的意义。所以,越来越多的研发团队和企业已经开始重视并使用敏捷开发模式,而自我管理......
  • 深入理解Spring Boot:简化Java应用开发的利器
    这篇文章主要介绍了SpringBoot的理论知识和核心概念。【摘要】SpringBoot是一个用于简化Java应用开发的框架,通过提供自动化配置和约定优于配置的原则,使得开发人员可以快速构建独立、可执行的、生产级别的应用程序。本文将深入探讨SpringBoot的核心理论和关键概念,帮助读者更好......
  • 【flutter 起步走】flutter共享数据利器,InheritedWidget原理探秘
    知其然,也要知其所以然。最近的搬砖工作中,开发ui页面都是使用flutter,android原生只沦为了后台逻辑处理的后盾。在搬砖过程中,往往只要知道怎么用,便能搭起小房子,而要建的恢弘又大气,还是少不了对于原理的学习。在接触flutter中,Widget是我们接触最多的类。我们对于各种界面的搭建用的就......
  • Socks5代理:加强网络安全与保护IP隐私的利器
    在数字化时代,网络安全和个人隐私保护变得至关重要。随着互联网的普及,人们越来越依赖网络进行各种活动,包括在线购物、社交媒体互动、银行交易等。然而,这种连接性也带来了一系列的安全威胁和隐私风险。为了解决这些问题,技术界提出了许多解决方案之一就是Socks5代理。本文将介绍Socks5......