关于响应图像库

最近更新： 2025年5月5日
  • 主题：

创建对象：

  • 开发人员
  • 用户

响应式图像库是一个JavaScript模块，可动态调整从Dynamic Media提供并嵌入响应式网页中的图像质量。 此外，它还在具有高密度屏幕的设备上提供改进的图像质量。 库还可以响应地呈现来自智能裁切和智能色板的结果。

演示URL

响应图像库的最简单用例是定义图像宽度的断点值列表。 此列表确保在因用户调整浏览器窗口大小或更改设备方向而更改网页布局而导致图像大小调整时加载和显示相应的演绎版。 库会持续监控屏幕上的图像大小，每当达到新的断点宽度时，它都会从Dynamic Media中获取新的图像演绎版。

演示URL说明
1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=zh-Hans

下面是一个简单示例，其中响应式图像位于占网页宽度50%的容器中。 每次调整浏览器窗口大小时，容器宽度都会更改。 当图像宽度达到所配置的断点之一（该断点被设置为200、400、600和800像素用于说明目的）时，将下载并显示新的演绎版。 目的是避免加载不必要的超大图像，并节省网络带宽。

单击URL以打开网页、调整浏览器窗口大小并监视网络流量。

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=zh-Hans

以下Bootstrap示例展示了网页中的相同用例。 根据BootstrapCSS，向其中添加响应图像的布局单元格可以采用以下宽度之一：360、720和940像素。 这些值就是作为断点传递到Responsive图像库的值。 因此，Dynamic Media可确保有效使用客户端的网络带宽。 此外，它还可确保按照当前网页布局所需的确切大小显示图像，而不会因缩放客户端浏览器而出现任何视觉伪像。

单击URL以打开网页，调整浏览器窗口大小以点击不同的布局断点，并监控网络流量。

更高级的用例包括将不同的图像预设和/或图像服务命令与不同的断点值相关联。

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=zh-Hans

在下例中，使用了不同图像质量和不同断点大小格式的图像预设。 对于小的断点，应用了低质量预设，这会强制图像服务将压缩为仅六种颜色的GIF图像返回。 中断点正在使用为高压缩JPEG配置的图像预设。 最大断点与使用无损PNG的高质量图像预设相关联。 基于具有较大屏幕的设备具有较大的带宽和处理能力的假设，这种方法确保高质量图像被传送到这样的设备。

单击URL以打开网页，将Web浏览器窗口的大小从大调整为小，并注意图像质量下降的方式。

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=zh-Hans

除了图像预设之外，还可以将特定的图像服务命令与断点相关联。 以下示例显示了如何在屏幕图像大小变小时逐渐将横幅图像裁切到感兴趣区域。 在此，最大的断点根本没有任何图像提供命令，因此横幅图像完全可见。 在中断点处应用温和裁剪，使只有文本为“正在运行”的流道可见。 在小断点时，应用更多的裁切，以便只显示产品。

单击URL以打开网页并调整浏览器窗口大小。 请注意图像是如何逐渐裁剪的，从大尺寸裁剪到小尺寸。

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=zh-Hans

您还可以结合使用图像服务命令和图像服务模板来根据图像大小控制某些模板参数。 在下个示例中，使用了图像服务模板，其中文本叠加的字体大小是使用 $fontsize 参数参数化的。 响应式图像配置为对较小的图像使用较大的字体大小，以确保文本始终可读：