这是之前在#55106并在媒体实验已经（参见示例此博客帖子有关后者的概述）。我相信媒体实验的核心逻辑是实现这一功能的良好基础，而古腾堡正是进一步开发这一功能并将其带给更多人的合适之地。

概述

WordPress中当前的图像处理依赖于服务器端资源和较旧的图像库，导致潜在的性能问题，并且对现代图像格式（如AVIF）的支持有限。这导致用户体验不佳，尤其是在资源密集型任务中，如调整图像大小和压缩图像。此外，缺少像MozJPEG这样的现代压缩工具进一步阻碍了优化工作。

客户端媒体处理通过利用浏览器的功能来处理图像大小调整和压缩等任务，提供了一种解决方案。这种方法不仅缓解了服务器资源的压力，还可以使用更先进的图像格式和压缩技术，最终提高网站性能和用户体验。通过利用WebAssembly等技术，WordPress可以为新内容和现有内容提供更高效、无缝的媒体处理过程。

资源

• 添加LCP图像格式和文件大小的查询谷歌ChromeLabs/wpp-research#97
• https://github.com/swissspidy/media实验

路线图

考虑到客户端媒体处理解锁的多种可能性，此项目可以分为多个阶段，每个阶段都有其专用的目标和成功标准。例如：

第1阶段

目标

• 客户端子尺寸图像生成
• 上传过程中的图像压缩（适用于所有尺寸）
  • 根据大图像大小阈值设置缩小图像
  • 始终压缩所有图像，而不考虑任何较大的图像大小阈值，这与WordPress今天的做法不同
  • 如果需要，提供退出选项（例如，摄影师）
• 块编辑器中压缩现有图像的方法

很高兴有

• 将HEIC图像转换为网络安全格式
• 将动画GIF转换为实际视频
• 文章编辑器中对文章中所有现有图像进行批量优化的方法
  • 不要与重新生成整个媒体库混淆
• 旋转图像的自动旋转

非目标

• 将图像转换为任何其他格式（例如JPEG到WebP）
  • 除了HEIC，它是上面最好的
• 更改除图像以外的媒体格式的媒体处理（例如视频压缩）
• 用于重新生成/压缩整个媒体库的UI
  • 相关：[WPP]重新生成现有图像Epic PRD

第2阶段

目标

• 将图像（包括子尺寸）转换为任何其他格式（例如JPEG到WebP）

很高兴有

• 将动画GIF转换为实际视频
• 提供额外的客户端图像编辑功能，如裁剪、旋转和缩放
  • 使用户更容易制作较小的图像，从而降低文件大小

非目标

• 更改除图像以外的媒体格式的媒体处理（例如视频压缩）

第3阶段

目标
*以多种不同格式生成子尺寸
*适用于例如，用于将AVIF与JPEG回退一起使用

• 或者，对于每个子大小，选择文件大小最小的格式
• 根据作为古腾堡第三阶段的一部分的媒体库改造，将功能从块编辑器扩展到媒体库

很高兴有

• 更改除图像以外的媒体格式的媒体处理（例如视频压缩）

注意事项和风险

技术复杂性

基于WASM的图像优化需要SharedArrayBuffer（共享阵列缓冲区）支持，这反过来需要跨原点隔离。在不破坏编辑器其他部分的情况下以稳健的方式实现这一点具有挑战性。目前有一些已知问题在Firefox和Safari中，由于这些浏览器不支持无凭证的iframe嵌入。因此，在编辑器中嵌入预览当前无法工作，直到这些浏览器添加对<iframe无凭证>.

由于存在大量不同的编解码器和编码选项组合，图像压缩本身相当复杂。虽然WordPress中现有的服务器端图像处理已经过多年的验证，但在客户端做任何事情都是一个新领域。将有许多边缘情况需要处理。

对于总体架构设计，现有媒体实验该项目包含一个非常坚实的基础，已经解决了许多具有挑战性的问题，并且可以在此基础上进行建设。

置信度

到目前为止，包括WordPress领导层在内，社区的接待都非常积极。显然，人们渴望这种解决方案。

最大的风险是与编辑器的其他部分（插件、嵌入预览）和特定环境的兼容性，因为SharedArrayBuffer（共享阵列缓冲区）。不破坏现有网站非常重要。可以通过广泛的测试、额外的保障措施和文件来减轻风险。缺乏<iframe无凭证>支持并不理想，因为它在某些情况下会降低编辑器UX的性能，但它并没有破坏创作体验，因为存在后备功能。

虽然理论上可以通过其他方法进行图像优化，例如画布API，表示API在不同浏览器之间非常有限。例如，缺少对压缩选项（例如无损或有损）和mime类型（到处都没有AVIF，Safari中没有WebP）的支持。