我发布这篇文章是因为我收到了很多关于 Cloudflare Image Resizing 和我的 WordPress 插件的请求。

由于 WordPress 的设计方式，不可能使我的插件与现有的所有插件兼容，因此在本文中，我们通过 Cloudflare Workers 探索另一种方法。

请注意，我故意省略了太多技术性的东西，以便每个人都能理解； 让我们面对现实吧，并不是每个人都是开发人员。 我喜欢让文章简短、简单、切题。

在本文的结尾，您将能够简单地复制、粘贴并单击一下，为您的 WordPress 正确完成 Cloudflare Image Resizing。

什么是 Cloudflare 图像调整大小

提醒一下，使用 Cloudflare Image Resizing，您可以在 Cloudflare 的边缘平台上转换图像。 您可以根据需要调整大小、调整质量并将图像转换为 WebP 或 AVIF 格式。

Cloudflare 会自动在边缘缓存每张派生图像，因此您只需在源站存储一张原始图像。

对于像 WordPress 这样的繁忙博客来说，这确实是必不可少的服务，尤其是当您将它用作拥有许多图片的商店时。

阅读更多关于它的信息 官方邮寄 .

为什么使用 Cloudflare Image Resizing

主要原因是速度。 例如，假设您的网站有 5 个页面，每个页面有 10 张图像，大小从 1 Mb 到 5 不等，甚至每张图像 10 MB。

当有人第一次浏览您的页面时，所有这些图像都会由您的浏览器下载。 例如，一页有 10 张图片，每张图片大小为 1 Mb； 仅下载图片需要 10 Mb。

这对低带宽用户，尤其是移动用户来说是非常不利的。 即使对于带宽很大的 PC 用户来说，它也很糟糕。 没有人希望看到加载缓慢且不符合网络标准的网站。

我很确定你每天都会看到很多这样的网站，永远加载。 主要原因是媒体资产（如 css、js、图像）以及网络托管速度慢等其他因素。

您可能会想：“但我使用 CDN？！”，这不一样。 Cloudflare Image Resizing 不仅仅是一个 CDN，它可以改变您的图像以使其变得更好。

使用 Cloudflare Image Resizing，您的图像会即时缩小，因此 1 Mb 的图像将变成大约 100/200 kb。 它们还将以 Webp 和 AVIF 等下一代格式提供。

所以简而言之：

  • 增强图像
  • 加快您的网站
  • 改善您的搜索引擎优化
  • 节省带宽

WordPress插件

你可能知道我为 WordPress 制作的插件 Github / WordPress Plugins 目录.

它收到了很多反馈，许多反馈大大加快了他们的网站速度，但许多人也遇到了很多根本无法解决的问题。

尽管我尝试尽一切可能调整所有图像的大小，但由于 WordPress 插件和主题的设计方式，无法调整所有图像的大小。

更不用说css处理之类的都谈不上了。

Cloudflare Worker

在查看发布的所有问题后，我决定走另一条路，使用 Cloudflare Worker 重写 Cloudflare Image Resizing 的最终 HTML 输出。

这是在 WordPress 上使用 Cloudflare Image Resizing 的最终解决方案，因为工作人员将获取 WordPress 生成的最终响应，包括来自插件、主题、CSS 等的任何修改。

因为 Cloudflare Worker 位于您的 WordPress 和用户之间，所以您几乎可以即时更改任何内容； 这意味着我们甚至可以替换内联 CSS 甚至 CSS 文件中的图像。

从理论上讲，这听起来简单明了，但在实践中要困难得多，也更耗时。

尽管如此，我还是花了很多时间和精力来弄清楚如何实现这个目标。

WordPress Plugin vs Cloudflare Worker

如果您能理解 WordPress 插件和 Cloudflare Worker 之间的区别，那将是最有益的。 这样您就可以决定使用哪一个，并了解我为什么推荐该 worker。

 WordPress PluginCloudflare Worker
自由是的是的
处理速度快速地非常快
依赖性PHP 7+没有任何
一般兼容性部分的满的
主题 兼容性一些全部
插件 兼容性一些全部
处理 CSS不是的
处理所有标签不是的
优化不是的

正如你在上面看到的，工人赢了。 这只是最好的解决方案，因为无论您对后端 (WordPress) 进行何种更改，工作人员都可以更改图像链接。

设置 Cloudflare Worker

如果您安装并启用了 WordPress 插件，您需要做的第一件重要的事情就是禁用它。 如果您跳过这一步，您将看不到 worker 做了很多事情。

第二也是非常重要的事情是前往 Google Pagespeed 并在不调整图像大小的情况下测试您的网站。 稍后您将需要它来查看区别。

现在转到您的 Cloudflare 帐户并转到 Workers。 从这里单击“创建服务”。 随意命名服务，您也可以保留自动生成的随机名称。 将启动器保留为“HTTP 处理程序”。

创建完成后，点击服务，点击右上角的“快速编辑”。 编辑器将出现并简单地选择所有现有代码并将其替换为我的工作人员 Github . 单击“保存并部署”并离开编辑器。

在您的新服务页面上，转到“触发器”，然后在“路由”下单击“添加路由”。 在路由内使用匹配所有通配符设置您的网站域，例如这个“example.com/*”。 对于区域，您将选择您的域，在我的示例中是“example.com”。

就这样！

故障排除

如果您遇到任何问题，例如没有调整图像大小，请检查以下条件：

  • 图片是您域的一部分吗？ 除非您在 Cloudflare 仪表板中专门启用了此功能，否则您无法调整来自其他域的图像的大小。
  • 是否重写了任何图像？ 使能够 "Logs" 在你的新工作人员选项卡上，看看你是否发现任何异常。 如果你这样做，请在我的 Github 存储库中报告它。
  • 图片链接重写错了吗？ 在这种情况下，请在 Github 上报告问题。

奖励优化

我很确定您注意到您的 WordPress 在 HTML 正文标记之后包含一些空的 SVG 标记。 如果你不知道我在说什么，看看这个：

WordPress Empty SVG Tags

坦率地说，我无法理解一个有效的用例； 所以我添加了一些额外的代码来删除它。 它将使您的 HTML 输出更小一些，从而带来少量的额外速度。

当我有时间时，我会添加更多优化。

费用

为了使用 Cloudflare Image Resizing，您需要在撰写本文时为您的网站订阅专业版（每月 25 美元）。 图像大小调整服务起价为每存储 100,000 张图像 5 美元，每交付 100,000 张图像 1 美元 - 没有出口成本或调整大小和优化的额外费用。

使用 WordPress 插件是完全免费的，不收取任何费用。 worker使用起来也比较自由，但是限制比较小，处理能力也比较小。

我强烈建议您使用带未绑定选项的付费员工计划。 您网站上的图像越多，必须重写的 HTML 标签就越多，因此处理时间也就越长（GBs 持续时间）。

请记住，只需 5 美元，您就可以获得 400,000 GB-s 的工作人员限制，这在我的测试中已经足够了。

执照

我决定不使用麻省理工学院的许可证，因为我注意到很多人都在抢我的代码并出售它。 不酷的家伙。

因此，话虽如此，使用的新许可模型是 Apache License 2.0，所以请不要转售我的作品。

我坚信我的 Cloudflare Worker 会大大改善您的网站。 如果我是对的，请在 Github 上留下一个 star。 如果我错了，请留下一些反馈。

静候你的评价。