测试 composer 图像优化

继续讨论之前的话题:上传前的可选图像优化

此功能现已在 Meta 站点开放测试。在此处上传图片将触发在用户浏览器中进行调整大小/编码,然后再发送到服务器。

请在此本主题中或通过在您的社区中启用“composer media optimization image enabled”站点设置来尝试使用。在我们进行测试期间,该功能默认保持关闭

为了说明差异,以下是优化前后的对比:


这张照片是我刚从手机拍摄的,使用我们的默认设置后,文件大小从 3.7MB 减少到了 416KB。

此功能的目标正如 @sam 在此处所述:

Discourse 默认为用户上传设置了 4MB 的限制。现在,我可以直接拖放一个 58MB 的 JPEG 文件:

上传完全正常。

46 个赞

这是一张我10年前拍摄的树木照片,大小为57MB,已拖入编辑器。

速度真快!:rocket:

29 个赞

干得漂亮!

关于加载进度条有一个小问题。在上传这张 6.1MB 的 HEIC 图片时,我发现进度很快就达到了 100%,但随后在那里停留了大约 50 秒才完成。这可能会导致一些混淆或取消操作。

问题视频:Image optimization loading percentage | Loom

20 个赞

太棒了。有个小问题,可能有点显而易见——能否只针对超过网站限制的图片启用该功能?这样,不超过限制的图片不会被处理,但如果有人尝试上传超过限制的图片,系统似乎会自动将其缩小?

14 个赞

这是我期待已久的功能 :heart_eyes: 感谢 Falco。

我有一个问题:重新生成帖子时,是仅优化新上传的图片,还是也会优化旧图片?再次感谢 :slightly_smiling_face:

4 个赞

您并没有测试这个新功能,因为它在已导入的 HEIF 图片上无法工作。我本想处理 HEIF 格式,但浏览器对 HEIF 解码的支持几乎为零:https://caniuse.com/heif。因此,您测试的是我们早已运行良好的服务器端 HEIF 转换功能。

我可以通过打包一个 WebAssembly 解码器来实现支持,但这些图片非常罕见,我认为没有必要这样做,因为我们已经有了 @pmusaraj 开发的服务器端转换功能。

目前,该功能仅支持导入 JPG、PNG 和 GIF。我可以轻松添加对 AVIF、JPEGXL 和 TIFF 的支持,并会尽快实现。

可以!将 composer media optimization image kilobytes optimization threshold 调整为您想要的值即可。

不会。这项工作是在用户浏览器中进行的,就在上传之前即时完成。而“重新烘焙”(Rebake)是一个服务器端进程,因此两者截然不同。

13 个赞

(一张我在 2020 年首次封锁期间从市中心拍摄的 28 MB 照片)

我用各种网速测试了上传功能,从 1 Gbps 到 1 Mbps 都有。除了 1 Mbps 的带宽外,其他都表现良好。在 1 Mbps 带宽下,上传行为有些奇怪。

进度长时间卡在 0%,然后百分比迅速上升(甚至比 1 Mbps 连接应有的上传速度还快),接着又卡在 100% 很久,最后才显示这条消息:

请注意,我的图片原始格式是 JPG,而不是 PNG…… :thinking:

[Uploading: 20200328_141218.jpg...]() 仍然留在帖子中,而没有显示图片。

3 个赞

两个问题:

  1. 如果我们在上传图片时取消消息并丢弃草稿,然后想要发布新回复,编辑器中仍会显示加载进度:

我们必须重新加载页面才能消除这种情况。

  1. 网站允许发送和显示 50 MB 的图片,但当我尝试发送一张 21600×21600、108 MB 的图片(来自 此处)时,却收到以下提示:

这里的困惑在于:提示显示“大于 4 MB 禁止”,但实际上却允许上传 50 MB 以上的图片。

我究竟为何无法上传这张图片?真实原因是什么?

2 个赞

照片拍得真不错!从 28 MB 压缩到 113 KB,压缩比例相当可观!

所以这个新功能只改变了“预上传”阶段。我们会拦截你尝试上传的文件,对其应用转换,然后用更小的新文件替换它,并恢复原有的上传流程。

在预上传阶段,进度会停留在 0% 并显示“处理中…",这是预期的行为。我会尝试也将底部的“上传中…"字符串进行替换。

大于 4 MB 仍然是被禁止的,技巧在于我们会对图片进行优化,使其在可能时小于 4 MB,从而能够绕过文件大小限制。

我尝试了该网站上的一些图片,但它们都使用了 PNG 透明度,因此我无法安全地将其转换为 JPG,优化器也因此放弃了处理。

我刚刚测试了一张 60 MB 的 PNG 图片,优化器可以处理它,但在此过程中使用了超过 4 GB 的内存,最终生成了一张 360 KB 的 JPG。

请问你在进行这项测试时使用的是哪种设备、浏览器和操作系统版本?

5 个赞

我新增了一条“正在处理上传”的编辑器状态消息,现在您可以确切了解当前进展。

该功能现已可以安全测试,请在您的社区中试用并告知我们结果!

9 个赞

我用 iPhone 拍了一张 1.6MB 的照片尝试了一下:

哇,压缩到 300KB,而且画质非常高。

6 个赞

5 个赞

8 个赞

你好,Falco,

我开始使用 Composer 的图片优化功能。我注意到,当我想上传多张照片时,在第一张图片上传完成后,“回复”按钮就会激活,而只有在下一张图片优化完成后才会再次停用。如果在此期间点击“回复”按钮,其他图片的上传就会卡住,最终只生成文本(处理中)。我这边无法复现此问题,因为 Meta 的按钮切换很快,但在我的网站上,上传之间经常会出现约 10 秒或更长时间的挂起。我使用的是默认设置,以及 3 张约 3-4MB 的图片。

我在华为 P20 Pro(Android 10,Chrome 91.0.4472.120)的 Web 应用上进行了测试。

如视频所示,在上传(Feltöltés)完成后,“回复”按钮被激活。每张图片约 2.3MB。

是否可以在图片上传期间始终禁用“回复”按钮?


我对这个设置有些困惑。“千字节”这个单位是否正确?

感谢您的回答!:slight_smile:

3 个赞

感谢您的反馈!此前在计算按钮的禁用状态时存在一个错误:

是的,https://en.wikipedia.org/wiki/Kilobyte。默认值为半兆字节,但您可以根据需要进行调整。如果您希望尽可能节省空间,建议将其设置为约 300 KB。

5 个赞

感谢修复。:slightly_smiling_face:

明白了。我刚才以为这是把“字节”误拼成了“千字节”。因为我在转换器中输入了 524288kb,结果显示为 512mb,这让我感到困惑。不过现在我理解了。:slightly_smiling_face: 谢谢!

3 个赞

哦,我现在明白了。我的错!

3 个赞

你好,

感谢修复 :slight_smile: 现在运行得非常顺畅!

我有个关于移动端上传的问题。当我从手机上传图片时,图片似乎不会按目标像素宽度进行缩放,我认为只是质量发生了变化。如果我在桌面电脑上尝试,缩放功能是正常的。我是不是漏掉了什么?谢谢 :slight_smile:

2 个赞

我们尝试在移动设备和桌面端进行缩放,但如果您的设备硬件性能不足,缩放操作可能会失败。在这种情况下,我们将跳过该操作。

4 个赞