optimize images

Author: AykutSarac

src/containers/Landing/HeroSection.tsx

@@ -107,7 +107,7 @@ export const HeroSection = () => {
           <Link href="https://todiagram.com?ref=jsoncrack.com">
             <Flex justify="center" fz="sm" c="gray.8" gap="8" align="center">
               built by
-              <Image src="/assets/todiagram_logo.png" alt="Todiagram Logo" h={14} />
+              <Image src="/assets/todiagram_logo.png" alt="Todiagram Logo" h={14} loading="eager" />
             </Flex>
           </Link>
           <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>

src/containers/Landing/LovedBy.tsx

@@ -90,6 +90,7 @@ export const LovedBy = ({ stars }: LovedByProps) => {
           leftSection={
             <Image
               src="https://todiagram.com/logo.svg"
+              loading="lazy"
               alt="Todiagram Logo"
               w={14}
               h={14}

src/containers/Landing/Section1.tsx

@@ -117,7 +117,7 @@ export const Section1 = () => {
           </Link>
         </Stack>
         <StyledDottedContainer>
-          <Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" />
+          <Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
           <JsonInput
             w={273}
             rows={12}

src/layout/JsonCrackLogo.tsx

@@ -48,6 +48,7 @@ export const JSONCrackLogo = ({ fontSize = "1.2rem", hideText, hideLogo, ...prop
         {!hideLogo && (
           <Image
             src="/assets/logo.svg"
+            loading="eager"
             width={parseFloat(fontSize) * 18}
             height={parseFloat(fontSize) * 18}
             alt="logo"