奥巴马基金网站图片管理工具Contentful Image API:images-ctfassets-net

Contentful Image API

Contentful Image API网站图片管理工具是打造引人入胜的用户体验的关键。开发人员需要能够简化工作、提高应用程序性能和增强适应性的工具。Contentful 的图像 API 提供了强大的功能,可通过 API 请求处理、转换和优化图像。

Contentful 是业界的内容管理系统,可让开发者和企业高效地管理和交付跨各种渠道的内容。其图像 API 不仅支持基本的图像检索和格式更改,还包含调整大小、裁剪和改善图像质量等选项。这些功能让开发者能够根据不同情况调整图像,确保图像加载速度快且在任何设备上都看起来不错。

在本文中,我们将介绍 Contentful 的图像 API 如何为您提供一种内置方式来通过简单的转换和图像优化来管理图像。然后,我们将向您展示如何利用 Cloudinary 等工具在完全不同的层面上转换图像。

在本文中:

  • 使用 Contentful Image API
  • 调整图像大小和剪裁
  • 提高图像质量
  • 使用 Contentful Image API 控制背景颜色
  • 访问渐进式 JPEG 和 8 位 PNG
  • 处理图像删除
  • 利用 Cloudinary 大限度地发挥图像的影响力

使用 Contentful Image API

Contentful 的内容管理方法(包括图像)由其自己的Contentful Images API提供支持。此 API 允许您检索和操作已上传到您的 Contentful 帐户的图像,使您可以访问基本的图像管理功能。

注意:Contentful Image API 仅适用于 20MB 以下的图片。任何文件大小更大的图片都被视为“资产”,不适用于此 API。

使用 Contentful Image API 检索图像

开始使用存储在 Contentful 中的图像意味着了解如何使用 API 检索它们。Contentful 中的每个图像都可以通过与您空间资产关联的 ID 来访问。要获取图像,您可以使用资产的 ID 向 Contentful API 端点发出 GET 请求。以下是您可以如何执行此操作的示例:

您可以按如下方式设置 API 调用:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}

此调用将返回您请求的原始格式的图像。此信息基于file.urlContentful 中资产的字段。

假设您正在开发图库功能,并且必须显示来自 Contentful 的多张图片。通过根据资产 ID 和所需参数动态构建 URL,您的应用程序可以高效地仅加载必要的数据,从而提高性能并减少带宽使用。

使用 API 更改图像格式

Contentful 的图像 API 还擅长通过 API 调用直接将图像转换为不同的格式,这对于确保跨不同浏览器和设备的兼容性至关重要。

例如,为了将图像从 JPEG 转换为支持它的浏览器的 WebP,增强压缩,您的 API 调用可能看起来像这样:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?fm={image_format}

只需将其附加?fm=webp到您的 API 请求中,即可指示 Contentful 以 WebP 格式提供图像。这有助于您的图像加载速度更快,而不会影响质量。

Contentful Image API 开发工具

调整图像大小和剪裁

当您需要调整图像尺寸以适应网页或应用程序上的不同元素时,Contentful 的 API 可以简化此任务。在图像请求中添加参数可让您指定所需的尺寸和纵横比。例如,如果您想将图像大小调整为 300×300 像素,您的 API 请求将包含如下参数:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?w=300&h=300

裁剪同样简单。您可能需要专注于图像的某个特定部分,例如以主题为中心或删除不需要的边缘。使用 fit 参数,您可以指定如何裁剪和调整图像大小。这可能看起来像:

获取 https://images.ctfassets.net/{space_id}/{asset_id}?w=300&h=300&fit=crop&f=face

在这里,API 会调整图像大小并确保裁剪聚焦于任何检测到的脸部,使其非常适合以人物(或人物)为焦点的个人资料图像或缩略图。

提高图像质量

Contentful 还提供了可增强所提供图像质量的参数。当处理必须在不同的屏幕分辨率和尺寸下清晰显示的图像时,此功能特别有用。该 API 允许您指定 JPEG 的质量级别或 PNG 的压缩级别,这有助于减少带宽使用量,而不会明显降低图像外观。增强图像质量的 API 调用示例如下:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?q=80

