gallery image optimization

package.json

@@ -30,7 +30,7 @@
     "framer-motion": "^11.2.12",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "sharp": "0.32.6",
+    "sharp": "0.33.4",
     "tailwind-merge": "2.3.0",
     "tailwindcss": "3.4.4",
     "tailwindcss-animate": "1.0.7",

src/components/Gallery.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import type { GetImageResult } from "astro";
 import type { CollectionEntry } from "astro:content";
 
 type ProgrammeImage =
@@ -8,30 +9,38 @@ type ProgrammeImage =
   | CollectionEntry<"take10arvosImages">
   | CollectionEntry<"genlinkImages">;
 
-function ProductImage({
+function Thumbnail({
   image,
+  thumbnailImage,
   onExpand,
 }: {
   image: ProgrammeImage;
+  thumbnailImage: GetImageResult;
   onExpand: (image: ProgrammeImage) => void;
 }) {
   return (
     <motion.img
       onClick={() => onExpand(image)}
-      src={image.data.image.src}
+      src={thumbnailImage.src}
       alt={image.data.title}
-      className="aspect-[4/3] cursor-pointer rounded-lg object-cover"
+      className="aspect-[4/3] w-full cursor-pointer rounded-lg object-cover"
       layoutId={`image-${image.id}`}
     />
   );
 }
 
-export function Gallery({ imageData }: { imageData: ProgrammeImage[] }) {
+export function Gallery({
+  imageData,
+  thumbnails,
+}: {
+  imageData: ProgrammeImage[];
+  thumbnails: { [key: string]: GetImageResult };
+}) {
   const [images, setImages] = useState<ProgrammeImage[]>(imageData);
   const [primaryImage, setPrimaryImage] = useState<ProgrammeImage>(images[0]);
 
   function setAsPrimary(selectedImage: ProgrammeImage) {
-    // Reorder the images by placing the previously primary image at the bottom
+    // Reorder the images by placing the previous primary image at the bottom
     const newImages = [
       ...images.filter((image) => image.id !== selectedImage.id),
       primaryImage,
@@ -56,17 +65,18 @@ export function Gallery({ imageData }: { imageData: ProgrammeImage[] }) {
         </AnimatePresence>
       </div>
 
-      <aside className="flex h-[200px] gap-6 overflow-auto pr-6 lg:grid lg:h-[600px] lg:grid-cols-1 xl:col-span-2 xl:grid-cols-2">
+      <div className="flex h-[200px] gap-6 overflow-auto pr-6 lg:grid lg:h-[600px] lg:grid-cols-1 xl:col-span-2 xl:grid-cols-2">
         <AnimatePresence>
           {images.slice(1).map((image) => (
-            <ProductImage
+            <Thumbnail
               key={image.id}
               image={image}
+              thumbnailImage={thumbnails[image.id]}
               onExpand={setAsPrimary}
             />
           ))}
         </AnimatePresence>
-      </aside>
+      </div>
     </div>
   );
 }

src/components/layouts/Layout.astro

@@ -1,5 +1,5 @@
 ---
-import "@/styles/globals.css";
+import "@/globals.css";
 
 import { ViewTransitions } from "astro:transitions";
 

src/components/pages/news/NewsCard.astro

@@ -17,8 +17,7 @@ const { post } = Astro.props;
   >
     <Image
       src={post.data.image}
-      width="500"
-      height="500"
+      width={500}
       alt={post.data.title}
       class="aspect-[4/3] w-full rounded-2xl object-cover transition duration-500 group-hover:scale-110"
       transition:name={`news-image-${post.slug}`}

src/pages/dosomegood.astro

@@ -1,18 +1,17 @@
 ---
 import { getCollection, getEntry } from "astro:content";
-import type { ImageMetadata } from "astro";
-import { Image } from "astro:assets";
+import type { GetImageResult, ImageMetadata } from "astro";
+import { Image, getImage } from "astro:assets";
 import { Icon } from "astro-icon/components";
 
 import Layout from "@/components/layouts/Layout.astro";
 import Banner from "@/components/Banner.astro";
 import { Collapsible } from "../components/Collapsible";
 import School from "@/components/pages/dosomegood/School.astro";
-import { Gallery } from "@/components/Gallery";
 import poster from "@/assets/img/dosomegood/poster.png";
-import Marquee from "../components/ui/marquee";
+import Marquee from "@/components/ui/marquee";
+import { Gallery } from "@/components/Gallery";
 
-const images = await getCollection("dosomegoodImages");
 const sponsors = await getCollection("dosomegoodSponsors");
 const supporters = await getCollection("dosomegoodSupporters");
 const schools = (await getCollection("dosomegoodSchools")).sort(
@@ -21,6 +20,22 @@ const schools = (await getCollection("dosomegoodSchools")).sort(
 
 const page = await getEntry("pages", "dosomegood");
 const { Content } = await page.render();
+
+// Generate thumbnails
+const images = await getCollection("dosomegoodImages");
+const importedImages = import.meta.glob("../content/dosomegoodImages/*");
+
+const thumbnails: { [key: string]: GetImageResult } = {};
+
+for await (const image of images) {
+  thumbnails[image.id] = await getImage({
+    src: importedImages[
+      `../content/dosomegoodImages/${image.slug}.jpg`
+    ]() as unknown as string,
+    format: "webp",
+    width: 500,
+  });
+}
 ---
 
 <Layout title={page.data.title}>
@@ -196,7 +211,7 @@ const { Content } = await page.render();
   </section>
 
   <section class="section-container">
-    <Gallery imageData={images} client:visible />
+    <Gallery imageData={images} thumbnails={thumbnails} client:visible />
   </section>
 </Layout>
 

src/pages/gen-link.astro

@@ -1,15 +1,30 @@
 ---
 import { getCollection, getEntry } from "astro:content";
-import { Image } from "astro:assets";
+import type { GetImageResult } from "astro";
+import { Image, getImage } from "astro:assets";
 
 import Layout from "@/components/layouts/Layout.astro";
 import Banner from "@/components/Banner.astro";
 import { Gallery } from "@/components/Gallery";
 
-const images = await getCollection("genlinkImages");
-
 const page = await getEntry("pages", "gen-link");
 const { Content } = await page.render();
+
+// Generate thumbnails
+const images = await getCollection("genlinkImages");
+const importedImages = import.meta.glob("../content/genlinkImages/*");
+
+const thumbnails: { [key: string]: GetImageResult } = {};
+
+for await (const image of images) {
+  thumbnails[image.id] = await getImage({
+    src: importedImages[
+      `../content/genlinkImages/${image.slug}.jpg`
+    ]() as unknown as string,
+    format: "webp",
+    width: 500,
+  });
+}
 ---
 
 <Layout title={page.data.title}>
@@ -77,6 +92,6 @@ const { Content } = await page.render();
   </section>
 
   <section class="section-container">
-    <Gallery imageData={images} client:visible />
+    <Gallery imageData={images} thumbnails={thumbnails} client:visible />
   </section>
 </Layout>

src/pages/take10-arvos.astro

@@ -1,18 +1,33 @@
 ---
 import { getCollection, getEntry } from "astro:content";
-import type { ImageMetadata } from "astro";
-import { Image } from "astro:assets";
+import type { GetImageResult, ImageMetadata } from "astro";
+import { Image, getImage } from "astro:assets";
 
 import Layout from "@/components/layouts/Layout.astro";
 import Banner from "@/components/Banner.astro";
-import { Gallery } from "@/components/Gallery";
 import Marquee from "@/components/ui/marquee";
+import { Gallery } from "@/components/Gallery";
 
-const images = await getCollection("take10arvosImages");
 const sponsors = await getCollection("take10arvosSponsors");
 
 const page = await getEntry("pages", "take10-arvos");
 const { Content } = await page.render();
+
+// Generate thumbnails
+const images = await getCollection("take10arvosImages");
+const importedImages = import.meta.glob("../content/take10arvosImages/*");
+
+const thumbnails: { [key: string]: GetImageResult } = {};
+
+for await (const image of images) {
+  thumbnails[image.id] = await getImage({
+    src: importedImages[
+      `../content/take10arvosImages/${image.slug}.jpg`
+    ]() as unknown as string,
+    format: "webp",
+    width: 500,
+  });
+}
 ---
 
 <Layout title={page.data.title}>
@@ -87,6 +102,6 @@ const { Content } = await page.render();
   </section>
 
   <section class="section-container">
-    <Gallery imageData={images} client:visible />
+    <Gallery imageData={images} thumbnails={thumbnails} client:visible />
   </section>
 </Layout>

src/pages/take10.astro

@@ -1,21 +1,36 @@
 ---
 import { getCollection, getEntry } from "astro:content";
-import type { ImageMetadata } from "astro";
-import { Image } from "astro:assets";
+import type { GetImageResult, ImageMetadata } from "astro";
+import { Image, getImage } from "astro:assets";
 import { Icon } from "astro-icon/components";
 
 import Layout from "@/components/layouts/Layout.astro";
 import Banner from "@/components/Banner.astro";
-import { Gallery } from "@/components/Gallery";
 import poster from "@/assets/img/take10/poster.png";
 import Marquee from "@/components/ui/marquee";
+import { Gallery } from "@/components/Gallery";
 
-const images = await getCollection("take10Images");
 const sponsors = await getCollection("take10Sponsors");
 
 const page = await getEntry("pages", "take10");
 
 const { Content } = await page.render();
+
+// Generate thumbnails
+const images = await getCollection("take10Images");
+const importedImages = import.meta.glob("../content/take10Images/*");
+
+const thumbnails: { [key: string]: GetImageResult } = {};
+
+for await (const image of images) {
+  thumbnails[image.id] = await getImage({
+    src: importedImages[
+      `../content/take10Images/${image.slug}.jpg`
+    ]() as unknown as string,
+    format: "webp",
+    width: 500,
+  });
+}
 ---
 
 <Layout title={page.data.title}>
@@ -146,7 +161,7 @@ const { Content } = await page.render();
   </section>
 
   <section class="section-container">
-    <Gallery imageData={images} client:visible />
+    <Gallery imageData={images} thumbnails={thumbnails} client:visible />
   </section>
 </Layout>
 

tailwind.config.cjs

@@ -9,7 +9,6 @@ module.exports = {
     extend: {
       animation: {
         marquee: "marquee var(--duration) linear infinite",
-        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "collapsible-down": "collapsible-down 0.2s ease-out",
@@ -20,10 +19,6 @@ module.exports = {
           from: { transform: "translateX(0)" },
           to: { transform: "translateX(calc(-100% - var(--gap)))" },
         },
-        "marquee-vertical": {
-          from: { transform: "translateY(0)" },
-          to: { transform: "translateY(calc(-100% - var(--gap)))" },
-        },
         "accordion-down": {
           from: { height: "0" },
           to: { height: "var(--radix-accordion-content-height)" },