added ImageMod component for image optimization

src/pages/about.astro

@@ -1,7 +1,7 @@
 ---
+import ImageMod from "@/components/ImageMod.astro";
 import Base from "@/layouts/Base.astro";
 import { markdownify } from "@/lib/utils/textConverter";
-import { Image } from "astro:assets";
 import { getEntry } from "astro:content";
 
 const about = await getEntry("about", "-index");
@@ -21,7 +21,7 @@ const { title, description, meta_title, image } = about.data;
         <div class="text-center md:col-10 lg:col-7">
           {
             image && (
-              <Image
+              <ImageMod
                 class="mx-auto mb-6 rounded-lg"
                 src={image}
                 width={200}

src/pages/authors/[single].astro

@@ -1,10 +1,10 @@
 ---
 import BlogCard from "@/components/BlogCard.astro";
+import ImageMod from "@/components/ImageMod.astro";
 import Social from "@/components/Social.astro";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { slugify } from "@/lib/utils/textConverter";
-import { Image } from "astro:assets";
 
 // get all static paths for authors
 export async function getStaticPaths() {
@@ -46,7 +46,7 @@ const postFilterByAuthor = posts.filter(
         <div class="text-center lg:col-4">
           {
             image && (
-              <Image
+              <ImageMod
                 src={image}
                 class="mx-auto mb-10 rounded"
                 height={200}

src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
+import ImageMod from "@/components/ImageMod.astro";
 import Base from "@/layouts/Base.astro";
 import { markdownify } from "@/lib/utils/textConverter";
 import CallToAction from "@/partials/CallToAction.astro";
 import Testimonial from "@/partials/Testimonial.astro";
 import type { Button, Feature } from "@/types";
-import { Image } from "astro:assets";
 import { getEntry } from "astro:content";
 import { FaCheck } from "react-icons/fa/index.js";
 
@@ -43,7 +43,7 @@ const { banner, features }: Homepage = homepage.data;
         {
           banner.image && (
             <div class="col-12">
-              <Image
+              <ImageMod
                 src={banner.image}
                 height={380}
                 width={1200}
@@ -67,7 +67,7 @@ const { banner, features }: Homepage = homepage.data;
             <div
               class={`mb:md-0 mb-6 md:col-5 ${index % 2 !== 0 && "md:order-2"}`}
             >
-              <Image
+              <ImageMod
                 src={feature.image}
                 height={480}
                 width={520}