Cambio en las imágenes para mejorar el rendimiento

src/pages/index.astro

@@ -2,6 +2,7 @@
 // Component Imports
 import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
 import Navbar from "../components/Navbar.astro";
+import { Image } from "astro:assets";
 
 const animateOnScroll = `
   document.addEventListener('DOMContentLoaded', () => {
@@ -80,10 +81,14 @@ const animateOnScroll = `
 							</p>
 						</div>
 						<div class="col-md-6 animate-on-scroll">
-							<div
+							<div class="text-white p-5 text-center">
-								class=" text-white p-5 text-center"
+								<Image
-							>
+									src="/imgs/17Objetivos.png"
-								<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid">
+									alt=""
+									class="img-thumbnail .img-fluid"
+									width="730"
+									height="450"
+								/>
 							</div>
 						</div>
 					</div>
@@ -159,12 +164,13 @@ const animateOnScroll = `
 							[1, 2, 3, 4, 5, 6].map((num) => (
 								<div class="col-md-4 animate-on-scroll">
 									<div class="bg-light p-4 text-center">
-								<img 
+										<Image
-								  src={`../../public/imgs/imgimp${num}.jpg`} 
+											src={`/imgs/imgimp${num}.jpg`}
 											alt={`Imagen de impacto ${num}`}
 											class="img-fluid img-fit"
+											width="10"
+											height="10"
 										/>
-
 									</div>
 								</div>
 							))
@@ -193,7 +199,7 @@ const animateOnScroll = `
 								<div class="col-md-6 mb-4 animate-on-scroll">
 									<div class="card">
 										<div class="card-body">
-											<h5 class="card-title">
+											<h5 class="card-title" aria-label="Proyecto">
 												Proyecto {num}
 											</h5>
 											<p class="card-text">
@@ -306,5 +312,4 @@ const animateOnScroll = `
 		object-fit: cover;
 		border-radius: 8px;
 	}
-
 </style>