From 62f0f0d0f02e6e670e90b3d5a0c7371df438d299 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Fri, 11 Apr 2025 18:39:56 +0200
Subject: [PATCH] use optimized image for card display

---
 src/app/_components/joker-card.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/_components/joker-card.tsx b/src/app/_components/joker-card.tsx
index 16c4796..6d8ca69 100644
--- a/src/app/_components/joker-card.tsx
+++ b/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}