url处理#

既然它是用url来处理的，那我的静态博客就要在部署事就把所有我原来在r2上的不是webp和avif的图片url进行处理。

这时候我问claude，它给我推荐了一个rehypeImageOptimization插件 这个插件可以通过配置文件来处理特定url

1
import { visit } from 'unist-util-visit';
2

3
export function rehypeImageOptimization() {
4
  return (tree) => {
5
    visit(tree, 'element', (node) => {
6

7
      // 1. 基础防御：只处理 img 标签且有属性的
8
      if (node.tagName !== 'img' || !node.properties) return;
9

10
      const src = node.properties.src;
11
      if (!src) return;
12

13
      let urlObj;
14
      try {
15
        urlObj = new URL(src);
16
      } catch (e) {
17
        node.properties.loading = 'lazy';
18
        node.properties.decoding = 'async';
19
        return;
20
      }
21

22
      // 2. 业务逻辑：只处理 img.mckero.com
23
      if (urlObj.hostname !== 'img.mckero.com') {
24
        node.properties.loading = 'lazy';
25
        node.properties.decoding = 'async';
26
        return;
27
      }
28

29
      // 3. 不再跳过 WebP/AVIF —— Cloudflare 可以对任意源格式做尺寸缩放，
30
      //    并通过 format=auto 自动为浏览器输出最优格式，所以全部走转换
31

32
      // ============================================================
33
      // ✅ 使用 Cloudflare Image Transformations（/cdn-cgi/image/）
34
      // 直接在 img.mckero.com 上生效，不再依赖 opt.mckero.com Worker
35
      // ============================================================
36
      const generateCdnUrl = (targetWidth) => {
37
        const options = `width=${targetWidth},format=auto,quality=80`;
38
        return `https://img.mckero.com/cdn-cgi/image/${options}${urlObj.pathname}`;
39
      };
40

41
      // 生成四档 srcset
42
      node.properties.src = generateCdnUrl(800);
43
      const s500 = generateCdnUrl(500);
44
      const s800 = generateCdnUrl(800);
45
      const s1200 = generateCdnUrl(1200);
46
      const s1600 = generateCdnUrl(1600);
47

48
      node.properties.srcset = `${s500} 500w, ${s800} 800w, ${s1200} 1200w, ${s1600} 1600w`;
49
      node.properties.sizes = '(max-width: 600px) 100vw, 800px';
50
      node.properties.loading = 'lazy';
51
      node.properties.decoding = 'async';
52
    });
53
  };
54
}

这是最新的代码（cloudflare Images图片实时转换的，想参考旧代码请去看github的提交记录

这个代码是AI写的，说实话我本身就不会写代码

如何给astro装插件可以问AI，我只是说可以，没说一定，我也不对这句话产生的一切后果或问题（包括间接产生的）负责！当你使用或者参考了这段代码或者我说的话，代表你已经阅读了本站的隐私政策和免责声明！ 请勿用于生产环境，个人使用或者借鉴请审查！请仔细阅读本站隐私政策！

URL 接口#

根据您是优化 远程 图像还是 托管 图像，Cloudflare 使用不同的 URL 结构：

• 远程图像（转换）
• 托管图像

在优化 Images 之外的图像时，默认的转换 URL 使用以下结构：

1
https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

URL 构成说明

对于存储在 Cloudflare Images 中的图像，请使用带有变体或自定义选项的交付 URL：

1
https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE-ID>/<VARIANT-OR-OPTIONS>

URL 构成说明

Workers#

当使用 Images with Workers 时，您可以：

• 应用自定义逻辑来设置优化操作的顺序。例如，默认情况下，Images 会在 rotate 之前应用 flip；相反，您可以使用 Images 绑定来自定义优化工作流，以在翻转图像之前旋转它。
• 使用自定义 URL 方案来代替默认的 URL 结构。
• 实施内容协商，以根据设备和网络状况动态调整图像大小、格式和质量。

anim#

指定是否保留输入文件中的动画帧。

• true（默认）— 输出包含所有帧的动画图像。
• false — 将动画输入的第一帧转换为静态图像。

