图像通常是缓慢加载网页的最大原因之一。它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源。仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化。另一种选择是使用最优化的图像文件类型之一:来自Google的WebP

什么是WebP

WebP是Google专门为网络设计的光栅图像格式。它提供无损和有损压缩,允许网页设计人员以较小的文件大小显示更丰富的图像。

WebP有损图像使用预测编码来对图像进行编码。它通过查看相邻像素来预测值来减小文件大小,然后仅对差异进行编码。有损图像比JPEG的可比图像小34%。

WebP无损图像使用已经看过的图像片段重建新像素。如果找不到匹配项,则可以使用本地调色板。无损图像比与PNG相同的图像小26%。无损WebP支持alpha通道(透明度),文件大小比PNG的可比图像小3倍。

什么是WebP文件

WebP文件使用  VP8  或  VP8L  图像数据,以及基于  RIFF的容器。它使用文件扩展名.webp。该libwebp  库是为WebP的规范的参考实现。您可以在git存储库中看到库 或作为  tarball。

 

它将如何改变您的网页设计实践

WebP的主要优点是文件较小,因此网页加载速度更快,您将从服务器中使用更少的资源。这也意味着如果访问者使用支持它们的浏览器,您将能够使用更多颜色的更大图像,而不会增加服务器的当前负载。

您不必非常认真地在布局中使用较小的区域来处理图像。您可以使用适用于设计的尺寸,而不必因为页面速度或加载时间而使设计适合较小的图像。

如何在WordPress中使用WebP图像

  • Google+的
  • Facebook的
  • 推特

ChromeP和Opera浏览器以及许多图像编辑工具本身都支持WebP。您仍然可能遇到WordPress的安全问题。有几种方法可以将WebP与WordPress一起使用。您可以转换文件,但最好的选择是使用插件。

WebP转换插件

将WebP图像用作设计人员或开发人员的最佳方法之一是您无需执行创建文件的工作。相反,您只需安装转换插件即可。您将以JPEG或PNG格式上传普通图像,插件会将这些文件转换为WebP,以便将图像传送给访问者。

此方法的优点是您只需要处理已经习惯的文件类型,而无法使用WebP的访问者仍将接收原始文件类型。那些可以接收WebP文件类型的人将看到更快的加载时间。

另一种方法是允许您将WebP文件上传到您的网站。不推荐使用此方法,因为并非所有浏览器都支持此格式。这意味着您的部分访问者将无法查看您的图片。

有几个免费和高级插件可以将图像转换为WebP。这里有一些免费选项。

EWWW图像优化器

  • Google+的
  • Facebook的
  • 推特

EWWW Image Optimizer是一个带有WebP转换功能的免费插件。它生成JPEG和PNG的WebP版本。它包含许多选项,例如Apache兼容的重写规则,以及替代的WebP重写选项。它与高速缓存和CDN兼容,并与KeyCDN的Cache Enabler插件配合使用。

这个可能是最容易使用的。内置的WebP功能允许您使用JPEG的有损转换和PNG的无损转换,并且转换是自动的。您所要做的就是安装插件并启用WebP选项卡中的功能。无需其他设置。

短像素图像优化器

  • Google+的
  • Facebook的
  • 推特

ShortPixel Image Optimizer是一个免费的插件,可以将任何JPEG,PNG或GIF转换为WebP。它使用有损和无损压缩。它也适用于支持WebP的缓存插件。它为可以查看它们的浏览器提供WebP图像,为那些不能查看它们的浏览器提供其他格式。

它还可以选择使用HTML将WebP图像添加到前端页面中。为此,您可以使用<picture>标记而不是普通的<img>标记。要将其设置为自动转换图像,只需在“高级”选项卡中启用该功能即可。您可以根据需要恢复图像。

WebP Express

  • Google+的
  • Facebook的
  • 推特

WebP Express是一个免费的插件,可以生成不到JPEG大小一半的图像。它将JPEG和PNG路由到要转换的图像转换器或已转换的图像。无论图像如何到达服务器,它都能正常工作。它适用于媒体库,库和CSS引用的主题图像。

它不适用于Microsoft IIS服务器或WAMP,并且尚未使用多站点进行测试。它确实需要一些转换方法的设置,但你有几个可供选择。图像将首先使用顶部的转换方法,如果该图像失败,它将沿着列表向下工作,直到找到适用于图像的方法。您可以按照希望它们使用它们的顺序拖动它们。

Opti MozJpeg Guetzli WebP

  • Google+的
  • Facebook的
  • 推特

Opti MozJpeg Guetzli WebP是一个免费的插件,它是在考虑Google Pagespeed Insights的情况下创建的。它使用Mozilla MozJpeg,Google Guetzli和Google WebP图像编码器来转换图像。编码器可以在本地安装,也可以使用内置的ssh客户端。它使用与作者虚拟机的ssh连接远程访问编码器。

它可以将所有非alpha通道PNG转换为JPEG。它会在进行更改之前备份您的图像。您可以随时还原图像。

WebP示例

对于我的例子,我想展示一些质量和尺寸差异。我将各种格式和质量级别的相同图像保存起来进行比较。我实际上是在我的图像编辑器中显示图像的屏幕截图。我正在使用带有WebP插件的Paint.NET。当我将这些图像上传到这个网站时,这些图像的尺寸会减小一些,所以它们看起来可能会比实际上看起来有点不同,但希望它们能提供一个很好的比较。

  • Google+的
  • Facebook的
  • 推特

