webp转换gif_用 WebP 创建尺寸更小、细节更丰富的图片,以此来提高网站的速度...

WebP 文件格式是一种基于 RIFF(资源互换文件格式)的文档格式。

WebP 是 2010 年 Google 开发的一种图片格式,它为网页上的图片提供了卓越的无损和有损压缩。网站开发者们可以使用 WebP 来创建尺寸更小、细节更丰富的图片,以此来提高网站的速度。更快的加载速度对于网站的用户体验和网站的营销效果是至关重要的。

为了在所有设备和用户中达到最佳加载效果,网站上的图片文件大小最好不超过 500 KB。

与 PNG 图片相比,WebP 无损图片通常至少要比 PNG 图片小 25%。在同等的 SSIM(结构相似度)质量指标下,WebP 有损图片通常比 JPEG 图片小 25% 到 34%。

无损 WebP 也支持透明度。而在可接受有损 RGB 压缩的情况下,有损 WebP 也支持透明度,通常其大小比 PNG 文件小三倍。

Google 报告称,把动画 GIF 文件转换为有损 WebP 后文件大小减少了 64%,转换为无损 WebP 后文件大小减少了 19%。

现在全球在用的 80% 的 web 浏览器兼容 WebP 格式。目前,Apple 的 Safari 浏览器还不兼容。

创建更小的 WebP 图片

测试的页面返回了三张图片。在它生成的报告中,它提供了推荐和目标。我选择了它报告有 650 KB 的 app-graphic 图片。通过把它转换为 WebP 格式,预计可以把图片大小降到 61 KB,节省 589 KB。我在 Photoshop 中把它转换了,用默认的 WebP 设置参数保存它,它的文件大小为 44.9 KB。比预期的还要好!从下面的 Photoshop 截图中可以看出,两张图在视觉质量上完全一样。

50a3ba45317003a478cc140d2dd6694a.png

左图:650 KB(实际大小)。右图: 44.9 KB(转换之后的目标大小)。

把图片转换为 WebP

你也可以用 Linux 的命令行工具把图片从 JPG/PNG 转换为 WebP:

在命令行使用 cwebp 把 PNG 或 JPG 图片文件转换为 WebP 格式。你可以用下面的命令把 PNG 图片文件转换为质量参数为 80 的 WebP 图片。

cwebp -q 80 image.png -o image.webp

你还可以用 Image Magick,这个工具可能在你的发行版本软件仓库中可以找到。转换的子命令是 convert,它需要的所有参数就是输入和输出文件:

convert pixel.png pixel.webp

使用编辑器把图片转换为 WebP

要在图片编辑器中来把图片转换为 WebP,可以使用 GIMP。从 2.10 版本开始,它原生地支持 WebP。

如果你是 Photoshop 用户,由于 Photoshop 默认不包含 WebP 支持,因此你需要一个转换插件。遵循 Apache License 2.0 许可证发布的 WebPShop 0.2.1 是一个用于打开和保存包括动画图在内的 WebP 图片的 Photoshop 模块,在 https://github.com/webmproject/WebPShop 可以找到。

为了能正常使用它,你需要把它放进 Photoshop 插件目录下的 bin 文件夹:

Windows x64 :C:Program FilesAdobeAdobe PhotoshopPlug-insWebPShop.8bi

Mac:Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin

WebP 和未来

WebP 是一个健壮而优化的格式。它看起来更好,压缩率更高,并具有其他大部分常见图片格式的所有特性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571504.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 如何判断excel单元格为空_如何用python处理excel(二)

读取excelimport xlrdworkbookxlrd.open_workbook(rC:\Users\Desktop\hebing\学生登记表.xls)sheetworkbook.sheet_by_index(0)#根据序列号来打开某一个sheetrowsheet.nrows#将excel的行数赋值给变量colsheet.ncols#将excel的列数赋值给变量print(sheet.cell_value(1,0))#打印出…

web前端到底是什么?有前途吗

web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> …

此加载项为此计算机的所有用户安装_MDI Jade 6.5软件安装教程

软件下载▼关注微信公众号:贵州永航科技回复Jade即可获得软件安装包下载地址以及详细安装教程更多软件安装教程可点击菜单栏获取软件介绍MDI Jade是一款专门用于XRD分析的软件,XRD分析就是X射线衍射分析,MDI Jade通过对材料进行X射线衍射&…

java 线程定时器_Java线程之Timer定时器

定时/计划功能主要使用的就是Timer对象,它在内部还是使用多线程的方式进行处理,所以它和线程技术还是有非常大的关联。Timer类主要作用就是设置计划任务,但封装任务的类却是TimerTask类。TimerTask类是一个抽象类。执行任务的时间晚于当前时间…

vscode 写vue 没有js提示_如何用VSCode实现一个vue.js项目?

1,新建项目打开Visual studio code打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端 或者直接按 ctrl\ 如果没有安装vue-cli,在终端输入:npm install \-g vue-cli全局安装vue-cli然后新建项目vue init webpack projectNamep…

python有没有类似unity3d_像web一样使用python

