Improve the image loading

src/components/OnBoarding/OmBoardingImage.css

@@ -0,0 +1,6 @@
+.onboarding-image {
+  position: absolute;
+  right: -40px;
+  max-height: 90%;
+  width: auto;
+}

src/components/OnBoarding/OnBoardingImage.tsx

@@ -0,0 +1,35 @@
+import "./OmBoardingImage.css";
+
+export function OnBoardingImage() {
+  return (
+    <picture>
+      <source
+        srcSet="/img/onboarding@4x.webp 4x, 
+                            /img/onboarding@3x.webp 3x, 
+                            /img/onboarding@2x.webp 2x, 
+                            /img/onboarding@1.5x.webp 1.5x, 
+                            /img/onboarding.webp 1x"
+        sizes="(max-width: 600px) 100vw, 
+                           (max-width: 1200px) 50vw, 
+                           33vw"
+        type="image/webp"
+      />
+      <source
+        srcSet="/img/onboarding@4x.png 4x, 
+                            /img/onboarding@3x.png 3x, 
+                            /img/onboarding@2x.png 2x, 
+                            /img/onboarding@1.5x.png 1.5x, 
+                            /img/onboarding.png 1x"
+        sizes="(max-width: 600px) 100vw, 
+                           (max-width: 1200px) 50vw, 
+                           33vw"
+        type="image/png"
+      />
+      <img
+        src="/img/onboarding.png"
+        alt="Onboarding Image"
+        className="onboarding-image"
+      />
+    </picture>
+  );
+}

src/routes/index.css

@@ -1,10 +1,5 @@
 .index {
   width: 100%;
-  background-image: url(/bg.png);
-  background-position: 10px 10px;
-  background-position: right;
-  background-repeat: no-repeat;
-  background-size: auto 90%;
   padding: 3rem 6rem;
 }
 

src/routes/index.tsx

@@ -11,6 +11,7 @@ import { classnames } from "../utils/classnames";
 import { OnBoardingStepThree } from "../components/OnBoarding/OnBoardingStepThree";
 import { attributes } from "../utils/attributes";
 import { CodexLogo } from "../components/CodexLogo/CodexLogo";
+import { OnBoardingImage } from "../components/OnBoarding/OnBoardingImage";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -80,6 +81,9 @@ function Index() {
             </div>
           </div>
         </div>
+        <div className="index-column">
+          <OnBoardingImage />
+        </div>
         <div className="index-columnRight">
           <div className="index-logo">
             <div className="index-network">