这是我从Unsplash拍摄的照片。这是JPEG文件,缩小到800像素宽,保存质量为98%。这是一个237kb的文件。

  • Google+的
  • Facebook的
  • 推特

这是保存为PNG的相同图像。这是一个1.09mb的文件。

  • Google+的
  • Facebook的
  • 推特

这是保存为WebP的相同图像。它还以98%的质量保存。这是一个199kb的文件。

  • Google+的
  • Facebook的
  • 推特

这是以34%保存的相同WebP文件。这是一个35kb的文件。很难看出图像之间有任何差异。

写在最后

那是我们看看什么是WebP以及什么是WebP文件。这种格式大大减少了图像文件的大小,节省了大量空间并缩短了加载时间。主要缺点是它只与少数浏览器兼容。幸运的是,您可以使用一个插件将当前库转换为WebP,以便那些使用兼容浏览器的插件同时为不能查看WebP格式的常用文件类型提供服务。

WebP是一种有趣的格式。因为它来自谷歌我希望它最终会流行起来。它自2010年以来一直存在,所以它正在缓慢发展。节省文件大小和加载速度使得使用插件将图像转换为可以使用它们的访问者是值得的。这是免费的速度

您是否在网站设计中使用或计划使用WebP图像?请在评论中告诉我们您对WebP的看法。

原文链接:https://jhrs.com/2019/31253.html

什么是WebP以及如何在WordPress中使用WebP图像的更多相关文章

  1. 如何在WordPress中使用七牛云存储

    序:七牛云存储可以方便的将网站的图片等数据镜像到七牛云存储的空间,直接从云端将数据返回给用户.这样可以大大节省网站的空间,提升网站的访问速度. 真正显示一键实现WordPress博客静态文件CDN加速 ...

  2. 如何在Dreamweaver中使用emmet

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3666 一.emmet ...

  3. 如何在XAMPP中设置多个网站

    xampp 是一个非常方便的本地 apache + php + mysql 的调试环境,在本地安装测试 WordPress 等各种博客.论坛程序非常方便.今天我们来给大家介绍一下,如何使用 XAMPP ...

  4. [转帖]如何在VirtualBox中运行macOS Catalina Beta版本

    如何在VirtualBox中运行macOS Catalina Beta版本 secist2019-08-03共2179人围观系统安全 https://www.freebuf.com/articles/ ...

  5. 如何修复 WordPress 中的 HTTP 错误

    如何修复我们会向你介绍,如何在 Linux VPS 上修复 WordPress 中的 HTTP 错误. 下面列出了 WordPress 用户遇到的最常见的 HTTP 错误,我们的建议侧重于如何发现错误 ...

  6. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  7. 如何在SpringBoot中使用JSP ?但强烈不推荐,果断改Themeleaf吧

    做WEB项目,一定都用过JSP这个大牌.Spring MVC里面也可以很方便的将JSP与一个View关联起来,使用还是非常方便的.当你从一个传统的Spring MVC项目转入一个Spring Boot ...

  8. 如何在latex 中插入EPS格式图片

    如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...

  9. 如何正确的使用json?如何在.Net中使用json?

    什么是json json是一种轻量级的数据交换格式,由N组键值对组成的字符串,完全独立于语言的文本格式. 为什么要使用json 在很久很久以前,调用第三方API时,我们通常是采用xml进行数据交互,但 ...

随机推荐

  1. Codility---Nesting

    Task description A string S consisting of N characters is called properly nested if: S is empty; S h ...

  2. Dev C++ 工程没有调试信息 解决办法

    Dev C++ 工程没有调试信息 解决方法DevC++4.9.9.2中,按 F8 开始调试.提示信息为:工程没有调试信息,您想打开工程的调试选项并重新生成吗?选择是后,再按F8,仍旧是这个信息.什么原 ...

  3. es6基本语法,vue基本语法

    一.es6基本语法 0.es6参考网站 http://es6.ruanyifeng.com/#README 1.let 和 const (1)const特点: 只在局部作用域起作用 不存在变量提升 不 ...

  4. 第二章 python如何运行程序

    一.python解释器介绍 Python解释器是一种让程序运行起来的程序.实际上,解释器是代码与机器的计算机硬件之间的软件逻辑层.当Python包安装在机器上后,它包含了一些最小化的组件:一个解释器和 ...

  5. Mybatis_two

    SqlMapConfig.xml配置文件 SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) ...

  6. 球体的双目视觉定位(matlab,附代码)

    球体的双目视觉定位(matlab,附代码) 标签(空格分隔): 机器视觉 引言 双目视觉定位是我们的一个课程设计,最近刚做完,拿出来与大家分享一下,实验的目的是在拍摄的照片中识别球体,并求出该球体到相 ...

  7. mysql数据库在linux下的导出和导入及每天的备份

    mysql数据库的导出,导入 1. 导出数据库为sql文件 mysqldump 数据库名 -uroot -p > xxx.sql 导出数据表结构和数据 eg.   mysqldump cloud ...

  8. Oracle 数据库表中已有重复数据添加唯一键(唯一约束)

    Oracle 数据库表中已有重复数据添加唯一键(唯一约束) 问题描述 以 demo 举例,模拟真实场景. 表 TEST_TABLE 有如下字段和数据:id 是主键,code 没有设置键和索引 ID C ...

  9. JS中闭包的介绍

    闭包的概念 闭包就是能够读取其他函数内部变量的函数. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascri ...

  10. springboot+redis+Interceptor+自定义annotation实现接口自动幂等

    前言: 在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同.按照这个含义,最终的含义就是 对数据库的影响只能是一次性的 ...