在 Vue 中开始提供优化后的图像

图像已成为网站有效性的关键因素。它们胜过千言万语，吸引注意力并激发情感。

但是，网站性能也是大多数网站面临的一个日益严重的问题。而图像则是许多网站性能问题的核心。根据 HTTP Archive 的数据，图像至少占网站总负载量的 50%。

如果您曾经尝试减小图像的大小，那么您就会知道这个过程有多么痛苦。优化不当的图像最终可能变得模糊或像素化。

值得庆幸的是，如今我们有很多专为此目的而生的外部服务。我们将讨论 ImageEngine 图像 CDN 以及如何在 Vue.js 中实现它。但首先，让我们了解一下 CDN 和 ImageEngine。

什么是图像 CDN？

内容分发网络 (CDN) 是一个全球服务器网络，它通过使用最靠近用户的节点来优化网站性能，从而更快地交付资产。一个图像 CDN 在从 CDN 提供图像之前添加实时图像优化。图像 CDN 会降低图像负载，并立即从网络边缘发送图像。结果是页面加载速度更快，从而提升 SEO 排名和用户体验。

什么是 ImageEngine？

ImageEngine 是一个带有自动实时图像优化的图像 CDN。ImageEngine 脱颖而出的原因在于，它会分析请求，根据设备或浏览器的功能动态提供以最低字节大小呈现高质量视觉效果的图像。ImageEngine 是唯一一个使用移动设备检测的图像 CDN，它会根据请求设备或浏览器的功能对图像进行专门优化。

使用 ImageEngine，您无需担心使用奇特语法的 URL 参数或 JavaScript 库。相反，您只需在图像 URL 前添加 ImageEngine 传送地址，该服务就会自动检测移动设备，相应地优化图像，并提供尽可能高效且高质量的图像。

我们将向您展示如何在 Vue.js 应用程序中使用 ImageEngine CDN 来提供优化后的图像。最棒的是，您无需重新上传图像即可使用此服务。您只需要将 ImageEngine 服务指向图像的现有存储位置（或者，就像 ImageEngine 所说的“源”）。

将 ImageEngine 集成到您的网站中以提高网站性能

如果您想一起学习，请在继续之前注册免费试用帐户。注册试用帐户后，您将获得一个控制面板，您可以在其中进一步配置 ImageEngine 以适合您的网站或应用程序。

我已经构建了一个演示应用程序来演示在应用程序级别集成是多么轻松。只需几个简单的步骤就可以开始。

步骤 1 – 将 ImageEngine 指向原始图像

在深入代码之前，您需要将 ImageEngine 的“引擎”指向存储图像的主机。这可以是您的网站、Amazon S3 或 Google Cloud Storage。

正如您在上面的仪表板配置屏幕截图中所看到的，我们添加了一个源（名为“default”），其主机指向我们的演示沙箱 Vue 应用程序 https://4fzq3.csb.app/

我们无需将图像重新上传到 CDN 或其他任何地方。如果您查看演示项目的结构，您会发现所有图片都位于 public/images 文件夹中

ImageEngine 会自动获取 public/images 文件夹中的这些图片，对其进行优化，并从其自己的 CDN 提供优化后的图像。通过我们将向您展示的 Vue 组件，我们也不需要在代码中更改 URL。

步骤 2 – 在 Vue 应用程序中代理图像请求

让我们从 Vue.js 实现开始。您有两个实现选项。两者都涉及添加 ImageEngine 提供的传送地址。您的传送地址应以 .imgeng.in 结尾，因此请将其复制并准备好使用。

拥有传送地址后，我们可以继续进行代码实现。我们的示例传送地址是 https://c4ltipq2.cdn.imgeng.in/

沙箱中的演示应用程序

选项 1：添加图像标签前缀

要将图像请求发送到 ImageEngine，您需要在现有图像 src 路径前添加新的传送地址（可在您帐户的仪表板中找到）。

<img :src="imgengHostConst + '/images/pic_2.jpg'" />

选项 2：使用 ImageEngine Vue 组件（推荐）

我们需要安装 npm 包 @imageengine/vue 并将其添加为依赖项。

在终端中，输入

npm i @imageengine/vue

您已准备好一切，可以开始编写代码了。

您需要从 npm 包中导入 ImageEngineProvider 组件，并将传送地址作为 deliveryAddress 属性传递，然后将其包裹在您的应用程序或图像组件周围。

<ImageEngineProvider deliveryAddress="https://c4ltipq2.cdn.imgeng.in/">
  …APP…
</ImageEngineProvider>

将所有 HTML 图像元素替换为 ImageComponent 组件。

例如

<img src="/images/pic_2.jpg"/>

<!-- Changes to -->
<ImageComponent src="/images/pic_2.jpg" />

图像组件只需要传递 src 属性。可选地，您可以传递 srcSet 和 directives 属性，这些属性可以让您更好地控制图像优化。使用指令，您可以设置输出格式、宽度、高度、压缩等。

使用 ImageEngineProvider 组件后，您的图像将通过 ImageEngine CDN 进行优化和提供。

您可以在 npm 包文档页面上查看可以传递的所有图像指令、属性和格式，这些属性会影响压缩和优化。

下表显示了 ImageEngine 为我们的示例应用程序提供的图像格式转换和图像负载量减少情况

图像名称	原始格式	使用 ImageEngine 后的格式	原始大小	使用 ImageEngine 后的大小	负载量减少
pic_2.jpg	JPEG	WebP	4.8 MB	570 kB	88%
pic_2.jpg	JPEG	WebP	3.3 MB	141 kB	96%
pic_1_variation_1.jpg	JPEG	WebP	2.8 MB	72 kB	97%

步骤 3（可选）。最佳实践和自定义

要充分利用 ImageEngine，请考虑阅读其最佳实践列表。如果您需要调整图像（调整大小、裁剪等），ImageEngine 允许您通过指令应用操作。

使用指令属性的代码示例

<ImageComponent
  src="images/pic_2.jpg"
  :directives="{
    outputFormat: 'webp',
    rotate: 45
  }"
/>

使用指令属性，我们指定了 WebP 的输出格式，并将图像旋转了 45 度。您可以组合指令，在需要的时候使用它们，在需要的地方使用它们。它完全是动态的。

在大多数情况下，ImageEngine 的自动默认设置会生成令人印象深刻的结果，因此通常不需要指令，除非有些自定义需求。

结论

当你对比投入的精力和网站性能提升，ImageEngine 是为数不多的例子之一，它的服务质量真正满足了你的需求。你不再需要担心图片大小、格式、分辨率等问题……我们专门为 Vue.js 开发人员制作了一个单独的包，因为我们知道对 Vue.js 框架来说，良好的 CDN 支持非常重要。只需几个步骤，你就可以在 Vue.js 应用程序中开始使用我们的服务。

为你的网站/应用程序访客提供他们应得的最佳体验。