Merge pull request #421 from DTS-STN/set-images-sizes

[frontend] set images sizes prop
DTS-STN · Jun 15, 2023 · 3709a60 · 3709a60
2 parents 6617f14 + 3367f31
commit 3709a60
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/frontend/src/components/HeroBanner.tsx b/frontend/src/components/HeroBanner.tsx
@@ -38,6 +38,7 @@ export const HeroBanner: FC<HeroBannerProps> = ({ children, imageProps, classNam
               className={`object-cover ${imageProps.className ?? ''}`}
               fill
               placeholder="blur"
+              sizes="(max-width: 768px) 100vw, 33vw"
               src={imageProps.src}
             />
             <Image

diff --git a/frontend/src/pages/learn/index.tsx b/frontend/src/pages/learn/index.tsx
@@ -37,7 +37,14 @@ const LearnCard: FC<LearnCardProps> = ({ desciption, href, id, imageSrc, minRead
     <Card id={`${uniqueId}-card-${id}`} className="h-full">
       <CardActionArea component={Link} href={href} className="h-full" aria-describedby={`${uniqueId}-card-${id}-title`}>
         <div className="relative h-64 ">
-          <Image fill alt="" src={imageSrc} className="object-cover" placeholder="blur" />
+          <Image
+            alt=""
+            className="object-cover"
+            fill
+            placeholder="blur"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            src={imageSrc}
+          />
           <Image src="/assets/bottom-top.svg" width={34} height={360} className="absolute bottom-0 w-full" alt="" />
         </div>
         <CardContent className="mt-4 p-8">