getImageUrl を webp にする

Author: a01sa01to

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

@@ -281,7 +281,7 @@ export const EpisodeDetailEditor: React.FC<Props> = ({ book, episode }) => {
                   src={
                     thumbnailUrl ??
                     (episode != null
-                      ? getImageUrl({ format: 'jpg', height: 200, imageId: episode.image.id, width: 200 })
+                      ? getImageUrl({ format: 'webp', height: 200, imageId: episode.image.id, width: 200 })
                       : undefined)
                   }
                   width={200}

workspaces/admin/src/pages/AuthorListPage/internal/AuthorDetailModal/AuthorDetailContent.tsx

@@ -33,7 +33,7 @@ export const AuthorDetailContent: React.FC<AuthorDetailContentProps> = ({ author
   return (
     <Box aria-label="作者詳細" as="section">
       <Flex align="center" pb={2}>
-        <Avatar name={author.name} size="xl" src={getImageUrl({ format: 'jpg', imageId: author.image.id })} />
+        <Avatar name={author.name} size="xl" src={getImageUrl({ format: 'webp', imageId: author.image.id })} />
         <Stack p={4} spacing={2}>
           <StackItem>
             <Text fontWeight="bold">{author.name}</Text>

workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/BookDetailContent.tsx

@@ -43,7 +43,7 @@ export const BookDetailContent: React.FC<BookDetailContentProps> = ({ book, onCl
           aspectRatio="3 / 4"
           height={256}
           objectFit="cover"
-          src={getImageUrl({ format: 'jpg', imageId: book.image.id })}
+          src={getImageUrl({ format: 'webp', imageId: book.image.id })}
           width={192}
         />
         <Stack p={4} spacing={2}>

workspaces/app/src/foundation/hooks/useImage.ts

@@ -8,7 +8,7 @@ export const useImage = ({ height, imageId, width }: { height: number; imageId:
 
     const img = new Image();
     img.src = getImageUrl({
-      format: 'jpg',
+      format: 'webp',
       height: height * dpr,
       imageId,
       width: width * dpr,
@@ -39,7 +39,7 @@ export const useImage = ({ height, imageId, width }: { height: number; imageId:
       ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, width * dpr, height * dpr);
     }
 
-    return canvas.toDataURL('image/png');
+    return canvas.toDataURL('image/webp');
   }, [height, imageId, width]);
 
   return value;