在放大图像或处理任意用户上传的内容时，建议使用此设置，因为动画 GIF 的文件大小可能很大，从而增加页面加载时间。使用 format=json 时，设置 anim=false 也很有用，可以更快速地获取响应，而无需帧数信息。

原始	anim=false

• URL 格式
• Workers

1
anim=false

JavaScript

1
cf: {image: {anim: false}}

background#

指定一种不透明或透明的颜色来填充图像中的空白或透明像素。默认值为 %23FFFFFF（白色）。

接受以下属性：

• HEX 颜色代码，格式为 %23RRGGBB。
• CSS 颜色名称，例如 white 或 red。
• rgb() 或 rgba() CSS 颜色函数，例如 rgba(250,40,145,0.5)。

背景颜色在具有透明像素的图像中可见，包括使用 fit=pad 调整大小的图像。

原始1080 x 720	输出1080 x 900

• URL 格式
• Workers

1
background=%23ff0000
2
background=red
3
background=rgb%28240%2C40%2C145%29

JavaScript

1
cf: {image: {background: "#RRGGBB"}}
2
cf: {image: {background: "rgba(240,40,145,0)"}}

blur#

对图像应用模糊半径。接受从 0（无模糊）到 250（最大模糊）的整数。默认值为 0。

当通过 URL 进行优化时，不应使用此参数来可靠地模糊图像内容，因为可以修改 URL 以移除模糊参数。相反，您可以通过 Workers 限制对原始图像的访问。

原始	blur=50

• URL 格式
• Workers

1
blur=50

JavaScript

1
cf: {image: {blur: 50}}

border#

在图像周围添加边框。

注意

此功能仅适用于 Workers。

接受以下属性：

• color — 设置边框的颜色。接受任何有效的 CSS 颜色值，例如 #FF0000、rgb(0,0,0) 或 red。
• width — 在所有四边设置统一的边框宽度（像素）。
• top、right、bottom、left — 为单独的边设置边框宽度（像素）。

边框是在图像调整大小之后应用的。边框宽度会随 dpr 参数自动缩放，以确保在高分辨率屏幕上的清晰度。

• Workers

JavaScript

1
cf: {image: {border: {color: "rgb(0,0,0,0)", top: 5, right: 10, bottom: 5, left: 10}}}
2
cf: {image: {border: {color: "#FFFFFF", width: 10}}}

brightness#

使用乘数调整图像的整体亮度。

• 1（默认）— 对原始亮度无更改。
• < 1.0 — 使图像变暗，例如 0.5 表示亮度为一半。
• > 1.0 — 使图像变亮，例如 2 表示亮度为两倍。

原始	brightness=0.5	brightness=2

• URL 格式
• Workers

1
brightness=0.5

JavaScript

1
cf: {image: {brightness: 0.5}}

compression#

选择压缩速度最快的输出格式。接受 fast。默认为 none。

compression=fast 选项优先考虑编码速度，而不是输出质量和文件大小，并且通常会覆盖 format 参数，选择 JPEG 而不是更高效的格式（如 AVIF 或 WebP）。这会略微减少缓存未命中时的延迟，但可能会导致文件大小增加和图像质量降低。

除非在特殊情况下（例如调整不可缓存的动态生成图像的大小），否则不建议使用此选项。

• URL 格式
• Workers

1
compression=fast

JavaScript

1
cf: {image: {compression: "fast"}}

contrast#

使用乘数调整图像最暗和最亮部分之间的整体差异。

• 1（默认）— 对原始对比度无更改。
• < 1.0 — 降低对比度，使阴影变浅，高光变深。
• > 1.0 — 增加对比度，将阴影推向黑色，将高光推向白色。

原始	contrast=0.5	contrast=2

• URL 格式
• Workers

1
contrast=0.5

JavaScript

1
cf: {image: {contrast: 0.5}}

dpr#

通过乘数缩放输出分辨率以匹配用户的特定屏幕密度（例如 Retina 或 4K）。默认值为 1，它以请求的精确宽度和高度提供图像。支持的最大值为 2。

现代设备的物理像素多于 CSS 像素。如果您在高 DPR 智能手机的 300px 容器中提供 300px 的图像，它看起来会很模糊。使用 dpr=2 告诉 Cloudflare 为同一个 300px 容器发送 600px 的图像，从而产生更清晰、更锐利的图像。

