JXLをやめる

workspaces/admin/src/features/episodes/components/ComicPageImage.tsx

@@ -3,9 +3,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
 import { decrypt } from '@wsh-2024/image-encrypt/src/decrypt';
-
-import { getImageUrl } from '../../../lib/image/getImageUrl';
-
 type Props = {
   pageImageId: string;
 };
@@ -14,10 +11,7 @@ export const ComicPageImage: React.FC<Props> = ({ pageImageId }) => {
   const { data: blob } = useQuery({
     queryFn: async ({ queryKey: [, { pageImageId }] }) => {
       const image = new Image();
-      image.src = getImageUrl({
-        format: 'jxl',
-        imageId: pageImageId,
-      });
+      image.src = `/raw-images/${pageImageId}.avif`;
       await image.decode();
 
       const canvas = document.createElement('canvas');

workspaces/app/src/features/viewer/components/ComicViewerPage.tsx

@@ -4,8 +4,6 @@ import styled from 'styled-components';
 
 import { decrypt } from '@wsh-2024/image-encrypt/src/decrypt';
 
-import { getImageUrl } from '../../../lib/image/getImageUrl';
-
 const _Canvas = styled.canvas`
   height: 100%;
   width: auto;
@@ -22,10 +20,7 @@ export const ComicViewerPage = ({ pageImageId }: Props) => {
 
   useAsync(async () => {
     const image = new Image();
-    image.src = getImageUrl({
-      format: 'jxl',
-      imageId: pageImageId,
-    });
+    image.src = `/raw-images/${pageImageId}.avif`;
     await image.decode();
 
     const canvas = ref.current!;

workspaces/client/src/serviceworker/index.ts

@@ -1,26 +1,9 @@
 /// <reference types="@types/serviceworker" />
 
-import { transformJpegXLToBmp } from './transformJpegXLToBmp';
-import { zstdFetch as fetch } from './zstdFetch';
-
 self.addEventListener('install', (ev: ExtendableEvent) => {
   ev.waitUntil(self.skipWaiting());
 });
 
 self.addEventListener('activate', (ev: ExtendableEvent) => {
   ev.waitUntil(self.clients.claim());
 });
-
-self.addEventListener('fetch', (ev: FetchEvent) => {
-  ev.respondWith(onFetch(ev.request));
-});
-
-async function onFetch(request: Request): Promise<Response> {
-  const res = await fetch(request);
-
-  if (res.headers.get('Content-Type') === 'image/jxl') {
-    return transformJpegXLToBmp(res);
-  } else {
-    return res;
-  }
-}

workspaces/server/src/routes/api/images/postImage.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 
 import { createRoute, OpenAPIHono } from '@hono/zod-openapi';
+import sharp from 'sharp';
 
 import { PostImageRequestBodySchema } from '@wsh-2024/schema/src/api/images/PostImageRequestBody';
 import { PostImageResponseSchema } from '@wsh-2024/schema/src/api/images/PostImageResponse';
@@ -54,10 +55,9 @@ app.openapi(route, async (c) => {
   await fs.mkdir(IMAGES_PATH, {
     recursive: true,
   });
-  await fs.writeFile(
-    path.resolve(IMAGES_PATH, `./${result.value.id}.jpg`),
-    Buffer.from(await formData.content.arrayBuffer()),
-  );
+  await sharp(Buffer.from(await formData.content.arrayBuffer()))
+    .avif({ quality: 30 })
+    .toFile(path.resolve(IMAGES_PATH, `./${result.value.id}.avif`));
 
   return c.json(result.value);
 });