glide 加载webp

by Carmen Chung

通过钟Car

如何使您的网站通过WebP图像快速加载闪电 (How to make your website load lightning fast with WebP images)

Ever felt like your website takes forever to load?

是否曾经觉得您的网站需要永久加载？

The good news is that you’re not alone. A report published by Google found that 70% of the pages they analysed took more than 10 seconds to load — for just one page.

好消息是您并不孤单。 谷歌发布的一份报告发现，他们分析的页面中有70％的页面加载时间超过10秒-仅加载了一页。

The bad news is…well, that’s bad. That same report found that 53% of visitors will leave a webpage on mobile if it takes longer than three seconds to load. That means that every second your website fails to load, a potential customer or client is dropping off.

坏消息是……好，那是坏消息。 该报告还发现，如果加载时间超过三秒钟，则有53％的访问者会在移动设备上留下网页。 这意味着您的网站每秒无法加载，潜在的客户或客户流失了。

Fortunately, there is still some good news left: the WebP file format can compress your images to a size even smaller than a JPG file, with almost no reduction in quality, making your website load more than twice as fast. And best of all, with less than 0.1% of websites optimising their images with WebP (more on why later), you can gain a real advantage over your competitors.

幸运的是，还有一些好消息：WebP文件格式可以将您的图像压缩到比JPG文件还要小的大小，而质量却几乎没有下降，这使您的网站加载速度快了两倍。 最重要的是，只有不到0.1％的网站使用WebP优化图像(更多有关稍后的原因)，您可以获得与竞争对手相比的真正优势。

再备份一遍：什么是WebP？ (Back it up a second: what is WebP?)

WebP is an image format that provides lossless and lossy compression for images on the Internet using predictive coding to encode an image. It was introduced in 2010, and is currently being developed and supported by Google. But it’s not just Google that is using WebP: Pinterest, Facebook (on Android devices), and YouTube’s thumbnails all use WebP images, as well as other big players.

WebP是一种图像格式，它使用预测编码对图像进行编码，从而为Internet上的图像提供无损和有损压缩。 它于2010年推出，目前由Google开发和支持。 但是使用WebP的不仅是Google：Pinterest，Facebook(在Android设备上)和YouTube的缩略图都使用WebP图像以及其他大型播放器。

Google claims that a WebP lossless image is 26% smaller than its PNG equivalent, and that a WebP lossy image is 25–34% smaller than its JPG equivalent (as of Feb. 2019).

Google声称 ，WebP无损图像比其PNG图像小26％，WebP有损图像比JPG图像小25–34％(截至2019年2月)。

Let’s take WebP images for a test. When I ran my JPG image through the WebP converter, I got the following results:

让我们以WebP图像进行测试。 通过WebP转换器运行JPG图像时，得到以下结果：

• JPG image (already compressed): 279 KB

  JPG图片(已压缩)： 279 KB

• WebP at 100% lossless: 451 KB (yes, this is higher — more on why below!)

  WebP的100％无损： 451 KB (是的，这是更高的-有关以下原因的更多信息！)

• WebP at 80% lossy: 156 KB (56% of the original size)

  WebP的80％有损： 156 KB (原始大小的56％)

(Above photos too small to see the difference? If you want to see the 80% lossy WebP image live in action, head on over to my website.)

(以上照片太小了，看不到它们之间的区别吗？如果您希望实时观看80％有损WebP图像的实际情况，请转到我的网站 。)

So you’re probably wondering why the lossless WebP image is actually bigger than the original JPG. This is because my original image was actually a lossless PNG file, which I then converted and ran through an image compressor to produce a smaller JPG file. During this compression process, the converter adds what is known as artifacts.

因此，您可能想知道为什么无损WebP图像实际上比原始JPG 更大 。 这是因为我的原始图像实际上是无损PNG文件，然后我对其进行了转换并通过图像压缩器运行以生成较小的JPG文件。 在此压缩过程中，转换器将添加所谓的工件 。