dpr 参数可以与 srcset 一起使用，以 提供响应式图像。

width=300,height=200,dpr=1	width=300,height=200,dpr=2

• URL 格式
• Workers

1
dpr=1

JavaScript

1
cf: {image: {dpr: 1}}

fit#

指定图像如何适应目标区域。

适应操作是在设置图像的 width 和 height 尺寸之后执行的。

• URL 格式
• Workers

1
fit=pad

JavaScript

1
cf: {image: {fit: "pad"}}

scale-down#

调整图像大小以适应指定的尺寸，同时保持其原始纵横比，但从不放大图像。这是默认的 fit 行为。

当原始图像小于目标区域时，它以其原始尺寸返回。例如，请求以 2000x2000 提供 1080x720 的图像将返回 1080x720 的图像。

当较大时，它会缩小图像以适应目标区域，同时匹配原始纵横比。

在下面的示例中，1080x720 的图像被调整为适应 500x500 的目标区域。由于 scale-down 保持了原始纵横比（3:2），因此输出图像的最终尺寸为 500x333。

原始1080 x 720 (3:2)	请求500 x 500 (1:1)	输出500 x 333 (3:2)

cover#

填充整个目标区域，必要时缩小或放大图像。输出区域始终与请求的 width 和 height 尺寸完全匹配。

当原始纵横比与目标纵横比不同时，图像会被调整大小以覆盖整个目标区域，并且任何溢出部分都会被裁剪。使用 gravity 参数控制裁剪期间保留图像的哪一部分。

与 upscale 参数配合使用以控制放大图像的算法。

在下面的示例中，1080×720 的图像首先被调整为 750×500（匹配请求的高度）以适应目标区域，然后从左右边缘裁剪到其最终的 500x500 尺寸。

原始1080 x 720 (3:2)	请求500 x 500 (1:1)	输出500 x 500 (1:1)

当原始图像小于目标区域时，它会放大。要避免放大，请使用 crop。

crop#

调整图像大小以填充目标区域而不放大。

当原始图像小于目标区域时，它保持其原始大小和纵横比（像 scale-down）。

在下面的示例中，原始图像（1080x720）小于目标区域（1296x1296），因此它保持其原始大小和纵横比。

原始1080 x 720 (3:2)	请求1296 x 1296 (1:1)	输出1080 x 720 (3:2)

当原始图像大于目标区域时，它的行为类似于 cover（填充目标区域并裁剪其余部分）。

pad#

调整图像大小，使其在尺寸内尽可能大。如果适用，输出区域将被扩展以完全匹配 width 和 height 尺寸。

与 background 参数配合使用以填充任何空白或透明像素。但是，对于 Web 应用程序，您通常可以通过将 contain 选项与 CSS object-fit: contain 属性一起使用来实现相同的视觉效果，从而避免将填充像素编码到图像本身中。

在下面的示例中，原始图像（1080x720）小于目标区域（1080x1080），因此它为剩余像素创建空间。

原始1080 x 720 (3:2)	请求1080 x 1080 (1:1)	输出1080 x 1080 (1:1)

squeeze#

将图像调整为精确匹配请求的宽度和高度，而不裁剪边缘或约束部分。

当原始纵横比与目标纵横比不同时，图像将被扭曲以适应目标区域。

原始1080 x 720	输出1080 x 540

原始1080 x 1080	输出1080 x 540

flip#

水平、垂直或双向翻转图像。

接受以下值：

• h — 水平翻转图像。
• v — 垂直翻转图像。
• hv — 水平和垂直翻转图像。

Flip 可以与 rotate 参数一起使用来设置图像的方向。翻转在旋转之前执行。例如，如果您应用 flip=h,rotate=90，则图像将先水平翻转，然后旋转 90 度。

原始	flip=h	flip=v

• URL 格式
• Workers

1
flip=h

JavaScript

1
cf: {image: {flip: "h"}}

format | f#

指定图像的输出格式。

接受以下值：

• auto — 自动提供请求浏览器支持的最有效格式。当您提供 托管图像 时，这是默认的 format 选项。

