webp 图片格式_WebP图像格式

webp 图片格式

• Introduction

  介绍

• How much smaller?

  小多少？

• Generating WebP images

  生成WebP图像

• Browsers support

  浏览器支持

• How can you use WebP today?

  您今天如何使用WebP？

介绍 (Introduction)

WebP is an Open Source image format developed at Google, which promises to generate images smaller in size compared to JPG and PNG formats, while generating better looking images.

WebP是Google开发的一种开源图像格式，有望生成比JPG和PNG格式更小的图像，同时生成更好的图像。

WebP supports transparency, like PNG and GIF images.

WebP支持透明性 ，例如PNG和GIF图像。

WebP supports animations, like GIF images

WebP支持动画 ，例如GIF图像

And, using WebP you can set the quality ratio of your images, so you decide if you want to get better quality or a smaller size (like it happens in JPG images).

而且，使用WebP可以设置图像的质量比率，因此可以决定是要获得更好的质量还是缩小尺寸(例如JPG图像中的情况)。

So WebP can do all GIF, JPG and PNG images can do, in a single format, and generate smaller images. Sounds like a deal.

因此， WebP可以用一种格式完成所有GIF，JPG和PNG图像可以完成的操作 ，并生成较小的图像 。 听起来不错。

If you want to compare how images look in the various formats, here’s a great gallery by Google.

如果您想比较图像在各种格式下的外观， 这是Google的一个不错的图库 。

WebP is not new, it’s been around for several years now.

WebP并不新鲜 ，它已经问世了几年。

小多少？ (How much smaller?)

The premise of generating smaller images is very interesting, especially when you consider than most of a web page size is determined by the amount and size of the image assets the user should download.

生成较小图像的前提非常有趣，尤其是当您考虑到大多数网页的大小取决于用户应下载的图像资产的数量和大小时。

Google published a comparative study on the results of 1 million images with this result:

Google发布了一百万张图像结果的比较研究 ，结果如下：

WebP achieves overall higher compression than either JPEG or JPEG 2000. Gains in file size minimization are particularly high for smaller images which are the most common ones found on the web.

WebP的总体压缩率比JPEG或JPEG 2000高。对于较小的图像(在网络上最常见的图像)，最小化文件大小的收益特别高。

You should experiment with the kind of images you intend to serve, and form your opinion based on that.

您应该尝试使用打算提供的图像，并据此形成您的意见。

In my tests, lossless compression compared to PNG generates WebP images 50% smaller. PNG reaches that file sizes only when using lossy compression.

在我的测试中，与PNG相比，无损压缩生成的WebP图像小50％。 仅当使用有损压缩时，PNG才能达到该文件大小。

生成WebP图像 (Generating WebP images)

All modern graphical and image editing tools let you export to .webp files.

所有现代的图形和图像编辑工具.webp让您导出到.webp文件。

Command-line tools also exist to convert images to WebP directly. Google provides a set of tools for this.

还存在命令行工具，可以将图像直接转换为WebP。 Google为此提供了一组工具 。

cwebp is the main command line utility to convert any image to .webp, use it with

cwebp是将任何图像转换为.webp的主要命令行实用程序，可与

cwebp image.png -o image.webp

Check out all the options using cwebp -longhelp.

使用cwebp -longhelp检查所有选项。

浏览器支持 (Browsers support)

WebP is currently supported by

目前支持WebP

• Chrome
  Chrome
• Opera
  歌剧
• Opera Mini
  歌剧迷你
• UC Browser
  UC浏览器
• Samsung Internet
  三星上网

However, only Chrome for Desktop and Opera 19+ implement all the features of WebP, which are:

但是，只有Chrome for Desktop和Opera 19+才能实现WebP的所有功能，这些功能包括：

• lossy compression
  有损压缩
• lossless compression
  无损压缩
• transparency
  透明度
• animation
  动画

Other browsers only implement a subset. Safari and IE do not support WebP at all, and there are no signs of WebP being implemented any time soon in those browsers.

其他浏览器仅实现子集。 Safari和IE根本不支持WebP，并且也没有迹象表明这些浏览器很快会实现WebP。

But Firefox supports WebP since version 65 (Jan 2019) and Edge since version 18.

但是Firefox从65版本(2019年1月)开始支持WebP，从18版本开始支持Edge。

So if we can serve those users an optimized image, to speed up serving them and consume less bandwidth, it’s great. But check if it actually reduces your images size.

因此，如果我们可以为这些用户提供优化的图像，以加快为他们提供服务并消耗更少的带宽，那就太好了。 但是请检查它是否确实减小了图像尺寸。

Check with your JPG/PNG image optimization tooling results, and see if adding an additional layer of complexity introduced by WebP is useful or not.

检查您的JPG / PNG图像优化工具的结果，看看添加WebP引入的另一层复杂性是否有用。

您今天如何使用WebP？ (How can you use WebP today?)

There are a few different ways to do so.

有几种不同的方法可以这样做。

You can use a server-level mechanism that serves WebP images instead of JPG and PNG when the HTTP_ACCEPT request header contains image/webp.

当HTTP_ACCEPT请求标头包含image/webp时，可以使用提供WebP图像而不是JPG和PNG的服务器级机制。

The first is the most convenient, as completely transparent to you and to your web pages.

第一个是最方便的，因为它对您和您的网页完全透明。

Another option is to use Modernizr and check the Modernizr.webp setting.

另一个选项是使用Modernizr并检查Modernizr.webp设置。

If you don’t need to support Internet Explorer, a very convenient way is to use the <picture> tag, which is now supported by all the major browsers except Opera Mini and IE (all versions).

如果不需要支持Internet Explorer，一种非常方便的方法是使用<picture>标记，除Opera Mini和IE(所有版本)外，所有主流浏览器现在都支持该标记。

The <picture> tag is generally used for responsive images, but we can use it for WebP too, as this tutorial from HTML5 Rocks explains.

<picture>标签通常用于响应图像，但是我们也可以将其用于WebP，如HTML5 Rocks的本教程所述 。

You can specify a list of images, and they will be used in order, so in the next example, browsers that support WebP will use the first image, and fallback to JPG if not:

您可以指定图像列表，并且将按顺序使用它们，因此在下一个示例中，支持WebP的浏览器将使用第一个图像，如果不使用，则回退为JPG：

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

翻译自: https://flaviocopes.com/webp/

webp 图片格式