Optimize all the images

src/components/Calendar.svelte

@@ -45,8 +45,8 @@
           src={currentEvent.image.src.src}
           srcset={currentEvent.image.src.srcSet.attribute}
           alt={currentEvent.image.alt}
-          sizes="(min-width: 1024px) 50vw, 100vw"
           class="absolute top-0 left-0 h-full w-full rounded-t-2xl object-cover transition-opacity lg:rounded-l-2xl lg:rounded-tr-none"
+          sizes="(min-width: 1360px) 622px, (min-width: 1040px) calc(44.33vw + 28px), 100vw"
         />
       {/key}
     </div>

src/components/about-us/Exercises.svelte

@@ -24,6 +24,7 @@
             srcSet={exercise.image.srcSet.attribute}
             {...exercise.image.attributes}
             alt={exercise.title}
+            sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
             class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
           />
         </div>
@@ -40,6 +41,8 @@
             <img
               src={exercise.image.src}
               alt={exercise.title}
+              {...exercise.image.attributes}
+              sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
               class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
             />
           </div>
@@ -59,6 +62,8 @@
           <img
             src={exercise.image.src}
             alt={exercise.title}
+            {...exercise.image.attributes}
+            sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
             class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
           />
         </div>
@@ -75,6 +80,8 @@
             <img
               src={exercise.image.src}
               alt={exercise.title}
+              {...exercise.image.attributes}
+              sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
               class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
             />
           </div>
@@ -116,6 +123,8 @@
         <img
           src={exercise.image.src}
           alt={exercise.title}
+          {...exercise.image.attributes}
+          sizes="(min-width: 1360px) 455px, calc(35.67vw - 23px)"
           class="bg-light-green aspect-square h-auto w-full rounded-full object-cover object-center"
         />
       </div>

src/components/about-us/FlowerDecoration.astro

@@ -5,8 +5,11 @@ import { Image } from 'astro:assets';
 
 <div class="w-full overflow-hidden">
   <Image
-    alt="Flower explosion"
+    alt=""
     class="h-60 w-full object-cover object-top lg:h-72"
+    role="presentation"
+    sizes="(min-width: 1040px) 800px, 288px"
     src={FlowerExplosion}
+    widths={[288, 300, 520, 721, 1080, 1340, 1560, 1750, 1920, 2048]}
   />
 </div>

src/components/about-us/History.astro

@@ -12,7 +12,9 @@ import { Image } from 'astro:assets';
       <Image
         alt=""
         class="h-96 w-full rounded-2xl object-cover lg:h-[30rem] lg:w-[29rem] lg:rounded-r-none"
+        sizes="(min-width: 1040px) 720px, (min-width: 700px) calc(100vw - 80px), 557px"
         src={OgYoungvisionPeople}
+        widths={[720, 1008, 1152, 1440, 1728, 1900, 2048]}
       />
     </div>
 

src/components/about-us/TeamMembers.astro

