landing: optimize image payload for issue #10 (#20)

Replace oversized exported PNG assets with resized descriptive image files and WebP variants, update CSS/HTML references, and lazy-load below-the-fold visuals to cut homepage transfer size.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Gui-FernandesBR

.github/copilot-instructions.md

@@ -24,9 +24,9 @@ This is a **static marketing website** for RocketPy (rocketpy.org) - an open-sou
 - **Color scheme**: Dark blue/space theme with gradients (`rgba(33, 35, 50, 0.65)`, `rgba(3, 11, 40, 1)`)
 
 ### Image Assets
-- Background images referenced in CSS (e.g., `url("../images/Default Background.png")`)
-- Images use cryptic names from design tool exports (`v35_22.png`, `v73_37.png`)
-- Favicon and logo files in `images/` directory
+- Background images are referenced in CSS using optimized assets (e.g., `url("../images/hero-background.png")`)
+- Section illustrations use descriptive filenames (e.g., `hero-logo-illustration.png`, `community-visual.png`)
+- Favicon and logo files are in `images/` directory
 
 ## Development Workflow
 

about.html

@@ -17,7 +17,7 @@
     <meta property="og:url" content="https://rocketpy.org/about.html" />
     <meta
       property="og:image"
-      content="https://rocketpy.org/images/logo-white.png"
+      content="https://rocketpy.org/images/rocketpy-logo-white.png"
     />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="RocketPy Team - About" />
@@ -27,7 +27,7 @@
     />
     <meta
       name="twitter:image"
-      content="https://rocketpy.org/images/logo-white.png"
+      content="https://rocketpy.org/images/rocketpy-logo-white.png"
     />
     <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
     <link rel="manifest" href="./manifest.json" />

css/main.css

@@ -8,6 +8,19 @@
   --icon-bg: rgba(20, 25, 45, 0.8);
   --space-section: clamp(3rem, 7vw, 5.5rem);
   --space-content: clamp(1rem, 2.6vw, 1.8rem);
+  --hero-background-image: url("../images/hero-background.png");
+}
+
+@supports (
+  background-image:
+    image-set(url("../images/hero-background.webp") type("image/webp"))
+) {
+  :root {
+    --hero-background-image: image-set(
+      url("../images/hero-background.webp") type("image/webp"),
+      url("../images/hero-background.png") type("image/png")
+    );
+  }
 }
 
 * {
@@ -22,8 +35,9 @@ body {
       rgba(3, 11, 40, 0.94) 0%,
       rgba(3, 11, 40, 0.99) 100%
     ),
-    url("../images/Default Background.png");
+    var(--hero-background-image);
   background-position: center;
+  background-repeat: no-repeat;
   background-size: cover;
   color: var(--text-primary);
   font-family: "Ruda", sans-serif;
@@ -96,7 +110,12 @@ body::before {
 }
 
 .brand-logo {
-  background: url("../images/v33_6.png") no-repeat center center / contain;
+  background: url("../images/rocketpy-logo-white.png") no-repeat center center /
+    contain;
+  background-image: image-set(
+    url("../images/rocketpy-logo-white.webp") type("image/webp"),
+    url("../images/rocketpy-logo-white.png") type("image/png")
+  );
   display: block;
   height: 48px;
   width: 220px;
@@ -135,7 +154,11 @@ body::before {
 }
 
 .simulate-icon {
-  background: url("../images/v33_9.png") no-repeat center center / contain;
+  background: url("../images/launch-icon.png") no-repeat center center / contain;
+  background-image: image-set(
+    url("../images/launch-icon.webp") type("image/webp"),
+    url("../images/launch-icon.png") type("image/png")
+  );
   display: inline-block;
   height: 14px;
   width: 14px;
@@ -253,44 +276,32 @@ body::before {
 .hero-logo-graphic,
 .environment-graphic,
 .predictions-graphic {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: 290px;
+  display: block;
   margin: 0 auto;
   max-width: 330px;
   width: 100%;
 }
 
-.hero-logo-graphic {
-  background-image: url("../images/v35_22.png");
-}
-
-.environment-graphic {
-  background-image: url("../images/v40_94.png");
-}
-
-.predictions-graphic {
-  background-image: url("../images/v36_82.png");
-}
-
 .hero-plot-graphic,
 .community-graphic {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
+  display: block;
+}
+
+.section-graphic {
+  display: block;
+  height: auto;
+  object-fit: contain;
+  width: 100%;
 }
 
 .hero-plot-graphic {
-  background-image: url("../images/Group 5.png");
   height: 190px;
   margin-top: var(--space-content);
   max-width: 320px;
+  width: 100%;
 }
 
 .community-graphic {
-  background-image: url("../images/v73_37.png");
-  height: 220px;
   max-width: 360px;
   width: 100%;
 }
@@ -338,7 +349,11 @@ body::before {
 }
 
 .footer-logo {
-  background-image: url("../images/v33_7.png");
+  background-image: url("../images/rocketpy-logo-white.png");
+  background-image: image-set(
+    url("../images/rocketpy-logo-white.webp") type("image/webp"),
+    url("../images/rocketpy-logo-white.png") type("image/png")
+  );
   background-position: left center;
   background-repeat: no-repeat;
   background-size: contain;