• avif — 如果可能，将图像转码为 AVIF。AVIF 编码可能比编码为其他格式慢一个数量级。如果图像太大而无法快速编码为 AVIF，Cloudflare 将回退到 WebP 或 JPEG。

• webp — 将图像转码为 Google WebP 格式。使用 quality=100 返回 WebP 无损格式。

• jpeg — 以隔行渐进式 JPEG 格式对图像进行转码，其中数据以逐渐更高细节的多次传递进行压缩。

• baseline-jpeg — 以基线顺序 JPEG 格式对图像进行转码。应在目标设备不支持渐进式 JPEG 或其他现代文件格式的情况下使用。

• json — 将有关图像的信息作为 JSON 对象输出。这包含诸如图像大小（调整大小前后）、源图像的 MIME 类型和文件大小之类的数据。

• URL 格式

• Workers

1
format=auto
2
f=auto

JavaScript

1
cf: {image: {format: "avif"}}

要将 format=auto 与自定义 Worker 一起使用，您需要解析 Accept 标头。有关如何设置图像转换 Worker 的完整概述，请参阅 此示例 Worker。

用于使用 format 进行图像调整大小的自定义 Worker

1
const accept = request.headers.get("accept");
2
let image = {};
3

4

5
if (/image\/avif/.test(accept)) {
6
  image.format = "avif";
7
} else if (/image\/webp/.test(accept)) {
8
  image.format = "webp";
9
}
10

11

12
return fetch(url, { cf: { image } });

gamma#

使用乘数调整图像的曝光。Gamma 控制中间调亮度，而不影响图像的最暗或最亮部分。

• 0 和 1（默认）— 对原始伽玛值无更改。
• < 1.0 — 增加中间调亮度，使图像整体看起来更亮。
• > 1.0 — 降低中间调亮度，使图像整体看起来更暗。

原始	gamma=0.5	gamma=2

• URL 格式
• Workers

1
gamma=0.5

JavaScript

1
cf: {image: {gamma: 0.5}}

gravity | g#

指定当与 fit=cover 和 fit=crop 一起使用时应如何裁剪图像。默认情况下，Cloudflare 将朝向原始图像的中心点裁剪。

接受 auto、face、一个侧边（left、right、top、bottom）和相对坐标（XxY）。

• URL 格式
• Workers

1
gravity=auto
2
g=auto
3
gravity=face
4
gravity=left
5
gravity=0.5x1

JavaScript

1
cf: {image: {gravity: "auto"}}
2
cf: {image: {gravity: "face"}}
3
cf: {image: {gravity: "left"}}
4
cf: {image: {gravity: {x:0.5, y:0.2}}}

auto#

使用显着性算法自动设置焦点，以检测视觉上最有趣的像素。

当您提前不知道图像内容时（例如对于用户生成的内容），这很有用。对于大型图像库（例如电子商务产品画廊），此功能消除了为每个图像手动设置焦点的需要。

原始	默认裁剪	gravity=auto

face#

根据图像中的人脸自动设置焦点。

这可以与 zoom 参数结合使用，以指定图像应裁剪到人脸的紧密程度。

原始	默认裁剪	gravity=face

照片来自 Suad Kamardeen (@suadkamardeen) 在 Unsplash 上 ↗

left、right、top、bottom#

设置图像不应被裁剪的一侧。

在下面的示例中，1080x720 的图像被裁剪为 1080x400 的区域，从其底部边缘开始：

原始	gravity=bottom

XxY#

设置焦点 (X,Y)，以便输出图像的相对坐标定位在原始图像的相对坐标处。接受格式为 XxY 的坐标对，其中 X 和 Y 是介于 0.0 和 1.0 之间的小数值。

• 水平值 (X) — 0.0 是图像的左边缘，1.0 是图像的右边缘。
• 垂直值 (Y) — 0.0 是图像的上边缘，1.0 是图像的下边缘。

下面的示例使用 0.33x0.5 重力点将 900x900 的图像裁剪为 300x900：

• 原始图像和目标区域都将设置距离左边缘 1/3 宽度和距离上边缘 1/2 高度的重力点。
• 输出重力点的相对坐标定位在原始图像的相对坐标处。也就是说，定位目标区域，使其重力点位于原始图像中的相同相对位置 (0.33, 0.5)。
• 图像的变暗部分显示请求输出之外的区域，该区域将被裁剪。
• 最终裁剪结果捕获围绕重力点 (0.33, 0.5) 的 300x900 内容。

原始	对齐	裁剪	输出

通过 Workers 进行优化时，请使用对象 {x, y} 指定坐标。例如，{fit: "cover", gravity: {x:0.5, y:0.2}} 将裁剪每一侧，以在原始图像高度的 20% 处的点周围保留尽可能多的内容。

height | h#

使用正整数值设置输出图像的高度（像素）。默认情况下，Cloudflare 使用输入图像的原始高度。

设置 height 时，具体行为取决于 fit 参数。

• URL 格式
• Workers

1
height=250
2
h=250

JavaScript

1
cf: {image: {height: 250}}

metadata#

控制应为 JPEG 图像保留的不可见元数据 (EXIF) 的数量。对于所有其他输出格式（例如 WebP 或 PNG），所有元数据将始终被丢弃。

即使丢弃元数据，也会对图像应用颜色配置文件和 EXIF 旋转。

注意

如果启用了 Polish，则所有元数据可能已被删除，此选项将不起作用。

接受以下值：

• copyright（默认）— 丢弃除 EXIF 版权标签之外的所有元数据。

• keep — 保留大部分 EXIF 元数据，包括 GPS 位置（如果存在）。

• none — 丢弃所有不可见的 EXIF 元数据。

• URL 格式

• Workers

1
metadata=none

JavaScript

1
cf: {image: {metadata: "none"}}

onerror#

当致命错误阻止图像转换时，将最终用户重定向到原始源图像的 URL。接受 redirect。默认为 none。

注意

此功能仅通过 URL 接口优化远程图像时可用。不支持托管图像。

此选项仅当图像位于同一区域（接受子域）时才有效。如果原始图像来自不同的区域，则该选项不起任何作用。

这在图像需要用户身份验证且无法通过 Workers 匿名获取图像的情况下可能很有用。但是，如果源图像非常大，则不建议使用此选项。

• URL 格式

1
onerror=redirect

quality | q#

指定 JPEG、WebP 和 AVIF 格式图像的输出质量，表示为固定值或感知质量级别。默认值为 85。

• 固定质量 — 接受从 1（低质量，小文件大小）到 100（高质量，大文件大小）的正整数。
• 感知质量 — 接受 high、medium-high、medium-low 和 low。

当输出格式为 PNG 时，显式的 quality 设置允许使用格式的 PNG8（调色板）变体。

• URL 格式
• Workers

1
quality=50
2
quality=low
3
q=50

JavaScript

1
cf: {image: {quality: 50}}
2
cf: {image: {quality: "high"}}

rotate#

将图像旋转一定度数。接受 90、180 或 270。默认值为 0（无旋转）。

旋转在调整大小之前执行；width 和 height 选项将指图像旋转后的轴。

原始	rotate=180

• URL 格式
• Workers

1
rotate=90

JavaScript

1
cf: {image: {rotate: 90}}

saturation#

使用乘数调整图像的颜色饱和度。

• 0 — 完全去饱和（灰度）。
• < 1.0 — 降低颜色强度。例如，0.5 表示饱和度为一半。
• 1（默认）— 对原始饱和度无更改。
• > 1.0 — 增加颜色强度。例如，2 表示饱和度为两倍。

原始	saturation=0	saturation=2

• URL 格式
• Workers

1
saturation=0.5

JavaScript

1
cf: {image: {saturation: 0.5}}

segment#

通过用透明像素替换背景，自动分离图像的主体。接受 foreground。默认为 none。

此功能通过 Workers AI 使用名为 BiRefNet 的开源模型。阅读更多关于 Cloudflare 的 负责任的 AI 方法 ↗ 的信息。

原始	segment=foreground

• URL 格式
• Workers

1
segment=foreground

JavaScript

1
cf: {image: {segment: "foreground"}}

sharpen#

应用锐化滤镜以增强图像中的边缘定义。接受从 0（无锐化）到 10（最大锐化）的小数值。默认值为 0。缩小图像的推荐值为 1。

