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,一经查实,立即删除!

相关文章

myeclipse java注释模板_Eclipse/MyEclipse Java注释模板设置详解 ---转载自百度空间

设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素啦。现就每一个元素逐一介绍:文件(Files)注释标签:/*** Title: ${file_name}* Package ${package_name…

php之快速入门学习-9(switch)

PHP Switch 语句 switch 语句用于根据多个不同条件执行不同动作。 PHP Switch 语句 如果您希望有选择地执行若干代码块之一&#xff0c;请使用 switch 语句。 <?php switch (n) { case label1:如果 nlabel1&#xff0c;此处代码将执行;break; case label2:如果 nlabel2&…

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))#打印出…

mysql 事务 数量_MySQL 数据查询语言(DQL) 事务控制语言(TCL)详解

一、 数据查询语言(DQL)(重中之重)完整语法格式&#xff1a;select 表达式1|字段,....[from 表名 where 条件][group by 列名][having 条件][order by 列名 [asc|desc]][limit 位置,数量]<1> 普通查询select 查询表达式; // 最简单的sql语句&#xff0c;是一个函数select…

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

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

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

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

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

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

博客已经迁移到 http://imbotao.top 也会同步到这儿

完全是看到别人搭建的 hexo github Pages 博客界面很好看&#xff0c;很简洁&#xff0c;自己也喜欢折腾&#xff0c;就鼓捣了一个。 也在阿里云买了自己的域名&#xff0c;个人感觉在博客的样式和功能上花费了太多的时间&#xff0c;不过现在终于搞的差不多了&#xff0c;以后…

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

1,新建项目打开Visual studio code打开一个你想要创建项目的文件夹打开集成终端&#xff1a;查看 –> 集成终端 或者直接按 ctrl\ 如果没有安装vue-cli&#xff0c;在终端输入&#xff1a;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日起调整产品的出口…

超简单的走马灯效果

虽然走马灯的效果看起来很简单&#xff0c;网上也有很多的教程能够直接copy&#xff0c;然而还是第一次研究这个的实现方法。 先把div给定义出来&#xff0c;写好布局。 <div class"wrapper"><div id"box"><div>slide1</div><d…

winscp

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

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

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

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

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

Python 高级网络操作 - Python Advanced Network Operations

1 Python 高级网络操作 - Python Advanced Network Operations2 3 Half Open Socket,4 一个单向的 socket 被称为 half open socket, 即数据只能在一个方向上传输.5 Half Open Socket 是通过在 socket 对象上调用 shutdown() 方法得到.6 shutdown 接收一个 numeric…

java getattribute为空_Java TransMeta.getAttribute方法代码示例

import org.pentaho.di.trans.TransMeta; //导入方法依赖的package包/类Overridepublic void getData( TransMeta transMeta ) throws KettleException {try {String serviceName transMeta.getAttribute( StreamingConst.STREAMING_GROUP, StreamingConst.STREAMING_SERVICE_…

python summary writer_tensorflow中summary操作

tf中 tensorboard 工具通过读取在网络训练过程中保存到本地的日志文件实现数据可视化&#xff0c;日志数据保存主要用到 tf.summary 中的方法。tf.summary中summary是tf中的一个py文件&#xff0c;位置在 /tensorflow/python/summary/ 文件夹下&#xff0c;提供了像tf.summary.…

10 3 java_10.3 UiPath如何调用Java

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

物联网python教程慕课_物联网技术(校慕课资源,物联网组)-中国大学mooc-题库零氪...

3. 智慧社区的部署3.1 IIS服务器安装随堂测验1、在安装IIS信息服务器时&#xff0c;我们应打开电脑控制面板中的哪个设置( )A、管理工具B、程序与功能C、Windows 防火墙D、操作中心2、在安装IIS服务器时&#xff0c;在widows功能下需要勾选以下哪几项 &#xff1f;( )A、Intern…