文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

使用WebP图像格式的完整指南

2019年02月28日 发布 阅读(344) 作者:懒炖

WebP,或非正式发音为 weppy ,是 Google开发者大约5年前 推出 的 一种图像格式 。 如果您是网页设计师,或者是努力减少和优化图像文件大小的开发人员,那么WebP能够为您带来微笑。

简而言之,以下是您需要了解的有关这种不那么新但仍然很酷的图像格式的一些重要内容:

  • WebP的文件扩展名为.webp。
  • WebP采用有损和无损压缩。
  • WebP有损图像可能 比JPEG小25-34%
  • 与PNG相比, WebP无损图像可能小25%
  • WebP支持无损透明度,即带有alpha通道的PNG。
  • WebP支持动画。 即动画GIF。

简而言之,WebP能够显着降低JPEG,GIF,PNG的图像文件大小。 这里是WebP的复习,你应该在我们进入有趣的东西之前检查一下。

一个实验

关于网络声明的最好的事情是我们总是可以运行实验来检查真实性和真实性。 以下是我做的一些实验,以了解 图像 从各种图像格式(JPEG,PNG和GIF)转换为WebP后可能会有多小

1. JPEG - 有损图像

这是我从 Pexels 抓取的随机JPEG图像 。原始文件大小 - 165kb。**↓

jpeg original
jpeg原创

使用 JpegMini优化图像*新文件大小 - 101kb↓*

jpeg optimized

jpeg优化

最后,相同的图像转换为WebP格式。 *最终文件大小 - 70kb↓*

jpeg webp

jpeg webp

另请注意: 如果将同一图像转换为以下格式,则以下是不同的文件大小:

  • GIF - 285kb
  • PNG 8 - 241.2kb
  • PNG 24 - 657.6kb
2. PNG - 无损图像

现在,让我们尝试透明的PNG。 ( 来源 )。 *原始文件大小 - 587kb↓*

png original

png原创

这是用 tinypng 优化的图像 。 *新文件大小 - 278kb↓*

png optimized

png优化

最后,图像转换为WebP格式。 *最终文件大小 - 112kb↓*

webp format

webp格式

3.动画GIF

转换为WebP时,JPEG图像从165kb变为70kb,而PNG图像从587kb变为112kb。

让我们来看看动画GIF的票价:

摘要:

这是一个总结整个实验的表格:

有损(JPG)无损(PNG)动画,GIF
原版的165KB587KB6.8MB
使用工具进行优化101KB278KB-
WebP格式70KB112KB6.3MB

如果没有大量的数学计算,这些数字表明文件大小大幅减少,从图像来看,你无法真正区分清晰度和分辨率。 较小,较轻的文件大小和相同的图像质量水平,WebP绝对值得研究。

使用工具转换为WebP

如果您已经加入并希望开始以WebP格式发布图像,那么让我们深入了解如何将图像轻松转换为此格式。 下面提到的所有方法在控制,易用性和方便性方面各不相同。 选择你的毒药。

WebPonize for Mac

WebPonize可能是在Mac上将图像转换为WebP格式的最简单,最快捷的方式。 您只需将图像拖放到WebPonize中即可进行转换。 您将收到原始文件的输出,前大小,后大小和减少百分比。 [ 下载WebPonize ]

webponize

webponize

适用 Windows的 Webpconv

如果您正在运行Windows,则Webpconv是您应该安装的应用程序。 它还有便携版本,因此您可以在闪存驱动器上独立运行它。 [ 下载Webconv ]

webpconv

webpconv

使用命令行转换

如果你感觉很怪异,你可能想要使用命令行来执行转换。 cwebp 将您的JPEG,PNG或TIFF图像转换为WebP格式, dwebp 将它们转换回PNG格式。 让我们看看它是如何工作的。

注意: 以下指南适用于Mac OS X.对于Windows和Linux用户, 请单击此处

在Mac OSX上设置MacPorts

首先,确保安装了Xcode,然后按照以下步骤操作:

  1. 下载并安装 MacPorts 。 如果您已在Mac中安装了MacPorts,请继续执行步骤2。
  2. 启动 终端
  3. 输入 “ sudo port selfupdate ”并按Enter键。 这会将您的MacPorts更新到最新版本。

    sudo port selfupdate

    sudo port selfupdate

  4. 接下来,键入“ sudo port install webp ”并按Enter键。 这将安装 libwebpWebP Library )。

    sudo port install webp

    sudo port install webp

而已。 现在让我们看一下 如何使用命令行将图像转换为WebP

要转换/还原的命令

以下是命令:

I - 将JPEG / PNG图像文件转换为WebP格式

格式 :cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

示例

  1. cwebp -q 80 example.png -o example.webp

II - 将WebP图像文件隐藏回PNG

