web: enable avif image format

web/next.config.mjs

@@ -16,6 +16,7 @@ const nextConfig = {
         hostname: "**",
       },
     ],
+    formats: ["image/avif", "image/webp"],
     dangerouslyAllowLocalIP: process.env.NODE_ENV === "development",
   },
   turbopack: {

web/src/components/events/EventItem.tsx

@@ -22,6 +22,7 @@ export const EventItem = ({
   mode,
   size,
   imageLoading,
+  imageFetchPriority,
 }: {
   event:
     | SingularEvent
@@ -31,6 +32,7 @@ export const EventItem = ({
   mode: "list" | "calendar" | "singular-time-only";
   size?: "small" | "medium" | "large";
   imageLoading?: "eager" | "lazy";
+  imageFetchPriority?: "high" | "low" | "auto";
 }) => {
   const futureOccurrences = getFutureOccurrences(event);
   const groupedOccurrences = groupConsecutiveDates(
@@ -55,6 +57,7 @@ export const EventItem = ({
             height={0}
             sizes="(max-width: 900px) 100vw, 25vw"
             loading={imageLoading}
+            fetchPriority={imageFetchPriority}
           />
         )}
       </div>

web/src/components/events/FeaturedEvents.tsx

@@ -9,8 +9,14 @@ export const FeaturedEvents = ({ events }: { events: EventListItemFragment[] })
     <section className={styles.featuredEvents}>
       <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
       <ul className={styles.eventList}>
-        {events.slice(0, 3).map((event) => (
+        {events.slice(0, 3).map((event, index) => (
-          <EventItem key={event.id} event={event} mode="list" imageLoading="eager" />
+          <EventItem
+            key={event.id}
+            event={event}
+            mode="list"
+            imageLoading="eager"
+            imageFetchPriority={index < 2 ? "high" : undefined}
+          />
         ))}
       </ul>
       <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />