feat: image loading optimization

Author: ivanrdgz03

src/components/Logo.astro

@@ -1,28 +1,25 @@
 ---
-import { SITE } from 'astrowind:config';
-import logoDark from '~/assets/images/logo-dark.svg';  // Logo negro para modo claro
-import logoLight from '~/assets/images/logo-light.png'; // Logo blanco para modo oscuro
-import Image from '~/components/common/Image.astro';
+import { Image } from 'astro:assets';
+import logoLight from '~/assets/images/logo-light.png';
+import logoDark from '~/assets/images/logo-dark.svg';
 ---
 
 <span
-  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
+  class="self-center ml-2 rtl:ml-0 rtl:mr-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white flex items-center"
 >
-  <!-- Logo para modo claro (se oculta en modo oscuro) -->
-  <Image
-    src={logoDark}
-    alt="Hackiit"
-    width={80}
-    class="mx-auto rounded-md w-full block dark:hidden"
-    inferSize={true}
+  <Image 
+    src={logoDark} 
+    alt="Hackiit Logo" 
+    class="h-8 md:h-10 w-auto block dark:hidden" 
+    loading="eager" 
+    fetchpriority="high" 
   />
 
-  <!-- Logo para modo oscuro (se oculta en modo claro) -->
-  <Image
-    src={logoLight}
-    alt="Hackiit"
-    width={80}
-    class="mx-auto rounded-md w-full hidden dark:block"
-    inferSize={true}
+  <Image 
+    src={logoLight} 
+    alt="Hackiit Logo" 
+    class="h-8 md:h-10 w-auto hidden dark:block" 
+    loading="eager" 
+    fetchpriority="high" 
   />
 </span>

src/components/blog/GridItem.astro

@@ -2,8 +2,7 @@
 import { APP_BLOG } from 'astrowind:config';
 import type { Post } from '~/types';
 
-import Image from '~/components/common/Image.astro';
-
+import { Image } from 'astro:assets';
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
@@ -30,10 +29,9 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
               class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
               widths={[400, 900]}
               width={400}
+              height={225}
               sizes="(max-width: 900px) 400px, 900px"
               alt={post.title}
-              aspectRatio="16:9"
-              layout="cover"
               loading="lazy"
               decoding="async"
             />
@@ -44,10 +42,9 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
             class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
             width={400}
+            height={225}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post.title}
-            aspectRatio="16:9"
-            layout="cover"
             loading="lazy"
             decoding="async"
           />
@@ -68,4 +65,4 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
   </h3>
 
   <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>
-</article>
+</article>

src/components/blog/ListItem.astro

@@ -1,16 +1,14 @@
 ---
 import type { ImageMetadata } from 'astro';
 import { Icon } from 'astro-icon/components';
-import Image from '~/components/common/Image.astro';
+import { Image } from 'astro:assets';
 import PostTags from '~/components/blog/Tags.astro';
 
 import { APP_BLOG } from 'astrowind:config';
 import type { Post } from '~/types';
-
 import { getPermalink } from '~/utils/permalinks';
 import { findImage } from '~/utils/images';
 import { getFormattedDate } from '~/utils/utils';
-
 export interface Props {
   post: Post;
 }
@@ -35,9 +33,9 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
                 class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
                 widths={[400, 900]}
                 width={900}
+                height={506}
                 sizes="(max-width: 900px) 400px, 900px"
                 alt={post.title}
-                aspectRatio="16:9"
                 loading="lazy"
                 decoding="async"
               />
@@ -52,9 +50,9 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
               class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
               widths={[400, 900]}
               width={900}
+              height={506}
               sizes="(max-width: 900px) 400px, 900px"
               alt={post.title}
-              aspectRatio="16:9"
               loading="lazy"
               decoding="async"
             />
@@ -117,4 +115,4 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
       )
     }
   </div>
-</article>
+</article>

src/components/blog/SinglePost.astro

@@ -1,21 +1,21 @@
 ---
 import { Icon } from 'astro-icon/components';
 
-import Image from '~/components/common/Image.astro';
+import { Image } from 'astro:assets';
+import { findImage } from '~/utils/images';
 import PostTags from '~/components/blog/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
-
 import { getPermalink } from '~/utils/permalinks';
 import { getFormattedDate } from '~/utils/utils';
 
 import type { Post } from '~/types';
-
 export interface Props {
   post: Post;
   url: string | URL;
 }
 
 const { post, url } = Astro.props;
+const image = await findImage(post.image);
 ---
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
@@ -71,13 +71,13 @@ const { post, url } = Astro.props;
       </p>
 
       {
-        post.image ? (
+        image ? (
           <Image
-            src={post.image}
+            src={image}
             class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
             sizes="(max-width: 900px) 400px, 900px"
-            alt={post?.excerpt || ''}
+            alt={post?.title || ''}
             width={900}
             height={506}
             loading="eager"
@@ -100,4 +100,4 @@ const { post, url } = Astro.props;
       <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
     </div>
   </article>
-</section>
+</section>

src/layouts/Layout.astro

@@ -40,7 +40,7 @@ const { language, textDirection } = I18N;
     <ViewTransitions fallback="swap" />
   </head>
 
-  <body class="antialiased text-default bg-page tracking-tight">
+  <body class="antialiased text-default bg-page tracking-tight">  
     <slot />
 
     <BasicScripts />