Optimize images with @astrojs/image

astro.config.mjs

@@ -2,16 +2,15 @@ import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 
+import image from "@astrojs/image";
+
 // https://astro.build/config
 export default defineConfig({
   // Astro uses this full URL to generate your sitemap and canonical URLs in your final build
   site: "https://astrowind.vercel.app/",
-  integrations: [
+  integrations: [tailwind({
-    tailwind({
     config: {
-        applyBaseStyles: false,
+      applyBaseStyles: false
-      },
+    }
-    }),
+  }), sitemap({}), image()]
-    sitemap({}),
-  ],
 });

package.json

@@ -10,6 +10,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
+    "@astrojs/image": "^0.3.3",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
     "astro": "^1.0.0"

src/components/astro/hero/HeroWithImage.astro

@@ -1,5 +1,6 @@
 ---
-  const { } = Astro.props;
+import { Picture } from '@astrojs/image/components';
+const { } = Astro.props;
 ---
 
 <section>
@@ -30,9 +31,10 @@
         </div>
       </div>
       <div>
-        <div class="relative flex justify-center mb-8  ">
+        <div class="relative flex justify-center mb-8">
           <div class="flex flex-col justify-center">
-            <img class="mx-auto rounded-md" src="/images/hero-astro.jpg" width="768" height="432" alt="Hero">
+            <Picture src={import('~/assets/hero-astro.jpg')} class="mx-auto rounded-md" widths={[400, 768]}
+              sizes="(max-width: 768px) 100vw, 768px" alt="Hero Image" aspectRatio="16:9" />
           </div>
         </div>
       </div>