When you reverse the process and try to convert the lossy JPG back to a lossless file format (like WebP), the algorithm will strip out unnecessary metadata (good) — but it will also encode each artifact it finds to reproduce it pixel-perfect (bad), often resulting in a file size increase, but no visual benefits. As a result, the final file will end up even larger than if you had converted it directly from the original PNG file!

当您逆转该过程并尝试将有损JPG转换回无损文件格式(如WebP)时，该算法将去除不必要的元数据(良好)，但也会对找到的每个伪像进行编码，从而将其完美地再现为像素(错误)，通常会导致文件大小增加，但没有视觉效果。 结果，最终文件将比直接从原始PNG文件转换而来的文件大得多！

Pro tip: if your original image is a lossless file format (like PNG, BMP, or Raw), convert it straight to a WebP image. Do not convert it to a lossy file format (like JPG or GIF) first.

专家提示：如果您的原始图像是无损文件格式(例如PNG，BMP或Raw)，请直接将其转换为WebP图像。 请勿首先将其转换为有损文件格式(例如JPG或GIF)。

Lossy compression (the one on the right above) creates images that are approximately the same as the original: but because of the compression, the size is smaller (and quality sometimes suffers — although in this case, it’s barely noticeable). In addition, lossy images lose their quality irreversibly — you can’t go back once you’ve converted it to a lossy format, which means that if you compress the same lossy image over and over, each time, the quality deteriorates.

有损压缩(右上方的压缩)会生成与原始图像大致相同的图像：但是由于压缩，尺寸会变小(质量有时会受到影响，尽管在这种情况下几乎不引人注意)。 此外，有损图像会不可避免地丢失其质量-将其转换为有损格式后就无法返回，这意味着，如果一遍又一遍地压缩相同的有损图像，则质量会下降。

Pro tip: if you compress to lossy formats, you should always compress the original image. Don’t compress already compressed files over and over, or you will compound the quality deterioration.

专家提示：如果压缩为有损格式，则应始终压缩原始图像。 请勿一遍又一遍地压缩已压缩的文件，否则会降低质量。

我不相信。 告诉我结果。 (I’m not convinced. Show me the results.)

I placed the three images above on standalone test pages, and put all three pages simultaneously under siege (a benchmark utility testing tool I’ll talk about more in another post), hitting my test pages with around 25 simultaneous users to see how quickly their response times would be.

我将上面的三张图片放在独立的测试页上，并同时将所有三页都围困(一种基准实用程序测试工具，我将在另一篇文章中详细介绍)，同时约有25位用户同时点击我的测试页，以查看他们的测试速度响应时间将是。

Unsurprisingly, the 80% lossy WebP file (i.e. the smallest one) was the fastest, clocking in with an average response time of 5.33 seconds to fully load; the JPG then took an average of 8.34 seconds; and the 100% lossless WebP file took an average of 12.28 seconds.

不足为奇的是，有损80％的WebP文件(即最小的WebP文件)是最快的，其完全加载的平均响应时间为5.33秒 。 JPG然后平均花费了8.34秒 ; 100％无损的WebP文件平均花费了12.28秒 。

So the 80% lossy WebP file was 2.3 times faster than the 100% lossless WebP file, and 1.56 times faster than the JPG.

因此80％有损WebP文件比100％无损WebP文件快2.3倍，比JPG快1.56倍 。

For websites that are even more image heavy (such as photography websites, blogs or visual portfolios), I would expect that the speed load difference would be even greater.

对于图像质量更高的网站(例如摄影网站，博客或视觉作品集)，我希望速度负载差异会更大。

那么为什么每个人都没有为他们的图像使用WebP文件格式？ (Why isn’t everyone using the WebP file format for their images then?)

As of February 2019, browser support for WebP files is close to 72%, with Chrome, Firefox, Opera and the latest Edge version supporting it. Unfortunately, Safari and IE don’t (yet) support WebP files, so you still need to have a fallback for those browsers — more on that below.

截至2019年2月， 浏览器对WebP文件的支持接近72％，其中支持Chrome，Firefox，Opera和最新的Edge版本。 不幸的是，Safari和IE(目前)还不支持WebP文件，因此您仍需要对这些浏览器进行后备，有关更多信息，请参见下文。