使用传统的web开发技术,也就是htmljs,然后搭配一个后端语言,已经成为当今web开发的固定模式了,为此也形成了众多的toolkit,譬如ror,django,各种js图形库更是玲琅满目,从非常大程度上也加速了开发过程.但传统web应用也非常自然地有一些诟病,有些特殊效果,c端能够轻而易举地完毕,…

邓白氏编码查询_外贸人常用查询工具汇总

外贸工具类网站FOB价格计算器http://bbs.fobshanghai.com/fobprice.htmCIF价格计算器http://www.easiertrade.com/public/cif.html?_1487894720000海关原产地证真伪查询https://dwz.cn/f3O8YGK6出口退税查询https://dwz.cn/kGWsBclu国家已正式于2018年11月1日起调整产品的出口…

winscp

简介:是linux的一个连接工具 1.winscp的下载:就会自动下载的了 2.安装配置: https://jingyan.baidu.com/article/6525d4b15bae6fac7d2e94a0.html 3.生成密钥: https://jingyan.baidu.com/article/ed2a5d1f377ccb09f6be178b.html 4…

gitlab-ee使用mysql_在 GitLab 我们是如何扩展数据库的

很长时间以来 GitLab.com 使用了一个单个的 PostgreSQL 数据库服务器和一个用于灾难恢复的单个复制。在 GitLab.com 最初的几年,它工作的还是很好的,但是随着时间的推移,我们看到这种设置的很多问题,例如,数据库长久处…

哈希表数据结构_Java数据结构哈希表如何避免冲突

前言一、哈希表是what?这是百度上给出的回答:简而言之,为什么要有这种数据结构呢?因为我们想不经过任何比较,一次从表中得到想要搜索的元素。所以就构造出来了哈希表,通过某种函数(哈希函数)使元素的存储位…

10 3 java_10.3 UiPath如何调用Java

调用Java方法(Invoke Java Method)的介绍从Java Scope中的.jar加载的方法中调用指定的Java方法。并结果存储在变量中二、Invoke Java Method 在UiPath中的使用打开设计器, 在设计库中新建一个Sequence,为序列命名及设置Sequence存放的路径, 在Activities中搜索Java …

台达伺服电机选型手册_机械加工工艺师手册_打包下载

如何【设为星标★】,优先推送资料信息?Ta们都在看咱们:机械大佬群注意及时保存和下载,资料若失效请拉到本页底部留言,我们将不定时补发!免责声明:该资料系网络转载,版权归原作者所有…

团队作业7——Beta版本冲刺计划及安排

需要改进的工具流程(如版本控制、测试工具等) 首先把之前项目的BUG进行修复 然后完成如下的功能 冲刺的时间计划安排 (冲刺时间为期七天,安排在2017.12.4——2017.12.10之间) 组员任务陈福鹏实现博客.多语言、倒计…

开发黑名单功能demo_中台实践:通用化黑名单平台

业务中台的价值主要体现在对通用化业务能力的沉淀、整合,通过对可复用业务流程和业务功能的设计,向不同业务方提供标准化且可扩展的服务能力。本文来聊一聊笔者工作过程中设计的通用化黑名单平台,通过将用户管控能力的下沉,为各业…

Java旅游动吧项目讲解_springboot动吧项目

架构分析页面流程业务分析:客户端向服务端发送一个请求,发向了Tomcat,如果Tomcat只有一个线程是不可能处理多个请求的,所以就需要一个多个线程的池资源,然后线程用I/O读取请求中的数据,然后服务器从http协议…

java并发-内存模型与volatile

JMM的关键技术点都是围绕着多线程的原子性、可见性和有序性来建立的。因此,我们首先必须了解这些概念 1,原子性 原子性是指一个操作是不可中断的。即使是在多个线程一起执行的时候,一个操作一旦开始,就不会被其他线程干扰&#xf…

Notepad++使用教程

Notepad 快捷键 大全CtrlC 复制CtrlX 剪切CtrlV 粘贴CtrlZ 撤消CtrlY 恢复CtrlA 全选CtrlF 键查找对话框启动CtrlH 查找/替换对话框CtrlD 复制并粘贴当行CtrlL 删除当前行CtrlT 当行向上移动一行F3 查找下一个ShiftF3 查找上一个CtrlShiftF 组合在文件中查找CtrlF3 查找&#x…

安卓手机刷软路由_华为路由AX3 Pro上手测评:用过最方便的路由器,没有之一...

都说"科技改变生活",但我总觉着,现如今的人们似乎被数码产品"奴役"了。比如说:之前买过某品牌路由器,设置过程之繁琐,直接让当时是数码小白的我崩溃了。自打那之后,我选购数码产品的标…

ECharts.js学习(二)动态数据绑定

Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。 绑定多组数据 很多时候需要展示的数据不单单是一组…

黑苹果2k屏_一加手机屏幕新特性:120Hz、2K+ OLED、10bit

在发布了旗下的首款概念手机Concept One后,再次有消息显示一加将在1月13日也就是今天举办“屏幕技术沟通会”。而在发布会正式到来前,一加CEO刘作虎则在微博表示,一加已经完成了120Hz屏幕的研发。沟通会上还会聊一聊一加90Hz 流体屏引领行业后…