Deno Deploy で無料画像最適化(avif対応)

1import { optimizeImage } from "npm:wasm-image-optimization-avif/esm";
2
3const isValidUrl = (url: string) => {
4  try {
5    new URL(url);
6    return true;
7  } catch (_e) {
8    return false;
9  }
10};
11
12const isType = (accept: string | null, type: string) => {
13  return (
14    accept
15      ?.split(",")
16      .map((format) => format.trim())
17      .some((format) => [`image/${type}`, "*/*", "image/*"].includes(format)) ??
18    true
19  );
20};
21
22Deno.serve(async (request) => {
23  const url = new URL(request.url);
24  const params = url.searchParams;
25  const type = ["avif", "webp", "png", "jpeg"].find(
26    (v) => v === params.get("type")
27  ) as "avif" | "webp" | "png" | "jpeg" | undefined;
28  const accept = request.headers.get("accept");
29  const isAvif = isType(accept, "avif");
30  const isWebp = isType(accept, "webp");
31
32  const cache = await caches.open(
33    `image-${isAvif ? "-avif" : ""}${isWebp ? "-webp" : ""}`
34  );
35
36  const cached = await cache.match(request);
37  if (cached) {
38    return cached;
39  }
40
41  const imageUrl = params.get("url");
42  if (!imageUrl || !isValidUrl(imageUrl)) {
43    return new Response("url is required", { status: 400 });
44  }
45
46  if (isAvif) {
47    url.searchParams.append("avif", isAvif.toString());
48  } else if (isWebp) {
49    url.searchParams.append("webp", isWebp.toString());
50  }
51
52  const cacheKey = new Request(url.toString());
53  const cachedResponse = await cache.match(cacheKey);
54  if (cachedResponse) {
55    return cachedResponse;
56  }
57
58  const width = params.get("w");
59  const quality = params.get("q");
60
61  const [srcImage, contentType] = await fetch(imageUrl)
62    .then(async (res) =>
63      res.ok
64        ? ([await res.arrayBuffer(), res.headers.get("content-type")] as const)
65        : []
66    )
67    .catch(() => []);
68
69  if (!srcImage) {
70    return new Response("image not found", { status: 404 });
71  }
72
73  if (contentType && ["image/svg+xml", "image/gif"].includes(contentType)) {
74    const response = new Response(srcImage, {
75      headers: {
76        "Content-Type": contentType,
77        "Cache-Control": "public, max-age=31536000, immutable",
78      },
79    });
80    cache.put(request, response.clone());
81    return response;
82  }
83
84  const format =
85    type ??
86    (isAvif
87      ? "avif"
88      : isWebp
89      ? "webp"
90      : contentType === "image/jpeg"
91      ? "jpeg"
92      : "png");
93  const image = await optimizeImage({
94    image: srcImage,
95    width: width ? parseInt(width) : undefined,
96    quality: quality ? parseInt(quality) : undefined,
97    format,
98  });
99  const response = new Response(image, {
100    headers: {
101      "Content-Type": `image/${format}`,
102      "Cache-Control": "public, max-age=31536000, immutable",
103      date: new Date().toUTCString(),
104    },
105  });
106  cache.put(request, response.clone());
107  return response;
108});