From 50a2abb01d373ffa24ccabb4614f65417bb8eefa Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 25 Oct 2024 10:58:42 +0200 Subject: [PATCH 01/16] perf(website): optimize event page images Mostly used results from image lint --- src/components/Calendar.svelte | 2 +- src/pages/events/[slug].astro | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Calendar.svelte b/src/components/Calendar.svelte index e103f32a..dc515513 100644 --- a/src/components/Calendar.svelte +++ b/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} diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro index 9adfacc4..1a378e08 100644 --- a/src/pages/events/[slug].astro +++ b/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={[300, 1060, 1460, 1780, 1920, 2048]} />
@@ -198,7 +198,7 @@ const locationPictures = [ {image.alt} From f9c838dd82aa4a50b69b8efd6a7cba32b8b3c90c Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 25 Oct 2024 11:04:08 +0200 Subject: [PATCH 02/16] perf(website): optimize team member portraits --- src/components/about-us/TeamMembers.astro | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/about-us/TeamMembers.astro b/src/components/about-us/TeamMembers.astro index 924f7e07..a2ae8f10 100644 --- a/src/components/about-us/TeamMembers.astro +++ b/src/components/about-us/TeamMembers.astro @@ -38,6 +38,8 @@ const members = [
{member.name} From bbc4f4cbbc5841a58c00d572dd730e69781c85cf Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 25 Oct 2024 12:10:28 +0200 Subject: [PATCH 03/16] perf(website): Optimize campfire photo on members page --- src/components/about-us/TeamMembers.astro | 4 ++-- src/pages/members.astro | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/about-us/TeamMembers.astro b/src/components/about-us/TeamMembers.astro index a2ae8f10..40bf1565 100644 --- a/src/components/about-us/TeamMembers.astro +++ b/src/components/about-us/TeamMembers.astro @@ -38,10 +38,10 @@ const members = [
{member.name}

{member.name}

{member.job}

diff --git a/src/pages/members.astro b/src/pages/members.astro index 29a047a1..7e773231 100644 --- a/src/pages/members.astro +++ b/src/pages/members.astro @@ -20,6 +20,8 @@ const testimonials = await getTestimonials(); YoungVision Menschen sitzen am Lagerfeuer From f3dbf5bc7377ad63ebcc9fc173518355fbd7189a Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 25 Oct 2024 12:51:06 +0200 Subject: [PATCH 04/16] perf(website): Optimize yearl event pictures Also refactored image results a bit to better include alt text. --- src/components/events/YearlyEvents.svelte | 2 ++ src/data/index.ts | 1 + src/data/real/events.ts | 19 ++++++++++++++--- src/data/test/events.ts | 25 +++++------------------ 4 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/components/events/YearlyEvents.svelte b/src/components/events/YearlyEvents.svelte index dcaaa29e..81cdef85 100644 --- a/src/components/events/YearlyEvents.svelte +++ b/src/components/events/YearlyEvents.svelte @@ -55,7 +55,9 @@
diff --git a/src/data/index.ts b/src/data/index.ts index 3c752caa..70a101e4 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -61,6 +61,7 @@ export type YearlyEvent = { future?: string; //TODO: this should probably also be an ImageWithAlt image: { + alt: string; src: GetImageResult; }; month: string; diff --git a/src/data/real/events.ts b/src/data/real/events.ts index ada1d48d..477bce2b 100644 --- a/src/data/real/events.ts +++ b/src/data/real/events.ts @@ -118,7 +118,10 @@ export async function getAllYearlyEvents(): Promise { { day: '2', for_all: true, - image: { src: await getImage({ src: EventImage1 }) }, + image: { + alt: 'Eine Gruppe Menschen sitzt in einer Reihe.', + src: 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 { { day: '31', for_all: true, - image: { src: await getImage({ src: EventImage2 }) }, + image: { + alt: 'Menschen sitzen an einem Holztisch und spielen ein Kartenspiel im Garten.', + src: 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 { { day: '4', for_all: false, - image: { src: await getImage({ src: EventImage3 }) }, + image: { + alt: 'Ein großer Kuschelhaufen liegt vor einer Frau die Ukulele spielt.', + src: 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[0]['src']) { + return getImage({ src, widths: [270, 540, 620, 1240] }); +} diff --git a/src/data/test/events.ts b/src/data/test/events.ts index 28238628..37bc95eb 100644 --- a/src/data/test/events.ts +++ b/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,7 +6,7 @@ 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, @@ -16,19 +14,6 @@ export const testEventData: EventData = { 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 { ]; } -export async function getAllYearlyEvents(): Promise { +export async function getAllYearlyEvents(): Promise { return [ { day: '1', for_all: true, - image: { src: await getImage({ src: EventImage1 }) }, + image: { alt: 'Test Event Image 1', src: 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 { { day: '31', for_all: true, - image: { src: await getImage({ src: EventImage2 }) }, + image: { alt: 'Test Event Image 2', src: 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 { { day: '24', for_all: false, - image: { src: await getImage({ src: EventImage3 }) }, + image: { alt: 'Test Event Image 3', src: await getImage({ src: EventImage3 }) }, month: 'Mai', short_description: 'Noch ein Test Event, aber nur für Mitglieder !!!1!!11!111elf1', slug: 'event-3', From 7659abd7fa28a3180aa79cdb65b8210f4fdd1260 Mon Sep 17 00:00:00 2001 From: Jonas Date: Fri, 25 Oct 2024 12:53:55 +0200 Subject: [PATCH 05/16] reduce sizes complexity The few pixels should be fine. --- src/components/Calendar.svelte | 2 +- src/pages/events/[slug].astro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Calendar.svelte b/src/components/Calendar.svelte index dc515513..fe587eae 100644 --- a/src/components/Calendar.svelte +++ b/src/components/Calendar.svelte @@ -46,7 +46,7 @@ srcset={currentEvent.image.src.srcSet.attribute} alt={currentEvent.image.alt} 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" + sizes="(min-width: 1360px) 622px, (min-width: 1024px) 45vw, 100vw" /> {/key}
diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro index 1a378e08..01768cde 100644 --- a/src/pages/events/[slug].astro +++ b/src/pages/events/[slug].astro @@ -198,7 +198,7 @@ const locationPictures = [ {image.alt} From fa25c3c3bf1ba60bf659522cd4b85ab1c6d693c5 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 25 Oct 2024 13:41:30 +0200 Subject: [PATCH 06/16] fix(website): Adapt to type changes whoopsie --- src/components/events/YearlyEvents.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/events/YearlyEvents.svelte b/src/components/events/YearlyEvents.svelte index 81cdef85..72c8f74c 100644 --- a/src/components/events/YearlyEvents.svelte +++ b/src/components/events/YearlyEvents.svelte @@ -54,9 +54,9 @@ > From 4eb225e1063c1fc1fc070d472509c33f851d819a Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 31 Jan 2025 23:19:18 +0100 Subject: [PATCH 07/16] fix: optimized image type --- src/data/index.ts | 3 +-- src/data/real/events.ts | 6 +++--- src/data/test/events.ts | 6 +++--- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/data/index.ts b/src/data/index.ts index 70a101e4..9fa163a4 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -60,9 +60,8 @@ export type YearlyEvent = { for_all: boolean; future?: string; //TODO: this should probably also be an ImageWithAlt - image: { + image: GetImageResult & { alt: string; - src: GetImageResult; }; month: string; short_description: string; diff --git a/src/data/real/events.ts b/src/data/real/events.ts index 477bce2b..81942c64 100644 --- a/src/data/real/events.ts +++ b/src/data/real/events.ts @@ -120,7 +120,7 @@ export async function getAllYearlyEvents(): Promise { for_all: true, image: { alt: 'Eine Gruppe Menschen sitzt in einer Reihe.', - src: await getYearlyEventImage(EventImage1), + ...(await getYearlyEventImage(EventImage1)), }, month: 'September', short_description: @@ -133,7 +133,7 @@ export async function getAllYearlyEvents(): Promise { for_all: true, image: { alt: 'Menschen sitzen an einem Holztisch und spielen ein Kartenspiel im Garten.', - src: await getYearlyEventImage(EventImage2), + ...(await getYearlyEventImage(EventImage2)), }, month: 'Dezember', short_description: @@ -146,7 +146,7 @@ export async function getAllYearlyEvents(): Promise { for_all: false, image: { alt: 'Ein großer Kuschelhaufen liegt vor einer Frau die Ukulele spielt.', - src: await getYearlyEventImage(EventImage3), + ...(await getYearlyEventImage(EventImage3)), }, month: 'April', short_description: diff --git a/src/data/test/events.ts b/src/data/test/events.ts index 37bc95eb..73961500 100644 --- a/src/data/test/events.ts +++ b/src/data/test/events.ts @@ -93,7 +93,7 @@ export async function getAllYearlyEvents(): Promise { { day: '1', for_all: true, - image: { alt: 'Test Event Image 1', 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', @@ -102,7 +102,7 @@ export async function getAllYearlyEvents(): Promise { { day: '31', for_all: true, - image: { alt: 'Test Event Image 2', 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', @@ -112,7 +112,7 @@ export async function getAllYearlyEvents(): Promise { { day: '24', for_all: false, - image: { alt: 'Test Event Image 3', 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', From eebe8a4500d6b9bf0f5e87fb898842e3eed922cc Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 13:50:02 +0200 Subject: [PATCH 08/16] perf(website): optimize all about-us images --- src/components/about-us/FlowerDecoration.astro | 2 ++ src/components/about-us/History.astro | 2 ++ src/components/about-us/TeamMembers.astro | 2 +- src/components/about-us/TryThisAtHome.astro | 2 ++ src/components/about-us/WhatWeDo.astro | 2 +- src/data/real/exercises.ts | 6 +++++- src/pages/about-us.astro | 16 ++++++++++++---- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/about-us/FlowerDecoration.astro b/src/components/about-us/FlowerDecoration.astro index c49be9f7..09af5e80 100644 --- a/src/components/about-us/FlowerDecoration.astro +++ b/src/components/about-us/FlowerDecoration.astro @@ -7,6 +7,8 @@ import { Image } from 'astro:assets'; Flower explosion
diff --git a/src/components/about-us/History.astro b/src/components/about-us/History.astro index 17a39bba..e3957156 100644 --- a/src/components/about-us/History.astro +++ b/src/components/about-us/History.astro @@ -12,7 +12,9 @@ import { Image } from 'astro:assets';
diff --git a/src/components/about-us/TeamMembers.astro b/src/components/about-us/TeamMembers.astro index 40bf1565..a3aaeb13 100644 --- a/src/components/about-us/TeamMembers.astro +++ b/src/components/about-us/TeamMembers.astro @@ -39,7 +39,7 @@ const members = [ {member.name} diff --git a/src/components/about-us/TryThisAtHome.astro b/src/components/about-us/TryThisAtHome.astro index ffce6c75..d14cc695 100644 --- a/src/components/about-us/TryThisAtHome.astro +++ b/src/components/about-us/TryThisAtHome.astro @@ -14,7 +14,9 @@ import { Image } from 'astro:assets'; Vorschau vom Triaden Pdf
diff --git a/src/components/about-us/WhatWeDo.astro b/src/components/about-us/WhatWeDo.astro index 4d4ccc10..44a9bb4d 100644 --- a/src/components/about-us/WhatWeDo.astro +++ b/src/components/about-us/WhatWeDo.astro @@ -11,8 +11,8 @@ const exercises = await getExercises();
{ } 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], + }); } diff --git a/src/pages/about-us.astro b/src/pages/about-us.astro index c0965c9e..2ffbdbef 100644 --- a/src/pages/about-us.astro +++ b/src/pages/about-us.astro @@ -13,24 +13,32 @@ import { Image } from 'astro:assets';
YoungVision Logo YoungVision Logo YoungVision Logo YoungVision Logo From bdb598a031066662594d19cf955af69762052cda Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 13:54:55 +0200 Subject: [PATCH 09/16] perf(website): optimize event page images --- src/components/events/YearlyEvents.svelte | 2 +- src/data/real/events.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/events/YearlyEvents.svelte b/src/components/events/YearlyEvents.svelte index 72c8f74c..f98001e6 100644 --- a/src/components/events/YearlyEvents.svelte +++ b/src/components/events/YearlyEvents.svelte @@ -57,7 +57,7 @@ src={event.image.src} srcset={event.image.srcSet.attribute} {...event.image.attributes} - sizes="(min-width: 1280px) 540px, (min-width: 1024px) 50vw, 100vw" + sizes="(min-width: 1280px) 540px, (min-width: 1024px) 40vw, 100vw" class="max-h-64 w-full rounded-t-2xl object-cover" />
diff --git a/src/data/real/events.ts b/src/data/real/events.ts index 81942c64..8be30d91 100644 --- a/src/data/real/events.ts +++ b/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, @@ -177,5 +177,5 @@ export async function getEventImage( } async function getYearlyEventImage(src: Parameters[0]['src']) { - return getImage({ src, widths: [270, 540, 620, 1240] }); + return getImage({ src, widths: [665, 1080, 1380, 1620, 1810, 1980] }); } From dc90bc6154c8ab5c803b327f5edd522152b40576 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 13:56:36 +0200 Subject: [PATCH 10/16] perf(website): optimize Jakob on support-us page --- src/components/support-us/DonationMethods.astro | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/support-us/DonationMethods.astro b/src/components/support-us/DonationMethods.astro index a49f69a4..801104fb 100644 --- a/src/components/support-us/DonationMethods.astro +++ b/src/components/support-us/DonationMethods.astro @@ -30,7 +30,9 @@ const possibilities = await getDonationMethods(); Jakob
diff --git a/src/pages/members.astro b/src/pages/members.astro index 7e773231..16559ccf 100644 --- a/src/pages/members.astro +++ b/src/pages/members.astro @@ -22,6 +22,6 @@ const testimonials = await getTestimonials(); class="h-[35rem] w-full object-cover lg:h-[60rem]" sizes="100vw" src={FooterBackground} - widths={[300, 520, 900, 1430, 2240, 2640, 3300, 3590, 4096]} + widths={[747, 1070, 1308, 1494, 1720, 1920, 2048, 2241]} /> From 72ced76f55898b88591b1d352a373dc5621e4136 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 14:21:29 +0200 Subject: [PATCH 12/16] perf(website): apply all suggestions by resp image lint pretty nasty calculations we should simplify later on --- src/components/Calendar.svelte | 2 +- src/components/about-us/Exercises.svelte | 9 +++++++++ src/components/about-us/FlowerDecoration.astro | 7 ++++--- src/components/about-us/History.astro | 2 +- src/components/about-us/TeamMembers.astro | 2 +- src/components/members/MemberBenefits.astro | 8 ++++---- src/pages/about-us.astro | 4 ++++ src/pages/members.astro | 2 +- 8 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/components/Calendar.svelte b/src/components/Calendar.svelte index fe587eae..dc515513 100644 --- a/src/components/Calendar.svelte +++ b/src/components/Calendar.svelte @@ -46,7 +46,7 @@ srcset={currentEvent.image.src.srcSet.attribute} alt={currentEvent.image.alt} 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: 1024px) 45vw, 100vw" + sizes="(min-width: 1360px) 622px, (min-width: 1040px) calc(44.33vw + 28px), 100vw" /> {/key}
diff --git a/src/components/about-us/Exercises.svelte b/src/components/about-us/Exercises.svelte index 1200612e..8570dba7 100644 --- a/src/components/about-us/Exercises.svelte +++ b/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" />
@@ -40,6 +41,8 @@ {exercise.title}
@@ -59,6 +62,8 @@ {exercise.title}
@@ -75,6 +80,8 @@ {exercise.title} @@ -116,6 +123,8 @@ {exercise.title} diff --git a/src/components/about-us/FlowerDecoration.astro b/src/components/about-us/FlowerDecoration.astro index 09af5e80..1bf1bd5a 100644 --- a/src/components/about-us/FlowerDecoration.astro +++ b/src/components/about-us/FlowerDecoration.astro @@ -5,10 +5,11 @@ import { Image } from 'astro:assets';
Flower explosion
diff --git a/src/components/about-us/History.astro b/src/components/about-us/History.astro index e3957156..1b9ac5d2 100644 --- a/src/components/about-us/History.astro +++ b/src/components/about-us/History.astro @@ -12,7 +12,7 @@ import { Image } from 'astro:assets'; diff --git a/src/components/about-us/TeamMembers.astro b/src/components/about-us/TeamMembers.astro index a3aaeb13..253e12f7 100644 --- a/src/components/about-us/TeamMembers.astro +++ b/src/components/about-us/TeamMembers.astro @@ -39,7 +39,7 @@ const members = [ {member.name} diff --git a/src/components/members/MemberBenefits.astro b/src/components/members/MemberBenefits.astro index 3c534edc..7e2af67e 100644 --- a/src/components/members/MemberBenefits.astro +++ b/src/components/members/MemberBenefits.astro @@ -11,7 +11,7 @@ import { Image } from 'astro:assets'; Background @@ -20,7 +20,7 @@ import { Image } from 'astro:assets'; Leute sitzen im Kreis auf dem Boden @@ -75,14 +75,14 @@ import { Image } from 'astro:assets'; YoungVision YoungVision diff --git a/src/pages/about-us.astro b/src/pages/about-us.astro index 2ffbdbef..849e7db8 100644 --- a/src/pages/about-us.astro +++ b/src/pages/about-us.astro @@ -16,6 +16,7 @@ import { Image } from 'astro:assets'; 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]} /> @@ -23,6 +24,7 @@ import { Image } from 'astro:assets'; 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]} /> @@ -30,6 +32,7 @@ import { Image } from 'astro:assets'; alt="" class="absolute right-[-4rem] bottom-[-7rem] -z-10 h-[14rem] w-auto" role="presentation" + sizes="224px" src={Background} widths={[448, 672]} /> @@ -37,6 +40,7 @@ import { Image } from 'astro:assets'; 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]} /> diff --git a/src/pages/members.astro b/src/pages/members.astro index 16559ccf..8c020978 100644 --- a/src/pages/members.astro +++ b/src/pages/members.astro @@ -20,7 +20,7 @@ const testimonials = await getTestimonials(); YoungVision Menschen sitzen am Lagerfeuer From 195d85b8ac58b7cbce924d4209cf6f8c20990733 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 14:27:18 +0200 Subject: [PATCH 13/16] perf(website): optimize event detail page --- src/pages/events/[slug].astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/events/[slug].astro b/src/pages/events/[slug].astro index 01768cde..9e5b0140 100644 --- a/src/pages/events/[slug].astro +++ b/src/pages/events/[slug].astro @@ -60,7 +60,7 @@ const locationPictures = [ loading="eager" {...event.heroImage} sizes="100vw" - widths={[300, 1060, 1460, 1780, 1920, 2048]} + widths={[325, 721, 920, 1080, 1290, 1480, 1640, 1780, 1920, 2048]} />
@@ -198,7 +198,7 @@ const locationPictures = [ {image.alt} From e33f34e09b90d26cd4a2fc7a757a41ace01b778f Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 14:31:35 +0200 Subject: [PATCH 14/16] perf(website): optimize donation method pictures --- src/components/support-us/DonationMethodList.svelte | 1 + src/components/support-us/DonationMethodTabs.svelte | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/support-us/DonationMethodList.svelte b/src/components/support-us/DonationMethodList.svelte index ef7d122f..e8094c39 100644 --- a/src/components/support-us/DonationMethodList.svelte +++ b/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" />
diff --git a/src/components/support-us/DonationMethodTabs.svelte b/src/components/support-us/DonationMethodTabs.svelte index bc120c4c..3aa1f1bb 100644 --- a/src/components/support-us/DonationMethodTabs.svelte +++ b/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} />
From b94e2c20f6c179b8020356302af16d2743e888ad Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 14:31:52 +0200 Subject: [PATCH 15/16] perf(website): apply more resp image lint suggestions --- src/components/events/YearlyEvents.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/events/YearlyEvents.svelte b/src/components/events/YearlyEvents.svelte index f98001e6..be8dc397 100644 --- a/src/components/events/YearlyEvents.svelte +++ b/src/components/events/YearlyEvents.svelte @@ -57,7 +57,7 @@ src={event.image.src} srcset={event.image.srcSet.attribute} {...event.image.attributes} - sizes="(min-width: 1280px) 540px, (min-width: 1024px) 40vw, 100vw" + sizes="(min-width: 1360px) 540px, (min-width: 1040px) 40vw, calc(100vw - 32px)" class="max-h-64 w-full rounded-t-2xl object-cover" />
From ed4772ad1e505123b11e330c7ad561d6eb240132 Mon Sep 17 00:00:00 2001 From: Jonas Bulik Date: Fri, 18 Apr 2025 14:37:15 +0200 Subject: [PATCH 16/16] perf(website): optimize member benefit image a bit. Refactor to grid --- src/components/members/MemberBenefits.astro | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/members/MemberBenefits.astro b/src/components/members/MemberBenefits.astro index 7e2af67e..ffb2c382 100644 --- a/src/components/members/MemberBenefits.astro +++ b/src/components/members/MemberBenefits.astro @@ -71,18 +71,18 @@ import { Image } from 'astro:assets'; text="Mitglied werden" /> -
+
YoungVision YoungVision