@@ -39,7 +39,9 @@ const members = [
             <Image
               alt={member.name}
               class="aspect-square h-auto w-full rounded-full bg-white object-cover object-center"
+              sizes="(min-width: 1340px) 208px, (min-width: 1040px) calc(21.43vw - 75px), calc(50vw - 30px)"
               src={member.image}
+              widths={[208, 416, 960]}
             />
             <h2 class="mt-6 font-sans font-bold lg:mt-5 lg:text-xl">{member.name}</h2>
             <p class="lg:mt-3">{member.job}</p>

src/components/about-us/TryThisAtHome.astro

@@ -14,7 +14,9 @@ import { Image } from 'astro:assets';
     <Image
       alt="Vorschau vom Triaden Pdf"
       class="h-full w-full object-cover"
+      sizes="15rem"
       src={TriadenThumbnail}
+      widths={[504, 756]}
     />
   </div>
   <div>

src/components/about-us/WhatWeDo.astro

@@ -11,8 +11,8 @@ const exercises = await getExercises();
 <section class="relative mx-auto w-full max-w-[80rem] px-5 pt-24 pb-16 lg:px-20">
   <Image
     alt=""
-    aria-hidden="true"
     class="absolute top-[-9rem] left-[-6rem] -z-10 h-[18rem] w-auto lg:top-[-31rem] lg:left-[-12rem] lg:h-auto lg:w-[50em]"
+    role="presentation"
     sizes="(max-width: 360px) 150px, (max-width: 720px) 300px, (max-width: 1024px) 400px, 512px"
     src={Background}
     widths={[150, 300, 400, 512]}

src/components/events/YearlyEvents.svelte

@@ -54,8 +54,10 @@
       >
         <img
           alt=""
-          src={event.image.src.src}
-          {...event.image.src.attributes}
+          src={event.image.src}
+          srcset={event.image.srcSet.attribute}
+          {...event.image.attributes}
+          sizes="(min-width: 1360px) 540px, (min-width: 1040px) 40vw, calc(100vw - 32px)"
           class="max-h-64 w-full rounded-t-2xl object-cover"
         />
         <div class="flex p-6">

src/components/members/MemberBenefits.astro

@@ -11,14 +11,18 @@ import { Image } from 'astro:assets';
   <Image
     alt="Background"
     class="absolute top-0 left-0 -z-10 h-full w-full object-cover opacity-40"
+    sizes="(min-width: 1780px) 100vw, (min-width: 1040px) 1858px, (min-width: 520px) calc(-57.6vw + 1916px), calc(-204vw + 2660px)"
     src={Background}
+    widths={[700, 1330, 1530, 1704, 1920, 2048, 3072, 4930]}
   />
 
   <div class="mx-auto max-w-[80rem] flex-col items-center px-4 lg:flex lg:px-44">
     <Image
       alt="Leute sitzen im Kreis auf dem Boden"
       class="h-48 w-full bg-gray-300 object-cover object-bottom lg:h-[27rem] lg:w-[50rem]"
+      sizes="(min-width: 1240px) 800px, (min-width: 1040px) calc(62.22vw + 41px), (min-width: 380px) calc(100vw - 32px), calc(65vw + 94px)"
       src={BenefitsImage}
+      widths={[290, 800, 984, 1330, 1600, 1840, 2048]}
     />
     <h2 class="mt-10 text-center font-serif text-2xl font-bold lg:hidden">Werde Mitglied</h2>
     <h2 class="mt-20 hidden text-center font-serif text-4xl font-bold lg:block">
@@ -67,16 +71,20 @@ import { Image } from 'astro:assets';
       text="Mitglied werden"
     />
 
-    <div class="mt-10 flex w-full flex-col gap-4 lg:mt-20 lg:h-[22rem] lg:flex-row">
+    <div class="mt-10 grid w-full grid-cols-1 gap-4 lg:mt-20 lg:h-[22rem] lg:grid-cols-2">
       <Image
-        alt="YoungVision"
+        alt="Zwei Menschen liegen schlafend auf der Wiese. Auf der einen Person schläft eine weiße Katze."
         class="h-48 w-full bg-gray-300 object-cover lg:h-full"
+        sizes="(min-width: 1040px) 470px, calc(100vw - 32px)"
         src={Image1}
+        widths={[665, 1056, 1350, 1584, 1790, 1980, 2048]}
       />
       <Image
-        alt="YoungVision"
+        alt="Eine Frau mit Tatoo auf ihrem Rücken schreibt das Word 'Open Stage' auf ein Flip-Chart"
         class="h-48 w-full bg-gray-300 object-cover lg:h-full"
+        sizes="(min-width: 1040px) 470px, calc(100vw - 32px)"
         src={Image2}
+        widths={[665, 1056, 1350, 1584, 1790, 1980, 2048]}
       />
     </div>
   </div>

src/components/support-us/DonationMethodList.svelte

@@ -51,6 +51,7 @@
                 src={possibility.image.src}
                 {...possibility.image.attributes}
                 alt={possibility.title}
+                sizes="100vw"
                 class="h-full w-full bg-gray-300 object-cover object-center"
               />
             </div>

src/components/support-us/DonationMethodTabs.svelte

@@ -89,6 +89,7 @@
               src={possibility.image.src}
               {...possibility.image.attributes}
               class="h-full w-full bg-gray-300 object-cover object-center"
+              sizes="28rem"
               alt={possibility.title}
             />
           </div>

src/components/support-us/DonationMethods.astro

@@ -30,7 +30,9 @@ const possibilities = await getDonationMethods();
     <Image
       alt="Jakob"
       class="mx-auto mt-5 h-56 w-56 rounded-2xl bg-gray-300 object-cover object-center lg:mx-0 lg:mt-0"
+      sizes="14rem"
       src={JakobPortrait}
+      widths={[448, 672]}
     />
     <div>
       <h3 class="hidden text-center font-serif text-4xl font-bold lg:block">

src/data/index.ts

@@ -60,8 +60,8 @@ export type YearlyEvent = {
   for_all: boolean;
   future?: string;
   //TODO: this should probably also be an ImageWithAlt
-  image: {
-    src: GetImageResult;
+  image: GetImageResult & {
+    alt: string;
   };
   month: string;
   short_description: string;

src/data/real/events.ts

@@ -81,7 +81,7 @@ export async function get3CalendarEntries(): Promise<
       alt: r!.alt,
       src: await getImage({
         ...r!,
-        widths: [300, 622, 980, 1244, 1560, 1810, 2040, r!.width],
+        widths: [300, 721, 920, 1080, 1244, 1430, 1590, 1730, 1866, 1960, 2040, r!.width],
       }),
     })),
     link: event.slug ? `/events/${event.slug}` : null,