格式 :dwebp [WebP_filename] -o [PNG_filename]

示例

  1. dwebp image.webp -o image.png

更多 :如果您通过其他方式进行转换,则以下是使用 GruntGulp 任务将JPG / PNG文件转换为WebP的说明。

转换为在线工具

如果您不想在操作系统上安装任何应用程序来执行此任务,请选择使用这些在线工具。 以下是我所了解的一些内容:

提示: 如果您使用谷歌 convert webp online ,您可能会找到更多选项。

Photoshop插件

您可能很高兴知道还有一个Photoshop插件允许您通过Photoshop将图像保存为WebP格式。 此插件支持Mac OS X(CS 2- CS 6)和Windows(32位和64位)。 [在 这里 下载插件 。]

注意 :只是认为你应该知道我在Photoshop CC上尝试过它。 没在那里工作。

photoshop plugin

photoshop插件

WebP浏览器支持

最后,我们来谈谈兼容性。 目前,您可以在以下浏览器上查看WebP格式图像( 参考 ):

  • 适用于iOS的Chrome / Chrome
  • Opera / Opera Mini

webp browser support

webp浏览器支持

对于 FireFoxSafari来说 , 运气并不是那么幸运 ,它本身仍然不支持WebP格式。 但是,您可以使用 WebPJS Javascript库 将WebP图像转换为客户端站点上的dataURI字符串

回归到其他图像格式

使用回退以避免因不受支持的浏览器而出现图像错误总是一个好主意。 在这种情况下,后备将是JPG或PNG格式的图像。 这是你如何做到的。

  1. <picture>
  2. <source srcset="example.webp 1x" type="image/webp">
  3. <img src="example.jpg" >
  4. </picture>

对于此代码, 如果用户使用Firefox或Safari , 将加载 example.jpg

预览WebP图像

您可以在Chrome和Opera浏览器上预览WebP图像。 但是如果你想在你的机器上本地进行,你需要一些工具。

Mac用户可以使用 WebPQuickLook 使用“快速查看”功能预览WebP格式图像(选择或突出显示图像,按空格键)。

WebPQuickLook

WebPQuickLook

对于Windows用户, WebPCodec 将在文件资源管理器中显示WebP图像的缩略图预览。 将显示WebP和JPEG等效项。 在某些受支持的Window OS(Vista,7,8)上,WebP图像也可以显示在Windows Photo Viewer上。

WebPCodec

WebPCodec

更多: ReSCR.it 自动提供中的WebP格式的图片,如果你存储与您的图像它的可用 MaxCDN 。 ( 了解更多

参考

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用es6的exports和import 进行模块化开发

    使用es6的exports和import 进行模块化开发

    发布:2019-06-14 阅读(64)

  • 使用git hooks(post-receive)实现简单的远程自动部署

    使用git hooks(post-receive)实现简单的远程自动部署

    发布:2019-06-05 阅读(85)

  • nodejs应用转换png,jpg,gif为webp图片格式

    nodejs应用如果在服务端使用npm包转换jpg,png,gif为webp格式,大大缩小图片的大小

    发布:2019-03-01 阅读(366)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(311)

  • 查看浏览器、操作系统、分辨率等使用份额~

    浏览器、操作系统、分辨率等使用份额~

    发布:2019-02-25 阅读(281)

  • 使用MuMu模拟器和fiddler抓包app

    是不是觉得用手机调试app h5页面很麻烦?是不是不方便抓APP的包?在电脑上可以抓吗,可以,用mumu+fiddler就走向人生巅峰了。。。

    发布:2019-01-24 阅读(145)

  • nodejieba "结巴"中文分词安装使用

    NodeJieba是&amp;amp;amp;amp;quot;结巴&amp;amp;amp;amp;quot;中文分词的 Node.js 版本实现, 由CppJieba提供底层分词算法实现, 是兼具高性能和易用性两者的 Node.js 中文分词组件。

    发布:2019-01-16 阅读(512)

  • ESLint的使用

    eslint使用注意事项

    发布:2019-01-03 阅读(356)

  • git cherry-pick使用指南

    **git cherry-pick**可以选择某一个分支中的一个或几个commit(s)来进行操作。例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开发版本的分支v3.0,我们不能直接把两个分支合并,这样会导致稳定版本混乱,但是又想增加一个v3.0中的功能到v2.0中,这里就可以使用cherry-pick了,其实也就是对已经存在的commit 进行再次提交.

    发布:2018-12-28 阅读(350)

  • 使用husky、lint-staged、prettier、eslint保持团队代码一致

    团队成员多,虽然制定了代码规范,但也不一定能执行的起来,时间一长,各自的代码规范可能又会有出入了。husky解决了这个问题,让代码检查自动化,流程化,如果不符合规范,则不能commit

    发布:2018-12-24 阅读(655)