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

这篇具有很好参考价值的文章主要介绍了数据万象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.  创建和绑定存储桶

数据万象AVIF图片压缩 - 小程序省流量利器,小程序,数据万象,图片压缩,AVIF,智能存储

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

二. 操作步骤

1.  前往对象存储控制台开启自定义 CDN 加速域名,可参考文档:https://cloud.tencent.com/document/product/436/18670

2.  开启图片自适应压缩功能

系统会根据 accept 请求头与原图片格式自动判断终端是否支持对应的图片压缩格式,若支持则进行实时压缩,若全都不支持则返回原图。建议开启 WebP 和 AVIF 格式,若终端支持 AVIF 图片格式,则优先加载 AVIF 图片;如不支持则会自动加载 WebP 图片格式;如两者都不支持,则自动加载原图,以适应图片在不同终端上的显示,有效解决了兼容性问题。

数据万象AVIF图片压缩 - 小程序省流量利器,小程序,数据万象,图片压缩,AVIF,智能存储

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

数据万象AVIF图片压缩 - 小程序省流量利器,小程序,数据万象,图片压缩,AVIF,智能存储

3.  小程序加载图片

使用使用 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图片压缩 - 小程序省流量利器,小程序,数据万象,图片压缩,AVIF,智能存储

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

数据万象AVIF图片压缩 - 小程序省流量利器,小程序,数据万象,图片压缩,AVIF,智能存储

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

总结

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

到了这里,关于数据万象AVIF图片压缩 - 小程序省流量利器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序图片上传压缩

    上传图片是小程序常见的功能,例如点评类小程序邀请用户分享照片、电商类小程序要求商家上传商品照片。 伴随着照片像素越来越高,图片体积越来越大,小程序开发者需要压缩图片,否则将导致用户上传图片失败或加载时间过长等影响体验的情况。 小程序提供 wx.choose

    2024年02月10日
    浏览(43)
  • 图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)

    一、浏览器网页展示图片方法 1.1、HTML img 标签 img 标签常用属性 序号 属性 描述 1 src 用于指定图片的 URL 或路径。 2 alt 用于当图片无法展示时显示的替代文本,seo优化时要注意添加这个属性。 3 width/height 用于指定图片展示的宽度和高度。如果只指定其中一个值,那么另一个

    2024年02月11日
    浏览(67)
  • 微信小程序上传图片压缩方案

    小程序上传图片需要进行压缩,可以使用wx.getFileSystemManager()方法将图片转换成base64格式,再使用canvas将图片压缩成指定大小。 首先使用wx.chooseImage()方法选择了一张图片,然后使用wx.getFileSystemManager()方法将图片转换成base64格式。接着使用canvas进行压缩,并将canvas转换成图片

    2024年02月11日
    浏览(67)
  • 微信小程序中进行图片压缩

    微信小程序中进行图片压缩 问题: 首先在需要进行图片压缩的内容的wxml上,进行使用画布,这画布不能够出现在屏幕上 之后在js中进行内容压缩,重复压缩直至压缩到想要的大小

    2024年02月15日
    浏览(69)
  • uniapp图片上传与压缩,兼容小程序与H5

    图片上传借助了Uview2.0的组件 压缩代码

    2024年02月13日
    浏览(42)
  • uniapp 上传压缩图片 兼容h5和小程序的方法

    项目是用uniapp开发的,当时只是做App端,后来项目扩展到H5端, uniapp框架可以跨平台所以移动端和H5使用的是一套代码 上传头像的时候要求图片的大小在2MB一下,所以要压缩图片,App端当时使用的是uni.compressImage(OBJECT)压缩的(详情见:https://uniapp.dcloud.net.cn/api/media/image.html#

    2024年04月17日
    浏览(36)
  • 微信小程序uniapp中的图片上传,压缩,预览,删除

    页面部分 1:图片上传 2:图片压缩 3:图片预览 4:图片删除

    2024年02月11日
    浏览(65)
  • 流量控制与熔断利器:Sentinel介绍

    这是《百图解码支付系统设计与实现》专栏系列文章中的第(19)篇,也是流量控制系列的第(6)篇。点击上方关注,深入了解支付系统的方方面面。 本篇聊聊流量控制与熔断利器Sentinel,背后的原理,适用的场景及存在的不足。不涉及具体的配置,具体配置请参考官方文档

    2024年01月21日
    浏览(44)
  • 探索创新:LLAMA Index - 一个智能数据分析利器

    项目地址:https://gitcode.com/run-llama/llama_index LLAMA Index 是一款强大的数据预处理和分析工具,旨在简化大数据处理过程,帮助数据科学家、分析师及开发者更高效地探索和理解数据。该项目基于Python构建,利用先进的机器学习算法,提供了一套自动化的工作流程,让用户可以轻松

    2024年04月14日
    浏览(40)
  • Linux 网络流量监控利器 iftop命令详解及实战

    简介 iftop 是什么 在 Linux 系统下即时监控服务器的网络带宽使用情况,有很多工具,比如 iptraf、nethogs 等等,但是推荐使用小巧但功能很强大的 iftop 工具。 iftop 是 Linux 系统一个免费的网卡实时流量监控工具,类似于 top 命令。iftop 可以监控指定网卡的实时流量、端口连接信

    2024年02月03日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包