好吧，我很感兴趣 如何实施WebP？ (Okay, I’m interested. How do I implement WebP?)

First, you’ll need to convert your images to a WebP format. There are a few ways you can do this, including easy-to-use converters like this one or this one. For those who use Photoshop, you can also convert your image using a WebP plugin.

首先，您需要将图像转换为WebP格式。 您可以通过几种方法来做到这一点，包括易于使用的转换器(例如this或this) 。 对于使用Photoshop的用户，您还可以使用WebP插件转换图像。

Alternatively, you can download Google’s WebP converter here, which converts JPGs and PNGs to WebP, and WebP files to PNG or PPM. I prefer this option, because I trust the quality of Google’s software conversion more, and I can specify precise options with each conversion.

或者，您可以在此处下载Google的WebP转换器，该转换器将JPG和PNG转换为WebP，并将WebP文件转换为PNG或PPM。 我更喜欢此选项，因为我更信任Google软件转换的质量，并且每次转换都可以指定精确的选项。

For example, to convert a PNG file to 80% lossy WebP, you can runcwebp -q 80 mypicture.png -o mypicture.webp in Terminal/Command Line. Straight forward instructions on how to convert using this option can be found here.

例如，要将PNG文件转换为80％有损WebP，可以在终端/命令行中运行cwebp -q 80 mypicture.png -o mypicture.webp 。 有关如何使用此选项进行转换的简单说明，请参见此处 。

Don’t forget that once you’ve converted your image, to keep your original JPG or PNG file, because you’ll need that as a fallback file in case the user’s browser does not support WebP.

别忘了转换完图像后，要保留原始的JPG或PNG文件，因为如果用户的浏览器不支持WebP，则需要将其作为备用文件。

我有我的WebP图像。 怎么办？ (I have my WebP images. Now what?)

Let’s just assume that you want to show your image in the normal HTML way (rather than inside a CSS class, which I’ll discuss later). To do this, use the following code (obviously replace references to mypicture with the name of your image file):

让我们假设您要以普通HTML方式显示图像(而不是在CSS类中显示，稍后再讨论)。 为此，请使用以下代码(将对mypicture引用替换为图像文件的名称)：

HTML:

HTML:

<picture>

<source srcset="images/mypicture.webp" type="image/webp">

<source srcset="images/mypicture.jpg" type="image/jpeg">

<img alt="This is my face" src="data:images/mypicture.jpg">

</picture>

What is happening here is that we’re first checking to see if the browser supports the <picture> tag. If it does, we’ll serve up the WebP image; if it doesn’t, we will serve up the JPG image. If the browser doesn’t even support the <;picture> tag, then we’ll have a final fallback of the normal <img> tag.

这里发生的是我们首先检查浏览器是否支持<pictu re>标记。 如果是这样，我们将提供WebP图像； 如果没有，我们将提供JPG图像。 如果浏览器甚至不支承实t the < ;图片>标记，那么我们将有一个最终的后备the正常<img>标签。

大。 但是，如果我在CSS类中有图像，例如背景图像url，该怎么办？ (Great. But what if I have an image inside a CSS class, like a background image url?)

This requires a bit more work.

这需要更多的工作。

First, you’ll need to know when a user’s browser can’t handle your WebP files, so that you can load the back up JPG or PNG files (which will be in another CSS class) instead.

首先，您需要知道用户的浏览器何时无法处理您的WebP文件，以便可以加载备份的JPG或PNG文件(将在另一个CSS类中)。

In order to do this, I use Modernizr to help me detect what sort of browser the user is using (and therefore what features their browser supports). You can go to their website, click on “WebP” and then click on “Build”.

为此，我使用Modernizr来帮助我检测用户正在使用哪种浏览器(以及他们的浏览器支持哪些功能)。 您可以转到他们的网站 ，单击“ WebP”，然后单击“构建”。

A popup will then appear — hit “Download” next to the Build command.

然后将出现一个弹出窗口-单击“构建”命令旁边的“下载”。

After that, a file namedmodernizr-custom.js will be downloaded — move that file into your website directory (let’s say your root folder). In order to call and trigger Modernizr, put this at the bottom of the HTML page where you are displaying your WebP files:

