Angular 应用程序中的自动自适应图像

介绍

待解决的问题

创建不同大小和格式的图像

图片元素

介绍

如今，用户通过各种各样的设备访问网络应用，例如笔记本电脑、平板电脑、智能手机、台式电脑等，这些设备的屏幕尺寸和分辨率各不相同。另一方面，无障碍访问的原则之一是让尽可能多的用户能够克服物理障碍（例如听力、视觉障碍、认知障碍等）以及物质或技术障碍，获得丰富且令人满意的应用访问体验。正如我们已经指出的，如今的用户使用不同的设备访问网络，并且他们的技术特性（例如互联网带宽）也各不相同。

此外，有些 Web 应用程序包含大量视觉内容，因此包含大量图片。这些图片通常存储在 CDN（内容分发网络）上，然后从 CDN 下载到设备上。

在某些特定地区或情况下，下载所有这些图片可能会占用过多的带宽，对用户来说尤其如此。同样，任何优化，即使对于拥有高性能设备的用户来说，都是有益的，因为这样可以更快地让应用上线。

在这篇文章中，我们将逐步展示如何构建一个具有响应不同尺寸图像的 Angular 应用程序，尽管它可以适用于任何技术。

待解决的问题

我解决的问题正是我在开源项目Angular-Communities中遇到的问题。该项目包含一张 Google 地图，其中显示了全球不同 Angular 社区的盾牌。此外，侧边栏导航栏中还列出了所有不同社区的盾牌，方便我们导航并选择它们以获取有关这些 Angular 社区的高级信息。顺便提一句，请允许我告诉您，不要犹豫，将您的社区添加到此地图中，以便我们都能获取您社区的信息。

在这个特定问题中，截至本文发布时，我们大约有 70 个社区，每个社区都有其个性化的盾牌。每个盾牌都是 PNG 格式的标量图像，大小在13KiB 到 186KiB之间。这 70 张图片的总大小为2.6MiB。在这种情况下，我们需要一开始就下载所有图片，而不能使用偷懒下载图片的技术。这大大简化了代码和开发复杂性。然而，令人担忧的是，所有设备，无论大小，每次访问网站时都必须下载2.6MiB，从而造成不必要的性能损失。

对于这篇文章，我构建了一个小型演示，其中来自Angular-Communities的所有图像都下载到一个组件中，并附带文章的最终结果。

下表显示了不同格式和图像大小的图像大小。可以看出，即使图像大小相同，文件大小最小的格式是.webp。

创建不同大小和格式的图像

想象一下，我们必须使用 Gimp 或 Photoshop 等图形编辑软件手动编辑每张图片。仅仅为了更改图片的尺寸、质量和格式，就需要投入大量的时间。我们或许会认为，只需执行一次这样的任务，虽然繁琐却有效（但我仍然认为，既然可以自动完成，就不应该手动执行）。然而，如果我们想要通过与用户的互动逐步增加图片数量，或者需要对每张图片的尺寸和质量进行不同的调整，那么这项任务就会变得更加复杂。

因此，理想的情况是有一个工具/脚本可以让我们自动执行此任务，这样只需执行一个简单的脚本，就可以自动生成所有图像。

在我们的上下文中，我们将使用使用 node.js 构建的工具，因为安装它并在我们的 Angular 应用程序中使用它不需要为不同的编程语言安装新的应用程序或包管理器。

所选工具是responsive-image-builder ( RIB )，它被定义为一个用于 Web 的超快速图像构建管道.Webp。生成图像所需的时间取决于您的处理器或集成系统的处理器以及需要转换的图像数量。

RIB 功能

• ⚡ 快速 — 使用闪电般快速的libvips 图像处理。
• 🔥 多线程 — 扩展到所有可用的 CPU 内核。
• 📦 零配置 — 无需任何更改，一切由您决定。
• 🌍 通用——灵活的图像构建过程，不强制执行任何原则。
• ✂️ 跨平台——在 Windows、macOS 和 Linux 上测试过。
• 😊 友好的体验——从开始到结束告诉您发生了什么。

所有这些特性使得这个开源工具非常适合我们的目的。首先，我们将该包安装为开发依赖项。

rib -i <input> -o <output> <options>

