色んなサイズの画像を最適化

workspaces/app/src/features/book/components/BookCard.tsx

@@ -7,7 +7,6 @@ import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
 import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
 const _Wrapper = styled(Link)`
@@ -38,8 +37,8 @@ type Props = {
 };
 
 const BookCard: React.FC<Props> = ({ book }) => {
-  const imageUrl = useImage({ height: 128, imageId: book.image.id, width: 192 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = `/raw-images/${book.image.id}_288x407.avif`;
+  const authorImageUrl = `/raw-images/${book.author.image.id}_32x32.avif`;
 
   return (
     <_Wrapper href={`/books/${book.id}`}>

workspaces/app/src/features/feature/components/FeatureCard.tsx

@@ -7,7 +7,6 @@ import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
 import { Link } from '../../../foundation/components/Link';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
 const _Wrapper = styled(Link)`
@@ -49,8 +48,8 @@ type Props = {
 };
 
 const FeatureCard: React.FC<Props> = ({ book }) => {
-  const imageUrl = useImage({ height: 96, imageId: book.image.id, width: 96 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = `/raw-images/${book.image.id}_144x204.avif`;
+  const authorImageUrl = `/raw-images/${book.author.image.id}_32x32.avif`;
 
   return (
     <_Wrapper href={`/books/${book.id}`}>

workspaces/app/src/features/ranking/components/RankingCard.tsx

@@ -11,7 +11,6 @@ import { Link } from '../../../foundation/components/Link';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
 const _Wrapper = styled.li`
@@ -43,8 +42,8 @@ type Props = {
 };
 
 const RankingCard: React.FC<Props> = ({ book }) => {
-  const imageUrl = useImage({ height: 96, imageId: book.image.id, width: 96 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = `/raw-images/${book.image.id}_144x204.avif`;
+  const authorImageUrl = `/raw-images/${book.author.image.id}_32x32.avif`;
 
   return (
     <_Wrapper>

workspaces/app/src/pages/AuthorDetailPage/index.tsx

@@ -12,7 +12,6 @@ import { Image } from '../../foundation/components/Image';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
-import { useImage } from '../../foundation/hooks/useImage';
 import { Color, Space, Typography } from '../../foundation/styles/variables';
 
 const _HeadingWrapper = styled.section`
@@ -37,7 +36,7 @@ const AuthorDetailPage: React.FC = () => {
 
   const { data: author } = useAuthor({ params: { authorId } });
 
-  const imageUrl = useImage({ height: 128, imageId: author.image.id, width: 128 });
+  const imageUrl = `/raw-images/${author.image.id}_128x128.avif`;
   const bookListA11yId = useId();
 
   return (

workspaces/app/src/pages/BookDetailPage/index.tsx

@@ -16,7 +16,6 @@ import { Link } from '../../foundation/components/Link';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
-import { useImage } from '../../foundation/hooks/useImage';
 import { Color, Space, Typography } from '../../foundation/styles/variables';
 
 import { BottomNavigator } from './internal/BottomNavigator';
@@ -54,8 +53,8 @@ const BookDetailPage: React.FC = () => {
 
   const [isFavorite, toggleFavorite] = useAtom(FavoriteBookAtomFamily(bookId));
 
-  const bookImageUrl = useImage({ height: 256, imageId: book.image.id, width: 192 });
-  const auhtorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const bookImageUrl = `/raw-images/${book.image.id}_288x407.avif`;
+  const authorImageUrl = `/raw-images/${book.author.image.id}_32x32.avif`;
 
   const handleFavClick = useCallback(() => {
     toggleFavorite();
@@ -83,9 +82,9 @@ const BookDetailPage: React.FC = () => {
           <Spacer height={Space * 1} />
 
           <_AuthorWrapper href={`/authors/${book.author.id}`}>
-            {auhtorImageUrl != null && (
+            {authorImageUrl != null && (
               <_AvatarWrapper>
-                <Image alt={book.author.name} height={32} objectFit="cover" src={auhtorImageUrl} width={32} />
+                <Image alt={book.author.name} height={32} objectFit="cover" src={authorImageUrl} width={32} />
               </_AvatarWrapper>
             )}
             <Text color={Color.MONO_100} typography={Typography.NORMAL14}>