PNG和WEBP,更应青睐哪样照片文件格式

摘要:WebP 是 2010 年 Google 开发设计的1种照片文件格式,它为网页页面上的照片出示了非凡的高质量和不利于缩小。网站开发设计者们可使用 WebP 来建立规格更小、细节更丰富多彩的照片,以此...

WebP 是 2010 年 Google 开发设计的1种照片文件格式,它为网页页面上的照片出示了非凡的高质量和不利于缩小。网站开发设计者们可使用 WebP 来建立规格更小、细节更丰富多彩的照片,以此来提升网站的速率。更快的载入速率针对网站的客户体验和网站的营销推广实际效果是相当关键的。

以便在全部机器设备和客户中做到最好载入实际效果,你网站上的照片文档尺寸不可该超出 500 KB。

与 PNG 照片相比,WebP 高质量照片一般最少要比 PNG 照片小 25%。在同样的 SSIM( 构造类似度(structural similarity))品质指标值下,WebP 不利于照片一般比 JPEG 照片小 25% 到 34%。

高质量 WebP 也适用全透明度。而在可接纳不利于 RGB 缩小的状况下,不利于 WebP 也适用全透明度,一般其尺寸比 PNG 文档小3倍。

Google 汇报称,把动漫 GIF 文档变换为不利于 WebP 后文档尺寸降低了 64%,变换为高质量 WebP 后文档尺寸降低了 19%。

WebP 文档文件格式是1种根据 RIFF( 資源交换文档文件格式(resource interchange file format))的文本文档文件格式。你能够用 hexdump 看到文档的签字是 52 49 46 46(RIFF):

$ hexdump --canonical pixel.webp00000000 52 49 46 46 26 00 00 00 [...] |RIFF&...WEBPVP8 |00000010 1a 00 00 00 30 01 00 9d [...] |....0....*......|00000020 0e 25 a4 00 03 70 00 fe [...] |.%...p...`....|0000002e

单独的 libwebp 库做为 WebP 技术性标准的参照完成,能够从 Google 的 Git 库房 或 tar 包中得到。

全世界在用的 80% 的 web 访问器适配 WebP 文件格式。本文编写时,Apple 的 Safari 访问器还兼容问题。处理这个难题的方式是将 JPG/PNG 照片与 WebP 照片1起出示,有1些方式和 Wordpress 软件能够保证这1点。

为何要这样做?

我的一部分工作中是设计方案和维护保养大家机构的网站。因为网站是个营销推广专用工具,而网站的速率是考量客户体验的关键指标值,我1直致力于提升网站速率,根据把照片变换为 WebP 来降低照片尺寸是1个很好的处理计划方案。

我应用了 web.dev 来检验在其中1个网页页面,该专用工具是由 Lighthouse 出示服务的,遵照 Apache 2.0 批准证,能够在github寻找。

据其官方叙述,“LIghthouse 是1个开源系统的,旨在提高网页页面品质的全自动化工厂具。你能够在任何公共性的或必须鉴权的网页页面上运作它。它性爱能、能用性、渐进式 web 运用、SEO 等层面的财务审计。你能够在 Chrome 访问器的开发设计专用工具中运作 Lighthouse,还可以根据指令行或做为 Node 控制模块运作。你键入1个 URL 给 Lighthouse,它会对这个网页页面开展1系列的财务审计,随后转化成这个网页页面的财务审计結果汇报。从汇报的不成功财务审计条目中能够了解应当如何提升网页页面。每条财务审计都有对应的文本文档解释为何该新项目是关键的,和怎样修补它。”

建立更小的 WebP 照片

我检测的网页页面回到了3张照片。在它转化成的汇报中,它出示了强烈推荐和总体目标。我挑选了它汇报有 650 KB 的 app-graphic 照片。根据把它变换为 WebP 文件格式,预计能够把照片尺寸降到 61 KB,节约 589 KB。我在 Photoshop 中把它变换了,用默认设置的 WebP 设定主要参数储存它,它的文档尺寸为 44.9 KB。比预期的还好些!从下面的 Photoshop 截图中能够看出,两张图在视觉效果品质上彻底1样。

左图:650 KB(具体尺寸)。右图: 44.9 KB(变换以后的总体目标尺寸)。

自然,还可以用开源系统照片编写专用工具 GIMP 把照片导出来为 WebP。它出示了几个品质和缩小的主要参数:

另外一张图变大后:

PNG(左图)和 WebP(右图),全是从 JPG 变换而来,两图比照能够看出 WebP 不但在文档尺寸更小,在视觉效果品质上也更出色。

把照片变换为 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 适用,因而你必须1个变换软件。遵照 Apache License 2.0 批准证公布的 WebPShop 0.2.1 是1个用于开启和储存包含动漫图在内的 WebP 照片的 Photoshop 控制模块,在 github 能够寻找。

以便能一切正常应用它,你必须把它放进 Photoshop 软件文件目录下的 bin 文档夹:

Windows x64 :C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\WebPShop.8bi

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

Wordpress 上的 WebP

许多网站是用 Wordpress 构建的(我的网站便是)。因而,Wordpress 如何提交 WebP 照片?本文编写时,它还不适用。可是,自然早已有软件来考虑这类要求,因而你能够在你的网站上另外提前准备 WebP 和 PNG/JPG 照片(为 Apple 客户)。

在 Marius Hosting 有下面的 表明 :

“立即向 Wordpress 提交 WebP 照片会如何?这很简易。向你的主题 functions.php 文档加上几行內容便可以了。Wordpress 默认设置不适用展现和提交 WebP 文档,可是我会向你详细介绍1下如何根据几个简易的流程来让它适用。登陆进你的 Wordpress 管理方法员页面,进到‘外型/主题编写器’寻找 functions.php。拷贝下面的编码粘贴到该文档最终并储存:

//** *Enable upload for webp image files.*/function webp_upload_mimes($existing_mimes) { $existing_mimes['webp'] = 'image/webp'; return $existing_mimes;}add_filter('mime_types', 'webp_upload_mimes');

假如你想在‘新闻媒体/新闻媒体库’时看到缩略图预览,那末你必须把下面的编码也加上到 functions.php 文档。以便寻找 functions.php 文档,进到‘外型/主题编写器’并检索 functions.php,随后拷贝下面的编码粘贴到文档最终并储存:

//** * Enable preview / thumbnail for webp image files.*/function webp_is_displayable($result, $path) { if ($result === false) { $displayable_image_types = array( IMAGETYPE_WEBP ); $info = @getimagesize( $path ); if (empty($info)) { $result = false; } elseif (!in_array($info[2], $displayable_image_types)) { $result = false; } else { $result = true; } } return $result;}add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

WebP 和将来

WebP 是1个健硕而提升的文件格式。它看起来更好,缩小率更高,并具备别的绝大多数普遍照片文件格式的全部特点。无须再等了,如今就应用它吧。

出处:Linux我国

作者:Jeff Macharyas

译者:Xiaobin.Liu



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站免费建站