该工具的使用非常简单，我们只需要指定以下命令的参数：

"pre:deploy": "rib -i src/assets/images_raw -o src/assets/images --no-clean --force"

因此，如果我们想在部署管道中包含某个目录中的所有图像，并将其转换并生成到新目录中，我们可以构建在部署任务之前运行的以下npm-script。

虽然此工具/软件包的特点之一是无需配置，但在我们的具体案例中，我们希望构建一个响应式应用程序，其中每个屏幕尺寸都有一组根据其参数调整的图像。换句话说，当用户从移动设备访问网页时，他们必须下载适合该设备尺寸的图像，这些图像比大屏幕图像更轻，而当从大屏幕设备、笔记本电脑或智能电视访问时，则可以享受高分辨率图像。

因此，我们必须配置想要自动生成的不同大小的图像。此配置通过创建一个名为 的文件来完成，.ribrc.json该文件中指定了一个数组，其中包含您想要从每张原始图像生成的不同配置或图像生成格式。因此，每种配置都允许您使用name * 属性指定后缀，使用 *width 属性指定图像宽度，并使用force属性指定您想要强制创建图像（如果之前的图像已存在，则覆盖当前图像）。

因此，在我们的配置文件中，我们指定将从每个原始图像生成五个图像，这些图像将具有以下配置作为前缀：xs、sm、md、lg和xl。

此外，rib还会生成原始格式的所有图片，.png或者.jpg以.webp格式生成所有图片。因此，如果浏览器支持该.webp格式，它将使用该格式而不是之前的格式。下一节将展示如何将使用某张图片或另一张图片的责任委托给 HTML（使用picture元素）。

图片元素

HTML5 引入了<picture>元素，与 元素相比，它允许更灵活地指定图像<img>。该<picture>元素最常见的用途是通过 HTML 将自适应布局中图像的责任委托给浏览器。换句话说，无需使用 CSSwidth属性缩放大图像，而是可以根据访问 Web 应用程序的设备选择最合适的图像。

该<picture>元素由两个标签组成：一个或多个<source>元素和一个<img>元素。浏览器会检查访问 Web 应用程序的设备是否符合媒体查询<source>的第一个元素，并显示属性中指定的图像。如果任何元素的媒体查询不满足要求，则该元素将用作后备选项。srcset<img><source>

在我们的 Angular 组件中，我们定义了一个要在模板中显示的图像配置数组。在这个数组中，我们定义了几个属性：

• min/max ：访问 Web 应用程序的设备的视口宽度。
• suffix：图像后缀。
• 格式：图像的格式，有格式.webp和.png。

在我们的模板中，我们只需要遍历上面定义的数组来生成<source>和<img>元素，以将责任委托给模板。

结果

执行这些简单步骤后，我们将得到一个包含图片的目录，这些图片的大小和格式会根据访问 Web 应用程序的设备而有所不同。下图展示了应用程序的运行结果，它会根据访问应用程序的设备下载部分图片或其他图片。这些图片分别展示了移动设备和大屏幕设备（大显示器或电视）会下载的图片。通过这种方式，我们能够更好地访问 Web 应用程序，因为它允许更多设备进行友好访问。

最后，如果要测试整个构建的系统，我们只需要使用部署，它可以集成到我们的 CI/CD 系统的任务中，就像在原始项目Angular-Communitiesnpm-script中一样，将执行所有这些任务的责任委托给自动化系统。

结论

在本文中，我们了解了如何通过自动化的方式提升 Web 应用的性能和可访问性，根据访问 Web 的设备调整图片。这样，用户无需下载不适合其设备的图片，从而提高 Web
的可访问性。

如果我们想继续提高 Web 应用程序的性能，可以很容易地添加一个Service Worker来缓存我们的静态内容，这样设备就不必在每次登录时请求所有图像。如果图像不是动态的，即它们不会在最终用户的每次请求中发生变化，那么这个功能就很有趣。

在与我们的前端应用程序部署系列相关的未来文章中，我们将介绍如何自动集成测试，从而使我们在 CI/CD 系统中拥有更完整的工作流程并适应我们的需求。

GitHub 仓库：
https://github.com/Caballerog/angular-responsive-images