之后，将下载一个名为modernizr-custom.js的文件-将其移至您的网站目录(假设您的根文件夹)。 为了调用和触发Modernizr，请将其放在显示WebP文件HTML页面的底部：

HTML:

HTML:

// First, refer to the location of your downloaded Modernizr script. I have just left mine in the root folder.

<script src="modernizr-custom.js"></script>

// Second, trigger Modernizr to detect WebP compatibility.

<script>

Modernizr.on('webp', function (result) {

if (result) {

// supported

} else {

// not-supported

}

});

</script>

Modernizr will now automatically apply either a webp or no-webp class to the HTML element (in my example, the container holding the image), depending on whether it detects browser support for WebP or not. That means you can specify which images you want within your CSS class, by targeting either of those classes like this:

现在，Modernizr将自动将webp或no-webp类应用于HTML元素(在我的示例中为包含图像的容器)，具体取决于它是否检测到浏览器是否支持WebP。 这意味着您可以通过定位以下两个类之一来指定CSS类中所需的图像：

CSS:

CSS:

.no-webp .container {     background-image: url("mypicture.jpg"); }

.webp .container {     background-image: url("mypicture.webp"); }

如果用户未启用Java脚本会怎样？ (What happens if the user doesn’t have Javascript enabled?)

Ugh! Why would they do that? (I’m looking at you, Internet Explorer!)

啊! 他们为什么要那样做？ (我在看着你，Internet Explorer！)

Modernizr does rely on Javascript being enabled on your user’s browser, so to get around this, you will need to add an HTML class at the top of the page, say <html class=”no-js”>.

Modernizr确实依赖于在用户的浏览器中启用Javascript，因此，要解决此问题，您将需要在页面顶部添加HTML类，例如<html class=”no-j s”>。

Then, add Javascript code that will successfully remove this class if Javascript is enabled:

然后，添加Java代码，如果启用了Java，它将成功删除此类：

HTML:

HTML:

<script>     document.documentElement.classList.remove("no-js"); </script>

If Javascript is not enabled, then the class will automatically be applied to all the HTML elements on your page — and you can create a no-js class with the JPG image as the background image:

如果未启用Javascript，则该类将自动应用于页面上的所有HTML元素-您可以使用JPG图像作为背景图像来创建no-js类：

CSS:

CSS:

.no-js .container {     background-image: url("mypicture.jpg"); }

结论 (Conclusion)

WebP images are relatively easy to implement when you are simply displaying images in your HTML code (you won’t need Modernizr or the no-js class), but become slightly more time-consuming when you use images within your CSS (say, as background images).

当您仅在HTML代码中显示图像(不需要Modernizr或no-js类)时，WebP图像相对容易实现，但是在CSS中使用图像时，WebP图像会变得更加耗时(例如，背景图片)。

Keep in mind that how long your website takes to load has a direct impact on the amount of time your visitors will spend on your site— and therefore, affect your lead conversion rate— so the time you spend in making the switch to WebP images is worth it, for the extra time your users will stay on your website.

请记住，您的网站加载需要多长时间直接影响访问者在网站上花费的时间，从而影响您的潜在客户转化率，因此，您花费在切换到WebP图片上的时间就是值得的是，您的用户将有更多时间留在您的网站上。

If you implement WebP images, please let me know in the comments — I’d love to hear how much faster your website is!

如果您实施WebP图像，请在评论中让我知道—我很想听听您的网站快多少！

谢谢阅读！ 如果您喜欢这篇文章，请随时按几次拍手按钮(????)以帮助其他人找到它。 (Thanks for reading! If you enjoyed this article, feel free to hit that clap button a few times ( ????) to help others find it.)

另外， 在此处 查看我的免费资源 ，以及可复制以在网站上实现WebP图像的所有代码(和有用的代码注释)。 ？ (Also, check out my free resources here with all the code (and helpful code comments) that you can copy to implement WebP images on your website. ?)

翻译自: https://www.freecodecamp.org/news/make-your-website-load-lightning-fast-with-webp-images-cf55c98ac0a2/

glide 加载webp