Easy Image - 服务详情

本文解释了 Easy Image 的内部工作原理，面向更高级的用户。有关该服务的概述描述，请查看Easy Image 概述文章。要启用编辑器中的 Easy Image，请遵循快速入门指南。

# 图像处理

对于每个上传的图像，Easy Image 会生成同一图像的多个优化版本。

图像大小的计算方式取决于原始图像的宽度，有两种方式。

对于大图像（宽度超过 800px），每降低 10% 的宽度就会减少一次。
对于小图像，每降低 80px 的宽度就会减少一次，直到达到 100px 的限制。

原始图像也会保存在云端。

通过提供同一图像的多个版本，分辨率较小的设备（如移动设备）可以请求适合其显示屏的图像，从而减少带宽并提高网站加载时间。

# 示例

对于一个宽度为 4000px 的图像，将创建以下版本：400px、800px、1200px、1600px、2000px、2400px、2800px、3200px、3600px 和 4000px。

对于一个宽度为 500px 的图像，将创建以下版本：100px、180px、260px、340px、420px 和 500px。

# 上传响应

Easy Image 服务使用包含已生成图像版本的地址的 JSON 对象进行响应。键指示图像的宽度，原始图像名为 default。默认情况下，将保留纵横比。

# 示例响应

{
   "390":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_390",
   "780":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_780",
   "1170":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1170",
   "1560":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1560",
   "1950":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1950",
   "2340":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_2340",
   "2730":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_2730",
   "3120":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3120",
   "3510":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3510",
   "3840":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3840",
   "default":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg"
}

整个通信对开发者隐藏，无需开发者进行任何操作。

# 生成的 HTML 标记

用于图像的标记根据编辑器版本略有不同，但是 <img> 元素始终包含一个类似于srcset的属性，其中列出了所有生成的图像版本。

<figure ...>
    <figcaption ...>...</figcaption>
    <img alt="..." src="https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg" width="3840"
    srcset="https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_390 390w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_780 780w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1170 1170w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1560 1560w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1950 1950w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_2340 2340w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_2730 2730w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3120 3120w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3510 3510w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3840 3840w" sizes="100vw">
</figure>

您可以在 MDN 上的响应式图像文章中找到有关 srcset 和响应式图像的更多信息。

# 请求不同尺寸的图像

Easy Image 服务支持请求任何尺寸的图像。

# 参数

要请求自定义尺寸的图像，请在默认 URL 中添加参数。参数之间用逗号隔开。参数名称和值之间用下划线隔开，例如 w_300,h_100。

必须使用参数的缩写名称，请查看下表。

缩写名称	完整名称
w	width
h	height

当同时使用 w 和 h 时，将忽略纵横比，并将返回拉伸的图像。

# 示例

默认图像 URL 示例
https://cdn.cke-cs.com/aX1FymZU/images/48f57_image1.jpg

将同一图像调整为 200x100px
https://cdn.cke-cs.com/aX1FymZU/images/48f57_image1.jpg/w_200,h_100

# 支持的文件格式

Easy Image 支持以下格式

png
jpeg
bmp（bmp 格式的图像将转换为 png 格式）
tiff
webp
gif（也支持动画 gif）