响应式图片

响应式图片会根据其显示的设备或屏幕尺寸自动调整大小和分辨率。这可以带来更快的加载时间、提高网站性能和更好的用户体验，最终减少带宽使用并增强页面响应能力。

当您使用 CKBox 在 CKEditor 5 中嵌入图片时，它将在输出 HTML 代码中生成一个包含为给定断点优化的多个图片的 <picture> 元素。

# 工作原理

上传文件后，CKBox 会存储原始资产。然后，响应调用（例如，来自 CKEditor 5 插件），它会创建多个中间版本。这些中间版本的数量及其分辨率取决于原始图片的分辨率。原始图片越大，创建的版本就越多，对于最大的资产，最多可以创建 10 个版本。

# 断点

创建优化版本的第一个断点应等于图片宽度的 10%，但不能小于 80 像素。每个后续版本的大小将是前一个版本的两倍，直到达到原始大小。

# 示例

宽度为 700px 的图片，其最小版本宽度设置为 80px，因为 10% 的宽度太小。较大的版本将以此为基础进行计算。这意味着接下来的版本将是：160px、240px、320px 和 640px。

类似地，宽度为 1600px 的图片，其第一个断点步长为 160px。接下来的步长是 320px、480px、640px 和 1280px。

没有上采样 - CKBox 仅生成小于原始图片的中间图片。

# 结果

浏览器将自动加载尺寸最适合当前页面分辨率的图片，这使得图片加载速度更快。较大的图片适合桌面用户，因此图片细节清晰可见。在屏幕分辨率较小的移动设备上使用相同的图片会浪费带宽，而较小的图片加载速度更快，从而改善访客的体验。

您可以在 CKEditor 5 文档中观察到 响应式图片的实际效果。