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，以观看此演示！
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。
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性能审核的示例结果。
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提取网址如下所示：
- is your Cloudinary cloud name. Example: demo 是您的Cloudinary 云名称 。 示例：演示
- is a list of Cloudinary image transformations separated by commas. Example: 是用逗号分隔的Cloudinary图像转换的列表。 例：
specifies image quality that Cloudinary will deliver. is the lowest quality; is the highest. tells Cloudinary to calculate the optimal image quality automatically.
指定Cloudinary将提供的图像质量 。 是最低质量； 是最高的。 告诉Cloudinary自动计算最佳图像质量。
specifies image format. Cloudinary can deliver images in WebP and JPEG-XR formats on supported browsers. tells Cloudinary to choose an image format automatically.
指定图像格式 。 Cloudinary可以在支持的浏览器上以WebP和JPEG-XR格式交付图像。 告诉Cloudinary自动选择图像格式。
- is the original image URL. Example: 是原始图像URL。 例：
Here's an example of a complete Cloudinary fetch URL:
这是完整的Cloudinary提取URL的示例：
将图片网址替换为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。 例：
- Replace the image URL on line 25 of index.html with the Cloudinary fetch URL. 用Cloudinary提取URL替换index.html第25行上的图像URL。
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 with . Make sure to change to your .
现在，使用在添加所有图像链接。 确保将更改为您的 。
✔︎入住 (✔︎ Check-in)
The edited part of your file should now look like this:
现在， 文件的编辑部分应如下所示：
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
灯塔性能审核：之后
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）最佳压缩了图像，并且页面正在提供下一代图像格式。 无需弄乱任何配置或使用任何构建工具。
- Digital media management guides 数字媒体管理指南
- Quality optimization interactive demo 质量优化互动演示
- Compress images without losing quality 压缩图像而不损失质量