原始	sharpen=5

• URL 格式
• Workers

1
sharpen=2

JavaScript

1
cf: {image: {sharpen: 2}}

slow-connection-quality | scq#

每当检测到慢速连接时，覆盖 quality 值。接受与 quality 相同的固定或感知设置。默认为 none。

注意

此功能仅通过 URL 接口在基于 Chromium 的浏览器（如 Chrome、Edge 和 Opera）上进行优化时可用。

要检测慢速连接，请通过标头中的 HTTP 启用以下任何客户端提示：

1
accept-ch: rtt, save-data, ect, downlink

当存在客户端提示并且满足以下任何条件时，将应用 slow-connection-quality：

• rtt ↗：大于 150ms。

• save-data ↗：值为 “on”。

• ect ↗：值为 slow-2g|2g|3g 之一。

• downlink ↗：小于 5Mbps。

• URL 格式

1
slow-connection-quality=50
2
scq=50

trim#

移除图像周围的像素。

此功能可用于根据边框颜色或根据指定数量的像素从图像的一侧或多侧修剪图像。

Trim 会考虑 dpr 参数，并在调整大小和旋转之前执行。

1
trim=border
2
trim.height=800
3
// 这将图像的高度从图像顶部设置为 800 像素，然后修剪该点下方的所有内容
4

5

6
trim.left=800
7
// 这从图像左侧移除 800 像素
8

9

10
trim=0.1;0.2;0.1;0.2
11
// 这从顶部和底部修剪 10%，从左侧和右侧修剪 20%
12

13

14
trim.top=0.25
15
// 这从顶部修剪图像高度的 25%

1
cf: {image: {trim: {top: 12, right: 78, bottom: 34, left: 56, width: 678, height: 678}}}
2
// 使用小数从每侧修剪 10%：
3
cf: {image: {trim: {top: 0.1, right: 0.1, bottom: 0.1, left: 0.1}}}

upscale#

控制需要放大图像时使用的算法。此参数适用于任何放大的 fit 模式，例如 contain、cover 和 scale-up。当 fit=scale-down 或目标尺寸小于源尺寸时，它不起作用。

接受以下值：

• interpolate（默认）— 使用双三次插值，这可能会降低图像质量。这是未指定 upscale 时的默认行为。
• generate — 使用 AI 放大 (ESRGAN ↗) 在放大图像时产生更锐利、更详细的结果。

指定 upscale=generate 时，AI 模型在最近支持的比例（2x 或 4x）运行一次，然后调整为精确的目标尺寸。超过 4x 的比例因子通过 AI 放大到 4x 处理，其余部分使用双三次插值。

注意

由于 GPU 推理，upscale=generate 的延迟高于 upscale=interpolate。结果按照与其他优化相同的 缓存规则 进行缓存。

• URL 格式
• Workers

1
upscale=generate

JavaScript

1
cf: {image: {upscale: "generate"}}

width | w#

使用正整数值设置输出图像的宽度（像素）。默认情况下，Cloudflare 使用输入图像的原始宽度。

设置 width 时，具体行为取决于 fit 参数。

接受以下值：

• 以像素为单位的数字（例如，250）。

• auto — 根据有关浏览器和设备的可用信息，自动以最佳宽度提供图像。接受 wbreakpoints（客户端提示）、wmobile（用户代理检测）和 wdesktop（用户代理检测）作为子参数。

• URL 格式

• Workers

1
width=250
2
w=250

JavaScript

1
cf: {image: {width: 250}}

1
wbreakpoints=320;768;960;1920 // 将最大断点更改为 1920 像素
2
wbreakpoints=320;768;960;1200;1920 // 在 1920 像素处添加另一个断点

1
cf: {image: {wbreakpoints: "320;768;960;1920"}}

zoom | face-zoom#

指定当与 gravity=face 选项结合使用时，图像朝向检测到的人脸裁剪的紧密程度。接受介于 0.0（尽可能包含更多背景）和 1.0（尽可能紧密地朝向人脸裁剪图像）之间的有效范围。默认值为 0。

• URL 格式
• Workers

1
zoom=0.1

JavaScript

1
cf: {image: {zoom: 0.5}}