Get optimized images

src/components/GameCard.tsx

@@ -1,6 +1,7 @@
 import { Card, CardBody, Heading, HStack, Image, Text } from '@chakra-ui/react'
 import React from 'react'
 import { Game } from '../hooks/useGames'
+import getCroppedImageUrl from '../services/image-url'
 import CriticScore from './CriticScore'
 import PlatformIconList from './PlatformIconList'
 
@@ -11,7 +12,7 @@ interface Props {
 const GameCard = ({ game }: Props) => {
   return (
     <Card borderRadius={10} overflow='hidden'>
-      <Image src={game.background_image} />
+      <Image src={getCroppedImageUrl(game.background_image)} />
       <CardBody>
         <Heading fontSize='2xl'>{game.name}</Heading>
         <HStack justifyContent='space-between'>

src/services/image-url.ts

@@ -0,0 +1,8 @@
+
+const getCroppedImageUrl = (url: string) => {
+  const target = 'media/';
+  const index = url.indexOf(target) + target.length;
+  return url.slice(0, index) + 'crop/600/400/' + url.slice(index);
+}
+
+export default getCroppedImageUrl;