Migrate from @astrojs/image to Astro Assets and Unpic

src/components/widgets/Content.astro

@@ -1,9 +1,9 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { Picture } from '@astrojs/image/components';
 import type { Content } from '~/types';
 import Headline from '../ui/Headline.astro';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
+import Image from '~/components/common/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -70,13 +70,13 @@ const {
               {typeof image === 'string' ? (
                 <Fragment set:html={image} />
               ) : (
-                <Picture
+                <Image
                   class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
                   width={500}
                   height={500}
                   widths={[400, 768]}
                   sizes="(max-width: 768px) 100vw, 432px"
-                  aspectRatio="500:500"
+                  layout="responsive"
                   {...(image as any)}
                 />
               )}

src/components/widgets/Features3.astro

@@ -1,8 +1,8 @@
 ---
-import { Picture } from '@astrojs/image/components';
 import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import Image from '~/components/common/Image.astro';
 import type { Features } from '~/types';
 
 const {
@@ -39,12 +39,12 @@ const {
           {typeof image === 'string' ? (
             <Fragment set:html={image} />
           ) : (
-            <Picture
+            <Image
               class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
-              width={0}
+              width="auto"
               height={320}
               widths={[400, 768]}
-              aspectRatio="16:7"
+              layout="fullWidth"
               {...(image as any)}
             />
           )}

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { Picture } from '@astrojs/image/components';
+import Image from '~/components/common/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -77,11 +77,10 @@ const {
               {typeof image === 'string' ? (
                 <Fragment set:html={image} />
               ) : (
-                <Picture
+                <Image
                   class="mx-auto rounded-md w-full"
                   widths={[400, 768, 1024, 2040]}
                   sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
-                  aspectRatio={1024 / 576}
                   loading="eager"
                   width={1024}
                   height={576}

src/components/widgets/Hero2.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { Picture } from '@astrojs/image/components';
+import Image from '~/components/common/Image.astro';
 import { CallToAction } from '~/types';
 
 export interface Props {
@@ -88,11 +88,10 @@ const {
               {typeof image === 'string' ? (
                 <Fragment set:html={image} />
               ) : (
-                <Picture
+                <Image
                   class="mx-auto rounded-md w-full"
                   widths={[400, 768, 1024, 2040]}
                   sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
-                  aspectRatio={600 / 600}
                   loading="eager"
                   width={600}
                   height={600}

src/components/widgets/Steps.astro

@@ -1,8 +1,8 @@
 ---
-import { Picture } from '@astrojs/image/components';
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import Timeline from "~/components/ui/Timeline.astro";
 import Headline from "~/components/ui/Headline.astro";
+import Image from '~/components/common/Image.astro';
 import type { Steps } from "~/types";
 
 const {
@@ -37,13 +37,13 @@ const {
           (typeof image === 'string' ? (
             <Fragment set:html={image} />
           ) : (
-            <Picture
+            <Image
               class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
               widths={[400, 768]}
               sizes="(max-width: 768px) 100vw, 432px"
-              aspectRatio="432:768"
               width={432}
               height={768}
+              layout="cover"
               src={image?.src}
               alt={image?.alt || ""}
             />

src/components/widgets/Testimonials.astro

@@ -1,9 +1,10 @@
 ---
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import CTA from '~/components/ui/CTA.astro';
+import Image from '~/components/common/Image.astro';
 import type { Testimonials } from '~/types';
-import CTA from '../ui/CTA.astro';
-import { Picture } from '@astrojs/image/components';
+
 
 const {
   title = '',
@@ -43,12 +44,12 @@ const {
                     {typeof image === 'string' ? (
                       <Fragment set:html={image} />
                     ) : (
-                      <Picture
+                      <Image
                         class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
                         width={40}
                         height={40}
                         widths={[400, 768]}
-                        aspectRatio="1:1"
+                        layout="fixed"
                         {...(image as any)}
                       />
                     )}