的HTTP存档的研究显示，一个桌面网页的平均重量已经从2011年的523千字节膨胀到现在2196字节在2021年。一个更大的网站意味着更长的加载时间，网络用户作为一个整体往往是没有耐心的。

大部分缓慢加载的页面重量是由图片．如果你想要包含所有让你的网站激动人心的漂亮的媒体——以及大量的数据——你会想要保持在新技术的顶端优化网站性能尺寸和加载速度。

这就是WebP图像派上用场的地方。

WebP是一种紧凑的现代图像格式，您可以使用它提供比传统格式(如WebP)文件大小更小的高质量图像JPEG和PNG．使用较小的图片，你的网站加载更快，在SEO上排名更好，而不影响你的网站的图像质量。

什么是WebP图像?

WebP是一个图像文件类型由谷歌创建，为web提供有损和无损图像压缩。它于2011年推出，自2020年被广泛采用以来，实际上已经成为主流。WebP文件可以通过文件名扩展名来识别.webp．

WebP是一种开源技术，任何人都可以下载并对源代码做出贡献。WebP格式是由谷歌开发的，可以在不损失质量的情况下减小压缩图像的大小。该公司通过使用类似于视频关键帧编码的预测编码来实现这一点。

谷歌的研究表明，它成功地将图像压缩成更小的文件大小。该公司报告称，WebP自夸的好处是小26%比PNG文件小23-24%。一个WebP图像的大小可以达到16383 × 16383像素．

WebP在哪里得到支持?

可以肯定地说，WebP一直很漂亮广泛采用这是目前的标准。截至2022年，WebP有一个97%的市场份额在web浏览器。这包括谷歌Chrome, Safari, Firefox, Edge和Opera。cms像Webflow像Photoshop这样的图形工具现在也普遍支持WebP图像。

尽管有很多工具支持WebP, JPG仍然是网络上最流行的图像格式。根据HTTP存档在美国，WebP在2021年仅占网站上所有图片的7%左右。然而，这个数字一直在增长。

WebP图像文件的主要特性

并非所有的图像格式都具有相同的功能。WebP图像格式的优点之一是它可以处理比其他文件格式更小的功能(例如透明度和动画)。

有损和无损压缩

WebP既可以用于有损压缩，也可以用于无损压缩。这些术语确定了图像压缩反向时会发生什么。有损压缩在文件解压缩时丢失数据，而无损压缩几乎不丢失数据。有损压缩的优点是它创建的文件比无损压缩小得多。

透明度

WebP图像支持透明度(即alpha通道)。其他格式如PNG文件也有，但jpg文件没有。透明也比其他格式增加的数据少谷歌的研究．

在设计网站时，透明度尤其有用。它允许您在形状上创建不均匀的边界，并查看形状后面的背景，例如，下面的Webflow标志。它还允许您创建深度和对比的页面元素层之上和下层彼此。你甚至可以创造更高级的视觉效果，比如glassmorphism让你的网站看起来新鲜和现代。

动画

WebP图像可以动画化，就像众所周知的那样GIF．这比不支持动画的jpg有优势。WebP动画文件的大小也比GIF或APNG文件小。

元数据

WebP支持使用这两种方法向图像添加元数据XMP而且EXIF．元数据对于为图像提供数字上下文非常有用——例如，从数码相机获取的图像附加的时间和位置数据。您可以使用元数据为图像添加标签和简短描述，以帮助搜索引擎识别图像，提高您的SEO。

颜色配置文件

你可以嵌入ICC档案用于颜色管理到WebP文件，该文件由国际财团颜色．ICC文件可以导入到图像编辑程序，如Adobe Photoshop帮助跨设备管理文件中的颜色或用于打印。

在建立网站时使用WebP图像的好处

WebP是一种更有效的图像编码方法。它使图像文件更小，使用更少的存储空间，使您的网站速度更快。较小的图片在一些重要的方面帮助你的网页设计。

使用WebP图像可以使你的网站更快

数据是影响网站运行速度的最大因素之一。PageSpeed见解是分析网站性能的最佳工具之一。它能够识别正确尺寸图片，高效的图像编码,使用现代图像格式作为提高网站速度的关键方法。

一个速度更快的网站可以改善客户体验，导致更好的跳转率和转化率

很少有什么比缓慢加载的页面更容易让访问者失去兴趣的了，更快的加载时间可以极大地提高页面的跳转率和转化率。

一项又一项研究表明，网站访问者不愿意等待页面加载。加载时间只有10秒，反弹率提高123%．

当页面快速加载时，客户也更愿意进行转换。一个前兆研究显示页面加载时间从5秒减少到1秒，转化率增加了2.5倍。对于电子商务来说，速度更加重要，每增加一秒的加载时间，转化率就会下降0.3%。

加载速度更快的网站更适合SEO

一个快速加载的网站可以帮助你的搜索引擎优化(SEO)。到2021年，谷歌的算法更新增加了页面的经验其中包括多个页面速度测量，将其作为排名因素。用户在你网站上的行为也会影响你的排名，特别是跳出率。

较小的文件有助于节省存储空间

图像文件的压缩值越小，你需要支付的空间就越小。

你只有这么多的磁盘空间在服务器上，您的网站，并取决于您的网站托管在美国，存储成本可能会很高。不仅仅是媒体需要装进你的存储空间。您可以使用来自CMS、JavaScript、CSS和数据库的主题来保持站点的运行。

在哪里可以创建和转换WebP图像

要在你的网站上使用WebP图像，你需要一个CMS -像Webflow -支持WebP。然后，您可以在图形软件中创建新的图像，该软件允许您将文件保存为WebP，也可以将计算机上或CMS中的现有图像进行转换。

用图形软件创建WebP图像

您可以使用许多不同的图形程序来创建WebP文件，包括Photoshop，谷歌图片，搅拌机等等。谷歌有一个免费插件也支持早期版本的Photoshop的WebP。

当在支持WebP的图形程序中保存完成的图像时，当您选择“保存为web”时，WebP将是提供的下拉选项之一。

使用谷歌的软件将图像转换为WebP

如果你对技术有一定的了解，你可以下载谷歌的WebP预编译cwebp转换工具，并使用它将图像转换到您的计算机上的WebP。你也可以安装谷歌的libwebpAPI来编码和解码WebP文件。这两个网站都包含使用这些工具压缩图像的详细说明。

用Webflow转换CMS中的现有图像

您还可以通过资产管理器将已经在您的Webflow CMS中的图像转换为WebP。Webflow的WebP图像转换工具将转换和替换图像你已经在使用WebP了。本视频逐步说明如何将图像转换为Webflow中的WebP。

你还可以做什么来优化你的网站

图像优化只是一种方法优化网站性能．延迟加载图片，改进字体加载，预加载链接都可以提高网站的性能。

建立一个在手机和其他设备上都能很好地运行的响应性网站。请确保您的图像的大小在手机上加载良好设备，特别是移动浏览器更可能以较慢的连接速度工作。为你的网站选择主机，不仅快，而且可靠。

WebP只是一个工具，你可以添加到你的网站建设专业知识。为网络构建最终是关于制作一个优秀的用户体验．你可以通过优化你的网站，让它加载得非常快，毫不费力，用户甚至不会去想它。