你不知道的图片压缩格式 ".webp"

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: 你不知道的图片压缩格式 ".webp"

点击上方“编程三分钟”,马上关注,每周不加班时更新。


我这昨天搞了几个小时,费劲心机写了一个工具来把其他网络上的图片链接批量存在我的阿里云oss上,到头来还是发现webp格式的图片在手机上看不到,今天星期天我就不信这个邪了,和他杠上了。


webp是何方神圣?


我也是最近才知道的,在语雀上把文章导出以后,图片几乎全部是webp格式的,经过一番尝试,我仿佛老八附体,被webp压缩比率吓得差点大吃一惊。


image.png


webp就是那家从车库走出来的公司搞的牛逼格式,压缩的大了自然加载速度就快了,存储就更节省空间,就是下面这家公司。

aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9rdkJvYTd0NFBSRTNuMWlhVVY3S0dtc1RpYUpRZHltNVJQeVg3ZGd5VVd4c2N0WE1QVkxtTHUySm5raWJ2OWpza1h4UXN0MGdqU2Q5MGliT25rdXYyZjIzM1EvNjQw.png



看看几个图片格式的压缩比率


aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9rdkJvYTd0NFBSRTNuMWlhVVY3S0dtc1RpYUpRZHltNVJQNFMyaFNTb1R5dklBYmljalBKaGRtaWF2NHFrSUp3cE9VUVRjWTg0b3JWOWliam9LVG1XNjBsRTNnLzY0MA.png


国内哪些公司在用?

没错,他们都在用,有卖东西的TA



image.png

也有用来发短信的TA


aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9rdkJvYTd0NFBSRTNuMWlhVVY3S0dtc1RpYUpRZHltNVJQUGlhaHIycWlhYlFRdFZydkZkNW45eVBEaFk2cHduRHpoWnAxSVQycWxFYVdTTDE2VlZXSXN0c2cvNjQw.png


其他公司我就当看不见了

有个人不服


这几天就是发现webp格式的图片在手机上看不到,各种原因都找了也没有用。


在发现webp是google研发的格式,我灵光乍现!瞬间用电脑打开Safari发现图片就是加载不出来,打开我的旧小米一看又可以加载出来,这肯定不是偶然。


排除了各种原因以后最不可能的那个,就算再离谱也是凶手,难道是因为有个公司不服?


image.png



但怪就怪在语雀能在Safari上加载出来图片,真的是阿里技术强吗?

第一件事,查官方文档:


image.png


苍天有眼,一下就让我查到了


image.png


我再上语雀看看


aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9rdkJvYTd0NFBSRTNuMWlhVVY3S0dtc1RpYUpRZHltNVJQWERPcDR2bXBodElVOW93bGRBbXJoekxBcVBGbko1NWljdFNkZXdYblpxREpOcjRkcGljVXN5b3cvNjQw.png


https://cdn.nlark.com/yuque
/xxx.webp?x-oss-process=image/format,png


于是得知在对象存储获取的链接加参数?x-oss-process=image/format,jpg即可转换成jpg格式的图片展示。


继续用昨天的方法,把储存在mysql里的文章导出成sql,再一修改,重新导入。


这样就全部兼容啦,另外对象存储还支持图片裁剪、旋转、缩放、水印等等处理,都只要加一个参数就可以了。


解决问题的过程就是这么欢乐。


aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9rdkJvYTd0NFBSR2lhSGx1bVB2ZGlhVzNjaWJDZXVmdWdvTmZuUjhSMlBrdXhjUGljejBJcWlhUVFISDNDVnNBWkdxUFVrcmtWMmliVEhFMGt1SXU3NDZEYWJSUS82NDA.png

相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
相关文章
|
数据处理 对象存储
如何利用 OSS 转换 webp 文件为jpeg
如何利用 OSS 转换 webp 文件为jpeg,OSS 样式使用
2488 1
|
XML 安全 网络协议
netconf简介
netconf简要
|
索引
Layui 内置方法 - layer.prompt_(输入层)
Layui 内置方法 - layer.prompt_(输入层)
1492 0
|
8月前
|
JSON 监控 API
京东 API 助力,京东平台促销活动效果实时评估
在电商竞争激烈的背景下,京东平台促销活动成为商家提升销量的重要手段。传统评估方式滞后,难以及时调整策略。京东开放平台提供的API可实现实时数据获取与分析,助力商家高效评估活动效果。通过API,商家能实时追踪流量、监控销售数据、分析转化率与平均订单价值,快速响应市场变化。结合Python代码示例,本文详解如何调用京东API进行数据处理与指标计算,实现自动化监控与策略优化。实际案例显示,使用京东API后,某品牌活动响应时间缩短至秒级,销售额提升20%。京东API推动了从“事后复盘”到“实时优化”的转变,助力商家提升ROI,增强竞争力。
372 0
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
Web App开发 监控 Java
Electron V8排查问题之发现的内存泄漏问题如何解决
Electron V8排查问题之发现的内存泄漏问题如何解决
624 0
|
JavaScript 前端开发 数据库
测试开发之路--Flask 之旅 (三):数据库
本文介绍了在 Flask 应用中实现权限管理的过程,包括使用 Flask-SQLAlchemy、Flask-MySQLdb、Flask-Security 和 Flask-Login 等扩展模块进行数据库配置与用户权限设置。首先创建数据库并定义用户、环境和角色模型,接着通过 Flask-Security 初始化用户和角色,并展示了如何便捷地管理权限。后续将深入探讨权限控制的具体应用。
341 4
测试开发之路--Flask 之旅 (三):数据库
|
JavaScript 前端开发 物联网
Node.js一般在什么场景下使用?
Node.js是一个基于Chrome V8 JavaScript引擎构建的开源运行时环境,它允许开发者使用JavaScript在服务器端运行代码。Node.js具有高性能、轻量级、事件驱动和非阻塞I/O等特性,这些特性使得它在多种场景下具有广泛的应用。
440 0
|
前端开发 JavaScript Java
模板引擎(Template Engine)是什么?
模板引擎(Template Engine)是一种用于生成文本输出的工具,尤其在Web开发中应用广泛。它的主要目的是将用户界面(通常是HTML等模板文件)与业务数据(内容)分离,从而提供一种高效、灵活的方式来生成动态内容。
1633 1

热门文章

最新文章

下一篇
开通oss服务