use optimized image for card display

src/app/_components/joker-card.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { OptimizedImage } from '@/components/optimized-image'
 import type { ElementType } from 'react'
 import slugify from 'slugify'
 
@@ -16,7 +17,11 @@ export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
       className={'flex scroll-mt-36 flex-col items-center gap-2'}
       id={`${slugify(name, { lower: true, strict: true })}-toc`}
     >
-      <img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} />
+      <OptimizedImage
+        src={img}
+        alt={name}
+        className={'!m-0 max-w-24 rounded-md'}
+      />
       <div className={'flex flex-col gap-1'}>
         <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
           {name}