@@ -118,7 +118,10 @@ export async function getAllYearlyEvents(): Promise<YearlyEvent[]> {
     {
       day: '2',
       for_all: true,
-      image: { src: await getImage({ src: EventImage1 }) },
+      image: {
+        alt: 'Eine Gruppe Menschen sitzt in einer Reihe.',
+        ...(await getYearlyEventImage(EventImage1)),
+      },
       month: 'September',
       short_description:
         'Unsere jährliche Sommerveranstaltung ist für viele das Highlight des Jahres!',
@@ -128,7 +131,10 @@ export async function getAllYearlyEvents(): Promise<YearlyEvent[]> {
     {
       day: '31',
       for_all: true,
-      image: { src: await getImage({ src: EventImage2 }) },
+      image: {
+        alt: 'Menschen sitzen an einem Holztisch und spielen ein Kartenspiel im Garten.',
+        ...(await getYearlyEventImage(EventImage2)),
+      },
       month: 'Dezember',
       short_description:
         'Lass uns das vergangene Jahr ausklingen lassen und gemeinsam in das neue Jahr starten!',
@@ -138,7 +144,10 @@ export async function getAllYearlyEvents(): Promise<YearlyEvent[]> {
     {
       day: '4',
       for_all: false,
-      image: { src: await getImage({ src: EventImage3 }) },
+      image: {
+        alt: 'Ein großer Kuschelhaufen liegt vor einer Frau die Ukulele spielt.',
+        ...(await getYearlyEventImage(EventImage3)),
+      },
       month: 'April',
       short_description:
         'Werde Mitglied und entscheide gemeinsam über die Zukunft von YoungVision!',
@@ -166,3 +175,7 @@ export async function getEventImage(
     };
   }
 }
+
+async function getYearlyEventImage(src: Parameters<typeof getImage>[0]['src']) {
+  return getImage({ src, widths: [665, 1080, 1380, 1620, 1810, 1980] });
+}

src/data/real/exercises.ts

@@ -50,5 +50,9 @@ export async function getExercises(): Promise<Exercise[]> {
 }
 
 async function optimizeImage(src: ImageMetadata) {
-  return await getImage({ formats: ['avif', 'webp'], src, widths: [300, 600, 900] });
+  return await getImage({
+    formats: ['avif', 'webp'],
+    src,
+    widths: [639, 1090, 1390, 1640, 1860, 2048],
+  });
 }

src/data/test/events.ts

@@ -1,5 +1,3 @@
-import type { GetImageResult } from 'astro';
-
 import calendarCoverImage from '@assets/events/calendar-cover.jpeg';
 import pastEvent from '@assets/events/calendar-past-event.jpeg';
 import thirdEventImage from '@assets/events/calendar-third-event.jpeg';
@@ -8,27 +6,14 @@ import EventImage2 from '@assets/events/projects-event-image-2.jpeg';
 import EventImage3 from '@assets/events/projects-event-image-3.jpeg';
 import { getImage } from 'astro:assets';
 
-import type { EventCalendarEntry, EventData, EventPage } from '../index.ts';
+import type { EventCalendarEntry, EventData, EventPage, YearlyEvent } from '../index.ts';
 
 export const testEventData: EventData = {
   get3CalendarEntries,
   getAllPages,
   getAllYearlyEvents,
 };
 
-export type YVEvent = {
-  day: string;
-  for_all: boolean;
-  future?: string;
-  image: {
-    src: GetImageResult;
-  };
-  month: string;
-  short_description: string;
-  slug: string;
-  title: string;
-};
-
 export async function get3CalendarEntries(): Promise<
   [EventCalendarEntry, EventCalendarEntry, EventCalendarEntry]
 > {
@@ -103,12 +88,12 @@ export async function getAllPages(): Promise<EventPage[]> {
   ];
 }
 
-export async function getAllYearlyEvents(): Promise<YVEvent[]> {
+export async function getAllYearlyEvents(): Promise<YearlyEvent[]> {
   return [
     {
       day: '1',
       for_all: true,
-      image: { src: await getImage({ src: EventImage1 }) },
+      image: { alt: 'Test Event Image 1', ...(await getImage({ src: EventImage1 })) },
       month: 'Januar',
       short_description: 'Das ist ein Test Event. Komm nicht vorbei, weil es ist nicht real.',
       slug: 'event-1',
@@ -117,7 +102,7 @@ export async function getAllYearlyEvents(): Promise<YVEvent[]> {
     {
       day: '31',
       for_all: true,
-      image: { src: await getImage({ src: EventImage2 }) },
+      image: { alt: 'Test Event Image 2', ...(await getImage({ src: EventImage2 })) },
       month: 'Oktober',
       short_description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium, felis sed luctus tempor',
@@ -127,7 +112,7 @@ export async function getAllYearlyEvents(): Promise<YVEvent[]> {
     {
       day: '24',
       for_all: false,
-      image: { src: await getImage({ src: EventImage3 }) },
+      image: { alt: 'Test Event Image 3', ...(await getImage({ src: EventImage3 })) },
       month: 'Mai',
       short_description: 'Noch ein Test Event, aber nur für Mitglieder !!!1!!11!111elf1',
       slug: 'event-3',

src/pages/about-us.astro

@@ -13,24 +13,36 @@ import { Image } from 'astro:assets';
 <Layout title="YoungVision e.V. - About Us">
   <div class="relative overflow-hidden">
     <Image
-      alt="YoungVision Logo"
+      alt=""
       class="absolute top-[-5rem] right-[-5rem] -z-10 h-[19rem] w-auto lg:top-[-7rem] lg:right-[-7rem] lg:h-[32rem]"
+      role="presentation"
+      sizes="(min-width: 1040px) 32rem, 19rem"
       src={Background}
+      widths={[304, 608, 912, 1024, 1310, 1536]}
     />
     <Image
-      alt="YoungVision Logo"
+      alt=""
       class="absolute top-[7rem] left-[-7rem] -z-10 h-[14rem] w-auto lg:top-[17rem] lg:left-[-14rem] lg:h-[25rem]"
+      role="presentation"
+      sizes="(min-width: 1040px) 400px, 224px"
       src={Background}
+      widths={[448, 800, 1020, 1200]}
     />
     <Image
-      alt="YoungVision Logo"
+      alt=""
       class="absolute right-[-4rem] bottom-[-7rem] -z-10 h-[14rem] w-auto"
+      role="presentation"
+      sizes="224px"
       src={Background}
+      widths={[448, 672]}
     />
     <Image
-      alt="YoungVision Logo"
+      alt=""
       class="absolute top-[70rem] left-[-4rem] -z-10 h-[14rem] w-auto lg:top-[43rem] lg:left-[5rem]"
+      role="presentation"
+      sizes="224px"
       src={Background}
+      widths={[448, 672]}
     />
     <VisionMissionValues />
     <History />

src/pages/events/[slug].astro

@@ -60,7 +60,7 @@ const locationPictures = [
     loading="eager"
     {...event.heroImage}
     sizes="100vw"
-    widths={[360, 540, 720, 960, 1200, 1920]}
+    widths={[325, 721, 920, 1080, 1290, 1480, 1640, 1780, 1920, 2048]}
   />
   <div class="pr-4 lg:pr-20">
     <div class="flex h-12 w-full items-center rounded-br-xl bg-yellow-500/60 lg:text-xl">
@@ -198,7 +198,7 @@ const locationPictures = [
               <Image
                 alt={image.alt}
                 class="aspect-square w-full object-cover"
-                sizes="(min-width: 1024px) 310px, 100vw"
+                sizes="(min-width: 1340px) 309px, (min-width: 1040px) calc(28.57vw - 68px), calc(100vw - 64px)"
                 src={image.src}
                 widths={[310, 400, 540, 720, 1024]}
               />

src/pages/members.astro

@@ -20,6 +20,8 @@ const testimonials = await getTestimonials();
   <Image
     alt="YoungVision Menschen sitzen am Lagerfeuer"
     class="h-[35rem] w-full object-cover lg:h-[60rem]"
+    sizes="(min-width: 1380px) 100vw, (min-width: 1040px) calc(25vw + 1020px), (min-width: 800px) 100vw, 731px"
     src={FooterBackground}
+    widths={[747, 1070, 1308, 1494, 1720, 1920, 2048, 2241]}
   />
 </Layout>