Optimise blog thumbnail images

Author: DilsonsPickles

src/components/card/NEWBlogPostCard.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from 'astro:assets';
+import { Image } from "astro:assets";
 
 export interface Props {
   title: string;
@@ -9,8 +9,7 @@ export interface Props {
   cover: ImageMetadata;
   coverAlt: string;
 }
-const { title, href, publishDate, description, cover, coverAlt } =
-  Astro.props;
+const { title, href, publishDate, description, cover, coverAlt } = Astro.props;
 
 const options: Intl.DateTimeFormatOptions = {
   weekday: "long",
@@ -20,8 +19,17 @@ const options: Intl.DateTimeFormatOptions = {
 };
 ---
 
-<a href=`/blog/${href}` class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200">
-  <Image class="rounded-md aspect-image" alt={coverAlt} src={cover} />
+<a
+  href=`/blog/${href}`
+  class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200"
+>
+  <Image
+    width="800"
+    quality="80"
+    class="rounded-md aspect-image"
+    alt={coverAlt}
+    src={cover}
+  />
   <div class="flex flex-col gap-1">
     <small>{publishDate.toLocaleDateString("en-US", options)}</small>
     <h3>{title}</h3>
@@ -30,4 +38,4 @@ const options: Intl.DateTimeFormatOptions = {
   <p>
     {description.length > 200 ? `${description.slice(0, 200)}...` : description}
   </p>
-</a>
+</a>