COS数据处理WebP压缩 | 减少70%图像大小
当前网络中,图片仍是占用流量较大的一部分,在网站的视觉效果和加载速度之间,我们始终面临着两难选择。
一个网站的内容,不仅仅只有文字,图片、动图、视频等众多元素都在帮助用户从我们的网站获取更多的信息,当然,图片比起文字会消耗更多的网络资源,并且最令人担忧的是,它会增加网站的加载完成时间,影响用户体验。
为了在尽可能不影响图片质量的前提下压缩体积,谷歌公司在 2010 年提出了 WebP 格式。
有一些现实的问题摆在我们面前。
在互联网碎片化的大趋势下,相对于文字来说,大部分人会更愿意接受图片所传递的信息,因为看图总是那么的简单高效,我们不用花费那么多的脑细胞去咬文嚼字,然后还得加上自己的一丢丢想象力,才能勉强体会作者想要表达的意思,而看图片,会将这些信息直接灌输给我们的脑子,所有的信息都将会被传达。
问题也随之而来,当网站所展示的图片越多,加载速度则会越慢,这对于户外工作使用移动设备或者网络环境较差的用户来说则更为明显。
所以我们想尽办法去减少图片的体积,提升我们页面的速度,有时甚至会甘于冒着图片质量严重下降的风险,只是为了能够帮我们的用户节省一点带宽或者减少一点耗电量,但这种代价过于沉重,无论是对于搜索引擎还是用户来说,都太不友好了。在保证图片质量和网站速度之间,我们始终面临着两难选择。
WebP 格式
我们通常使用的图片格式有 JPG,JPEG 和 PNG,但现在,WebP 也逐渐发展成为大部分开发者乐于接受并使用的图片格式之一。如果你还没有听过 WebP,那也很正常,不可否认的是它现在仍然存在少部分浏览器的兼容性问题,但是就目前来说,谷歌,火狐,Edge 都已经支持了 WebP 格式。
使用 WebP 格式,可以将同等质量的 PNG 图片体积减少至 30%,而对比 GIF,WebP 则可以将体积减少约 30%,国外现在已经有取代 GIF 的趋势,这都还得从 WebP 的工作原理说起。
WebP 压缩方式使用帧内编码技术,并且基于像素块预测,帧内编码其实是一种视频压缩技术,像素块预测使用帧内相邻像素块的值进行预测,三个在上面,一个在左边,WebP 因此可以实现有损压缩,无损压缩,透明化和动图,并且体积还比 JPG,PNG 和 GIF 要小,优势不可谓不明显。
效果图
下面是使用 COS 数据处理的 WebP 压缩技术压缩 PNG 和 GIF 格式图像的效果对比图:
PNG 压缩为 WebP:图像体积减少 68.9%

GIF 压缩为 WebP:图像体积减少 67.14%

如图,WebP 图像压缩可以减少平均 70% 的图像大小,而且原图质量越高、越清晰,压缩收益率越大,一般压缩收益率在 35%-80%。
简单五步,得到 WebP 格式的图片
1、首先登录腾讯云对象存储:https://console.cloud.tencent.com/cos5

2、在存储桶列表中创建一个桶,然后进入桶内,并将提前准备好要进行转换的图片上传到桶中



3、等待上传完成后点击对象详情,点击复制临时链接




4、粘贴到浏览器,腾讯云 COS 数据处理通过 imageMogr2 接口提供格式转换,所以我们在 url 后面拼上参数 &imageMogr2/format/webp

5、然后访问,就可以得到 WebP 图片了
当然,你也可以直接体验功能:https://cloud.tencent.com/act/pro/cosExhibition

