make everything lazy loading and resized a lot of images

src/components/BounceFeatures.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { ReactNode } from "react";
 import { motion } from "framer-motion";
 import { WindowMockup } from "./WindowMockup";
-
+import Image from "@/components/Image";
 export const BouncyCardsFeatures = () => {
     return (
         <section className="mx-auto text-surface-800">
@@ -16,12 +16,12 @@ export const BouncyCardsFeatures = () => {
                         <div className="hidden md:block">
                             <div className="absolute  bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
                                 <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                    <img src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
+                                    <Image src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
                                 </span>
                             </div>
                             <div className="absolute  bottom-0 left-1/2 top-0 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
                                 <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                    <img src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
+                                    <Image src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
                                 </span>
                             </div>
                         </div>
@@ -41,7 +41,7 @@ export const BouncyCardsFeatures = () => {
                     <CardDescription>Brand accounts allow you to manage multiple accounts from one place</CardDescription>
                     <div className="absolute bottom-0 left-4 right-4 top-28 translate-y-8 rounded-t-2xl bg-transparent p-4 transition-transform duration-500 group-hover:translate-y-2 group-hover:rotate-[2deg]">
                         <span className="block text-center font-semibold text-indigo-50">
-                            <img src="/stats-mockup.webp" />
+                            <Image src="/stats-mockup.webp" />
                         </span>
                     </div>
                 </BounceCard>
@@ -50,12 +50,12 @@ export const BouncyCardsFeatures = () => {
                     <CardDescription>Powerful link shortening tool to help your brand image</CardDescription>
                     <div className="absolute  bottom-0 left-4 right-4 top-28 translate-y-8 rounded-t-2xl bg-transparent p-4 transition-transform duration-500 group-hover:translate-y-4 group-hover:rotate-[2deg]">
                         <span className="block text-center w-full font-semibold text-indigo-50">
-                            <img src="/linkshortener.webp" />
+                            <Image src="/linkshortener.webp" />
                         </span>
                     </div>
                     <div className="absolute  bottom-0 left-4 right-4 top-14 translate-y-24 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:rotate-[2deg]">
                         <span className="block text-center w-full font-semibold text-indigo-50">
-                            <img src="/linkshortenerbutton.webp" />
+                            <Image src="/linkshortenerbutton.webp" />
                         </span>
                     </div>
                 </BounceCard>
@@ -64,12 +64,12 @@ export const BouncyCardsFeatures = () => {
                     <CardDescription className="z-20">Helping streamers showcase their livestreams, no matter the platform</CardDescription>
                     <div className="absolute left-4 right-4 top-0 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-transform duration-[250ms] group-hover:-translate-y-2 group-hover:rotate-[2deg] ">
                         <span className="block text-center w-full font-semibold text-indigo-50">
-                            <img src="/livestreambackdrop.webp" />
+                            <Image src="/livestreambackdrop.webp" />
                         </span>
                     </div>
                     <div className="absolute  bottom-0 left-4 right-4 top-14 translate-y-24 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-16 group-hover:rotate-[2deg]">
                         <span className="block text-center w-full font-semibold text-indigo-50">
-                            <img src="/livenowasset.webp" />
+                            <Image src="/livenowasset.webp" />
                         </span>
                     </div>
                 </BounceCard>
@@ -80,17 +80,17 @@ export const BouncyCardsFeatures = () => {
                     </div>
                     <div className="absolute  bottom-0 left-4 right-4 top-16 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-transform duration-[250ms] group-hover:-translate-y-2 group-hover:rotate-[-2deg]">
                         <span className="block text-center w-full font-semibold text-indigo-50">
-                            <img src="/mediakitbackdrop.webp" />
+                            <Image src="/mediakitbackdrop.webp" />
                         </span>
                     </div>
                     <div className="absolute bottom-0 right-36 top-36 scale-90 translate-y-20 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:rotate-6">
                         <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                            <img src="/twittercard.webp" />
+                            <Image src="/twittercard.webp" />
                         </span>
                     </div>
                     <div className="absolute  bottom-0 left-36 top-36 scale-75 translate-y-20 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:-rotate-6">
                         <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                            <img src="/youtubecard.webp" />{" "}
+                            <Image src="/youtubecard.webp" />{" "}
                         </span>
                     </div>
                 </BounceCard>

src/components/Branding.tsx

@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "@/components/Image";
 
 const Branding = () => {
     const variants = {
@@ -12,7 +13,7 @@ const Branding = () => {
                 <a href="/">
                     <span className="flex items-center px-4 font-semibold text-[#1F1F1F] duration-300 bg-surface-100 py-1 rounded-badge gap-2">
                         <div className="group-hover:-rotate-0 rotate-45 transition-all">
-                            <img src="/icon.svg" className="w-6 h-6" />
+                            <Image src="/icon.svg" className="w-6 h-6" />
                         </div>
                         <span className="font-bold text-2xl doras-logo">doras.to</span>
                     </span>

src/components/HoverBlockDetail.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { BounceCard, CardTitle, CardDescription } from "./BounceFeatures";
+import Image from "@/components/Image";
 
 interface Props {
     // Define the props for the component here
@@ -20,12 +21,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
                     <div className="-z-10">
                         <div className="absolute bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
+                                <Image src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
                             </span>
                         </div>
                         <div className="absolute bottom-0 left-1/2 top-0 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
+                                <Image src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
                             </span>
                         </div>
                     </div>
@@ -40,12 +41,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
                     <div className="-z-10">
                         <div className="absolute bottom-0 rotate-6 left-1/2 top-20 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:translate-y-40 group-hover:-rotate-3">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
+                                <Image src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
                             </span>
                         </div>
                         <div className="absolute rotate-6 bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-5 group-hover:-rotate-6">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
+                                <Image src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
                             </span>
                         </div>
                     </div>
@@ -60,12 +61,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
                     <div className="-z-10">
                         <div className="absolute bottom-0 rotate-6 left-1/2 top-20 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:translate-y-40 group-hover:-rotate-3">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
+                                <Image src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
                             </span>
                         </div>
                         <div className="absolute rotate-6 bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-5 group-hover:-rotate-6">
                             <span className=" mx-auto text-center w-full font-semibold text-indigo-50">
-                                <img src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
+                                <Image src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
                             </span>
                         </div>
                     </div>

src/components/Image.tsx

@@ -0,0 +1,10 @@
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    class?: string;
+}
+
+const Image: React.FC<ImageProps> = ({ class: classProp, className, style, ...props }) => {
+    const classes = className || classProp;
+    return <img className={classes} style={style} {...props} loading="lazy" />;
+};
+
+export default Image;

src/components/Testimonials.tsx

@@ -109,7 +109,7 @@ const Card = ({
             onClick={() => setSelected(position)}
             className="absolute top-0 left-0 w-full min-h-full p-8 lg:p-12 cursor-pointer flex flex-col justify-between rounded-3xl"
         >
-            <img src={imageSrc} className="w-24 h-24 rounded-full" />
+            <img loading="lazy" src={imageSrc} className="w-24 h-24 rounded-full" />
             <p className="text-lg lg:text-xl font-light italic mb-8">"{description}"</p>
             <div>
                 <span className="block font-semibold text-lg">{name}</span>
@@ -148,7 +148,7 @@ const testimonials = [
         link: "brady"
     },
     {
-        imageSrc: "./yellowbeaniegirl.png",
+        imageSrc: "./yellowbeaniegirl.webp",
         description: "Doras has been an amazing tool with my art. It gives some additional insight into my audience - where they are coming from and what they're clicking in my links. This has been a tremendous help in sharing and selling my art online.",
         name: "Yellow Beanie Girl",
         title: "Artist",

src/components/linkspage/BioBlock.tsx

@@ -1,36 +1,34 @@
-import { downloadImageUser } from "@/supabase"
+import { downloadImageUser } from "@/supabase";
 import BioCheck from "./bio";
 import type { ServerDataItem } from "@/server_types";
 import * as lucide from "lucide-react";
+import Image from "@/components/Image";
+
 interface Props {
     user: ServerDataItem;
     textColorSolid: string;
 }
 const BioBlock: React.FC<Props> = ({ user, textColorSolid }) => {
     return (
         <div className="flex flex-col justify-center items-center">
-            <img src={downloadImageUser(user.pic)} className={"w-44 h-44 object-cover mask " + user.design.profile_pic_shape} />
+            <Image src={downloadImageUser(user.pic)} className={"w-44 h-44 object-cover mask " + user.design.profile_pic_shape} />
             <div className="flex items-center mx-auto text-center">
                 <h2 className="flex items-center text-4xl font-black" style={{ color: textColorSolid }}>
                     {user.displayname}
-                    {
-                        user.account_type == "premium" && (
-                            <div className="tooltip" data-tip="Premium">
-                                <lucide.BadgeCheck className="ml-1" />
-                            </div>
-                        )
-                    }
-                    {
-                        user.account_type == "staff" && (
-                            <div className="tooltip tooltip-primary tooltip-left z-50" data-tip="Staff">
-                                <lucide.ShieldCheck className="ml-1" />
-                            </div>
-                        )
-                    }
+                    {user.account_type == "premium" && (
+                        <div className="tooltip" data-tip="Premium">
+                            <lucide.BadgeCheck className="ml-1" />
+                        </div>
+                    )}
+                    {user.account_type == "staff" && (
+                        <div className="tooltip tooltip-primary tooltip-left z-50" data-tip="Staff">
+                            <lucide.ShieldCheck className="ml-1" />
+                        </div>
+                    )}
                 </h2>
             </div>
             <BioCheck color={textColorSolid} bio={user?.bio || ""} />
         </div>
-    )
-}
+    );
+};
 export default BioBlock;

src/components/navbar/navbar.astro

@@ -5,6 +5,7 @@ import { NavMenuDesktop } from "@/components/navbar/NavMenuDesktop";
 import { JoinWaitlist } from "@/components/JoinWaitlist";
 import { Button } from "@/components/ui/button";
 import { BiLogoDiscord } from "react-icons/bi/index.js";
+import Image from "@/components/Image";
 ---
 
 <Container>
@@ -13,7 +14,7 @@ import { BiLogoDiscord } from "react-icons/bi/index.js";
             <div class="block md:hidden">
                 <!-- <DropdownMenuNav client:only /> -->
             </div>
-            <a class="text-xl flex items-center font-bold gap-2"><img src="/assets/icon.svg" class="w-10 h-10" /><span>Doras.to</span></a>
+            <a class="text-xl flex items-center font-bold gap-2"><img loading="lazy" src="/assets/icon.svg" class="w-10 h-10" /><span>Doras.to</span></a>
         </div>
         <div class="navbar-center hidden md:flex">
             <!-- <NavMenuDesktop client:only /> -->

src/pages/[user]/index.astro

@@ -8,6 +8,7 @@ import BioCheck from "@/components/linkspage/bio";
 import ChipTabs from "@/components/linkspage/tabs";
 import { getTextColorForBackground } from "@/lib/utils";
 import BioBlock from "@/components/linkspage/BioBlock";
+
 const { page } = Astro.props;
 
 const { user } = Astro.params;
@@ -132,7 +133,7 @@ if (!user_user.theme.font || user_user.theme.font.font.length == 0) {
                                     }
                                     return (
                                         <a href={"https://github.com/" + link.url} target="_blank" class="w-full">
-                                            <img style={`border-radius:12px;`} width="100%" src={`https://github-stats.doras.to/?username=${link.url}&theme=dark&show_icons=true&bg_color=${link.colour.background.replace("#", "")}&text_color=${TextColour}&icon_color=${TextColour}&title_color=${TextColour}&hide_border=true&hide_rank=${!link.options?.rank}&hide=${hide}`} />;
+                                            <img loading="lazy" style={`border-radius:12px;`} width="100%" src={`https://github-stats.doras.to/?username=${link.url}&theme=dark&show_icons=true&bg_color=${link.colour.background.replace("#", "")}&text_color=${TextColour}&icon_color=${TextColour}&title_color=${TextColour}&hide_border=true&hide_rank=${!link.options?.rank}&hide=${hide}`} />;
                                         </a>
                                     );
                                 }