此请求指定图片的质量设置为 80(满分 100),从而有效地平衡质量和文件大小。虽然选项相当有限,但添加Cloudinary 的图像 API等其他工具可以帮助您的照片呈现出佳效果(同时仍与 Contentful 图像 API 集成)。

使用 Contentful Image API 控制背景颜色

处理具有透明背景的图像(例如 PNG)时,有时可能需要指定背景颜色。这对于需要一致背景的电子商务网站上的产品图像尤其有用。API 允许您使用一个简单的参数设置默认背景颜色:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?bg=rgb:ffffff

此示例将背景颜色设置为白色,用纯白色背景替换图像中的任何透明度,从而增强整个网站的一致性。

访问渐进式 JPEG 和 8 位 PNG

渐进式 JPEG 是网站传统图片格式的替代品。它们以连续的波形加载,每经过一次就会逐渐变得更加清晰。这可以提高感知性能,因为用户会看到低质量的图片版本逐渐填充,而不是等待整个文件下载完成。

要请求渐进式 JPEG,您需要修改 API 调用,如下所示:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?fm=jpg&fl=progressive

类似地,Contentful Image API 对 8 位 PNG 提供有限的支持,这对于较简单的图像或图标(有限的调色板就足够了)来说是理想的选择。请求看起来类似于:

获取 https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{name}?fm=png&fl=png8

处理图像删除

管理数字资产还包括删除旧的或未使用的图像。当需要删除图像时,Contentful 要求您使用其 Asset API,而不是其 Image API。要删除图像,您需要向 Contentful API 端点发出 DELETE 请求,如下所示:

删除 https://api.contentful.com/spaces/{space_id}/environments/{environment_id}/assets/{asset_id}

只要满足所有验证和条件(例如身份验证和授权),此请求就会从您的空间中删除资产。然后,Contentful 还会删除其 CDN 内所有先前引用的文件。不过,如果您没有立即看到结果,请不要惊慌,因为此过程可能需要长达 48 小时。

删除的资产是不可恢复的,这强调了在执行此类操作之前实施适当的检查和平衡的必要性。删除图像应该认真对待,因为它会影响内容的提供和管理方式。在删除图像之前实施软删除功能或存档图像可能是一个好主意,这样您就可以在需要时恢复文件。

利用 Cloudinary 大限度地发挥图像的影响力

尽管 Contentful 提供了强大的内容管理解决方案,但他们的图像 API 除了简单的操作之外,还无法胜任其他工作。Cloudinary 的服务与 Contentful 的功能完美融合,提供了动态和视觉驱动应用程序所必需的图像和视频管理选项。

Cloudinary 在需要大量图像处理的领域表现出色,提供基于终用户的设备和网络条件的自动转换、优化和交付调整工具。与 Contentful Image API(除了裁剪和更改图像格式外,它还提供了有限的图像支持)不同,Cloudinary 提供了一种增强型解决方案,可以:

  • 以几乎任何图像格式提供图像
  • 即时优化图像
  • 使用生成式 AI 添加、删除或扩展背景
  • 使用滤镜、叠加和智能裁剪来变换图像
  • 图像让产品熠熠生辉
  • 还有更多

让我们考虑一个处理大量图像的用例,例如在电子商务平台中。Cloudinary 可以自动调整大小、裁剪和调整产品图像的质量,确保它们针对移动和桌面视图进行了完美优化。这可以缩短加载时间并增强您的产品列表在不同平台上的视觉吸引力。

Cloudinary 支持基于AI 的标记和分析等功能,可以根据图像内容自动对其进行分类和标记。此功能对于创建可搜索的图像数据库和提高资产的可发现性非常有用。

将 Cloudinary 与 Contentful 集成可显著简化您的工作流程。您可以通过 Cloudinary 处理图像上传和转换,并通过 Contentful 管理内容关系和交付,从而利用两个平台的优势创建一个有凝聚力的生态系统。您还在等什么?

滚动至顶部
扫描微信二维码联系我们 关闭