只需使用Cloudinary的URL API更改图像的URL，即可优化和提供下一代图像

最新推荐文章于 2024-09-25 08:25:38 发布

culiu9261

最新推荐文章于 2024-09-25 08:25:38 发布

阅读量869

点赞数

文章标签： java python 计算机视觉 html 深度学习

原文链接：https://scotch.io/tutorials/optimize-serve-next-gen-images-just-by-changing-the-images-url-with-cloudinarys-url-api

版权

Learn to use Cloudinary's fetch URL API to optimize images and serve them in next-gen formats. Cloudinary can help prioritize images and performance. Scotch.io uses Cloudinary to serve all images and it helped Scotch reach 1 second page load times.

了解如何使用Cloudinary的提取网址API优化图像并以下一代格式提供图像。 Cloudinary可以帮助确定图像和性能的优先级。 Scotch.io使用Cloudinary提供所有图像，并帮助Scotch达到了1秒的页面加载时间。

GLITCH CODELAB: https://glitch.com/edit/#!/codelab-cloudinary

故障代码实验室： https ://glitch.com/edit/#!/codelab-cloudinary

Check out the above Glitch to see this demo in action!

查看上面的Glitch，以观看此演示！

获取免费的Cloudinary帐户 ( Get a free Cloudinary account )

First, sign up for a free Cloudinary account.

首先，注册一个免费的Cloudinary帐户。

Remember to set a custom cloud name at the end of the registration form. Cloudinary uses your cloud name to build the URLs it will serve your images from.

切记在注册表格的末尾设置自定义云名称。 Cloudinary使用您的云名称来构建将用于提供图像的URL。

在优化之前测量页面加载时间 ( Measure page load time before optimization )

Use Lighthouse to measure page load time before optimization.

在优化之前，使用Lighthouse来衡量页面加载时间。

To preview a Glitch project in its own tab, press Share in the bottom-right corner and copy the Live App link into a new Chrome tab.

要在自己的标签中预览Glitch项目，请按右下角的共享，然后将Live App链接复制到新的Chrome标签中。

In Chrome DevTools, on the Audits tab, select Performance.
在Chrome DevTools中，在审核标签上，选择性能。
Click Run Audits.
单击运行审核 。
When the audit completes, see the Opportunities section.Before optimization: Example results of a Lighthouse performance audit.
审核完成后，请参阅“ 机会”部分 。优化之前：Lighthouse性能审核的示例结果。

You'll resolve these opportunities in the rest of this codelab by optimizing the images with Cloudinary.

使用Cloudinary优化图像 ( Optimize images with Cloudinary )

To optimize the three images in the starting code, you'll create Cloudinary fetch URLs for each one.

为了优化起始代码中的三个图像，您将为每个图像创建Cloudinary提取URL。

A Cloudinary fetch URL looks like this:

Cloudinary提取网址如下所示：

https://res.cloudinary.com/<cloud_name>/image/fetch/<transformations>/<remote_image_url>

<cloud_name> is your Cloudinary cloud name. Example: demo
<cloud_name>是您的Cloudinary 云名称。示例：演示

demo

<transformations> is a list of Cloudinary image transformations separated by commas. Example:
<transformations>是用逗号分隔的Cloudinary图像转换的列表。例：

q_auto,f_auto

q specifies image quality that Cloudinary will deliver. q_1 is the lowest quality; q_100 is the highest. q_auto tells Cloudinary to calculate the optimal image quality automatically.

q指定Cloudinary将提供的图像质量。 q_1是最低质量； q_100是最高的。 q_auto告诉Cloudinary自动计算最佳图像质量。

f specifies image format. Cloudinary can deliver images in WebP and JPEG-XR formats on supported browsers. f_auto tells Cloudinary to choose an image format automatically.

f指定图像格式。 Cloudinary可以在支持的浏览器上以WebP和JPEG-XR格式交付图像。 f_auto告诉Cloudinary自动选择图像格式。

<remote_image_url> is the original image URL. Example:
<remote_image_url>是原始图像URL。例：

https://codelab-cloudinary.glitch.me/images/flower1.png

Here's an example of a complete Cloudinary fetch URL:

这是完整的Cloudinary提取URL的示例：

https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png

将图片网址替换为Cloudinary提取网址 (Replace image URLs with Cloudinary fetch URLs)

In this step, you'll edit the image URL on line 25 of index.html.

在此步骤中，您将在index.html的第25行上编辑图像URL。

Click Remix to Edit in the top-right corner to make the project editable.

单击右上角的Remix to Edit以使项目可编辑。

Create a Cloudinary fetch URL:Replace <cloud_name> with your Cloudinary cloud name.Replace with q_auto,f_auto.Replace <remote_image_url> with the original image URL. Example:
创建一个Cloudinary提取URL：用您的Cloudinary云名称替换<cloud_name>。用q_auto，f_auto替换。将<remote_image_url>替换为原始图像URL。例：

https://res.cloudinary.com/<cloud_name>/image/fetch/<transformations>/<remote_image_url>
https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png

Replace the image URL on line 25 of index.html with the Cloudinary fetch URL.
用Cloudinary提取URL替换index.html第25行上的图像URL。

<div class="wrapper">
  <img src="https://codelab-cloudinary.glitch.me/images/flower1.png"/>
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png"/>
  <div class="price">Violet bouquet- $9</div>
</div>

This decreases image size by more than 90%.

这样可以将图像尺寸减小90％以上。

The photo on the right is 92.39% smaller than the one on the left, yet would probably look identical to the average user.

右边的照片比左边的照片小92.39％，但看起来可能与普通用户相同。

Now prepend all image links in the index.html with https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/. Make sure to change demo to your cloud_name.

现在，使用https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/在index.html添加所有图像链接。确保将demo更改为您的cloud_name 。

✔︎入住 (✔︎ Check-in)

The edited part of your index.html file should now look like this:

现在， index.html文件的编辑部分应如下所示：

<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png" alt="Yellow bouquet" />
  <div class="price">Yellow bouquet - $9</div>
</div>
<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower2.jpg" alt="Cream bouquet" />
  <div class="price">Cream bouquet - $5</div>
</div>
<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower3.png" alt="Light pink" />
  <div class="price">Light pink bouquet - $6</div>
</div>

测量优化后的页面加载时间 ( Measure page load time after optimization )

These are the results of using Cloudinary to optimize images:

这些是使用Cloudinary优化图像的结果：

Run the Lighthouse performance audit again to see for yourself!

再次运行Lighthouse性能审核，亲自体验一下！

Lighthouse performance audit: Before

灯塔性能审核：之前

Lighthouse performance audit: After

灯塔性能审核：之后

The Lighthouse performance audit should have a perfect score. In the example above, First Meaningful Paint is down by an impressive 2.5 seconds.

You have used Cloud (cloudinary) to compress the images optimally, and your page is serving next-gen image formats. Without having to mess with any configurations or using any build tools.

您已经使用Cloud（cloudinary）最佳压缩了图像，并且页面正在提供下一代图像格式。无需弄乱任何配置或使用任何构建工具。