COS 数据处理文档链接:https://cloud.tencent.com/document/product/460/36543
使用 WebP 的好处显而易见,图片加载变快,网页也随之变快,即使图片体积较小,也不会影响视觉效果,我们可以添加更多的图片来引人入胜,传递更多的信息,从而提高用户体验,提高点击率,与之呼应的是,我们的页面在搜索引擎的排名也会越来越高,形成一个良好的循环。简简单单地在图片链接后面拼上参数 &imageMogr2/format/webp,仅仅是变换了一个小小的图片格式,就像是南美洲亚马逊河热带雨林中的一只蝴蝶扇动了几下翅膀,却能在美国德克萨斯州引起一场龙卷风。
COS数据处理WebP压缩 | 减少70%图像大小的更多相关文章
- 如何在 HTML 中调整图像大小?
了解在 HTML 中调整图像大小的不同技术.何时应避免在浏览器端调整大小,以及在 Web 上操作和提供图像的正确方法. 如果您的图像不适合布局,您可以在 HTML 中调整其大小.在 HTML 中调整图 ...
- 前端性能优化成神之路—资源合并与压缩减少HTTP请求
资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...
- C#中如何调整图像大小
在本篇文章中,我将介绍如何在C#中来调整你想要的图像大小.要实现这一目标,我们可以采取以下几个步骤: 1.首先要获取你想要调整大小的图像: string path = Server.MapPath(& ...
- [译]Android调整图像大小的一些方法
翻译自 某大神在Stack Overflow里的自问自答 (一般我们将Bitmap翻译为位图,但为了更好理解,在本文中我将它翻译成图像): 我们在开发的时候,经常需要从服务器中加载图像到客户端中,但有 ...
- LVM管理之减少LV的大小
LVM管理之减少LV的大小 规定动作 1.umount filesystem 2.e2fsck filesystem 3.resize2fs filesystem 4.lvredure 实例演示——— ...
- CSS 图像大小
CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...
- Matlab绘图基础——图形绘制的插值 以及 图像大小的重采样
使用说明:图形绘制时的插值 interp1 %1-D data interpolation interpft %使用fft算法插值 %将原数据x转换到频率域,再逆转换回来更密集的数据采样 ...
- AForge,Emgu.CV抓拍图像大小
原文:AForge,Emgu.CV抓拍图像大小 2017年,忙忙碌碌地过去了,象往年一样,依然没有时间上CSDN,博客园. 这一年是打工以来最辛苦的一年. 这一年用了不少自己没有接触过的东西.如人脸识 ...
- [RN] React Native 打包时 减少 Apk 的大小
React Native 打包时 减少 Apk 的大小 主要有两个方法: 在打包前设置 android\app\build.gradle 文件中 1) def enableProguardInRele ...
随机推荐
- linux操作系统可以ping通ssh连接长时间无响应
一.问题描述 某集群数据节点服务器频繁无法连接,服务器间出现可ping通但ssh无法连接的情况,使用带外地址登录后远程控制也无法显示正常界面,重启后会短暂恢复. 二.排查问题 重启服务器后检查服务器S ...
- Modbus 仿真测试工具 Mod_Rssim 详细图文教程
Mod_RSsim是一款轻量级的Modbus从机模拟器,它可以模拟ModBusTCP和ModBusRTU的从机,能够同时模拟254个被控站,软件使用简单方便,可以满足一般的主机调试. 官方网站:www ...
- ABP vNext 审计日志获取真实客户端IP
背景 在使用ABP vNext时,当需要记录审计日志时,我们按照https://docs.abp.io/zh-Hans/abp/latest/Audit-Logging配置即可开箱即用,然而在实际生产 ...
- redhat_快捷键和shell命令操作.md
tab键 命令自动补全 history !n 执行历史记录第n条 !! 执行上一条命令 !l 最后一条以l开头的命令 alias 创建命令的别名 alias 命令别名 = "命令行" ...
- NOIP初赛篇——06数制转换
进位计数制的基本概念 将数字符号按顺序排列成数位,并遵照某种由低到高的进位方式计数表示数值的方法,称作为计数制. 十进制 十进制计数制由0.1.2.3.4.5.6.7.8.9共10个数字符号组成. ...
- 服务器报错"您的主机中的软件中止了一个已建立的连接"
网上很多的说法都模棱两可,只是说和远程连接有关,这个说的太泛泛了. 我现在遇到的问题是java web出现的, 执行表单提交的时候出现该错误,原因是ajax和表单同时提交导致的, 相信很多朋友用了aj ...
- cookie和session会话技术
因为http协议是无状态的,也就是说每个客户端访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术识别客户端状态.会话技术是帮助服务器记住客户端状态的. 一次会话的开始是通过浏览器访问某个 ...
- .NET 调整图片尺寸(Resize)各种方法
本文中如无特别说明 .NET 指 .NET 5或者更高版本,代码同样可用于 .NET Core 前言 调整图片尺寸最常用的场景就是生成缩略图,一般为保持纵横比缩小,如果图片放大会使图片变得模糊,如果确 ...
- Flink SQL结合Kafka、Elasticsearch、Kibana实时分析电商用户行为
body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...
- Ubuntu_Gedit配置
Ubuntu_Gedit配置 为了换Ubuntu的时候能够更加方便,不用再用手重新打一遍代码,丢几个Gedit配置-- External Tools gdb compile (F2) #!/bin/s ...