Generate base64 placeholders in build

Author: hasparus

package.json

@@ -66,6 +66,7 @@
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
+    "plaiceholder": "^3.0.0",
     "playwright-core": "^1.54.2",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.1",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import Image from "next/image"
+import { getPlaiceholder } from "plaiceholder"
 
 import { Anchor } from "../../_design-system/anchor"
 import { SchedSpeaker } from "../../2023/types"
@@ -11,6 +12,7 @@ import { SpeakerLinks } from "./speaker-links"
 import styles from "./speaker-card.module.css"
 import { formatSpeakerPosition } from "./format-speaker-position"
 import { formatDescription } from "../schedule/[id]/format-description"
+import { getBase64Placeholder } from "../../_design-system/utils/get-base64-placeholder"
 
 export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
   isReturning?: boolean
@@ -20,13 +22,30 @@ export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
   year: string
 }
 
-export function SpeakerCard({
+export async function SpeakerCard({
   className,
   speaker,
   year,
   showSocials = false,
   ...props
 }: SpeakerCardProps) {
+  let avatarPlaceholder: string | undefined
+
+  if (speaker.avatar) {
+    try {
+      if (speaker.avatar.startsWith("//"))
+        speaker.avatar = `https:${speaker.avatar}`
+
+      avatarPlaceholder = await getBase64Placeholder(speaker.avatar)
+    } catch (e) {
+      // this might happen in dev server on reloads and it's okay to ignore
+      console.warn(
+        "failed to fetch speaker.avatar for placeholder generation:",
+        e,
+      )
+    }
+  }
+
   return (
     <article
       className={clsx(
@@ -44,13 +63,14 @@ export function SpeakerCard({
           />
         )}
 
-        <div className="relative aspect-square h-full overflow-hidden @[420px]:w-[176px] @[420px]:shrink-0">
+        {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+        <div className="Avatar relative aspect-square h-full overflow-hidden @[420px]:w-[176px] @[420px]:shrink-0">
           <div className="absolute inset-0 z-[1] bg-sec-light mix-blend-multiply" />
           {speaker.avatar ? (
             <Image
               src={speaker.avatar}
-              // TODO: Get a placeholder blur URL with plaiceholder
-              placeholder="blur"
+              // the placeholder without an additional blur NextImage adds actually fits better here
+              placeholder={avatarPlaceholder! as `data:image/${string}`}
               alt=""
               width={176}
               height={176}

src/app/conf/2025/components/speaker-card.tsx

@@ -4,13 +4,13 @@ import Image from "next/image"
 import type { StaticImageData } from "next/image"
 
 import { Button } from "@/app/conf/_design-system/button"
-import { GET_TICKETS_LINK } from "../../links"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import {
   SocialIconType,
   SocialIcon,
   urlForUser,
 } from "@/app/conf/_design-system/social-icon"
+import { getBase64Placeholder } from "../../../_design-system/utils/get-base64-placeholder"
 
 const previousConfSpeakers = {
   benjie: {
@@ -127,14 +127,24 @@ export interface TopMindCardProps {
   socials: Partial<Record<SocialIconType, string>>
 }
 
-function TopMindCard({
+async function TopMindCard({
   name,
   title,
   src,
   className,
   stripes,
   socials,
 }: TopMindCardProps) {
+  let avatarPlaceholder: string | undefined
+
+  try {
+    if (typeof src === "string") {
+      avatarPlaceholder = await getBase64Placeholder(src)
+    }
+  } catch {
+    // this happens only in development
+  }
+
   return (
     <article
       className={clsx(
@@ -146,8 +156,7 @@ function TopMindCard({
         <div className="absolute inset-0 z-[1] bg-sec-light opacity-90 mix-blend-multiply" />
         <Image
           src={src}
-          // TODO: Get a placeholder blur URL with plaiceholder
-          placeholder="blur"
+          placeholder={avatarPlaceholder! as `data:image/${string}`}
           alt=""
           width={312}
           height={312}

src/app/conf/2025/components/top-minds/index.tsx

@@ -52,6 +52,16 @@ export function generateStaticParams() {
   return schedule.filter(s => s.id).map(s => ({ id: s.id }))
 }
 
+export const getStaticProps = async () => {
+  const placeholders = speakers.map(speaker => lqip)
+
+  return {
+    props: {
+      placeholders
+    }
+  }
+}
+
 export default function SessionPage({ params }: SessionProps) {
   const session = schedule.find(s => s.id === params.id)
   if (!session) {

src/app/conf/2025/schedule/[id]/page.tsx

@@ -1,23 +1,24 @@
 import { Metadata } from "next"
 import React from "react"
+import Image from "next/image"
+import clsx from "clsx"
+
+import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
+import { Button } from "@/app/conf/_design-system/button"
 
 import { previousEditionSessions, speakers, speakerSessions } from "../../_data"
 import { metadata as layoutMetadata } from "../../layout"
-
 import { HERO_MARQUEE_ITEMS } from "../../utils"
 import { BackLink } from "../../schedule/_components/back-link"
 import { NavbarPlaceholder } from "../../components/navbar"
 import { CtaCardSection } from "../../components/cta-card-section"
-import clsx from "clsx"
-import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
-import { Button } from "@/app/conf/_design-system/button"
 import { MarqueeRows } from "../../components/marquee-rows"
 import { GET_TICKETS_LINK } from "../../links"
 import { SpeakerTags } from "../../components/speaker-tags"
 import { SpeakerLinks } from "../../components/speaker-links"
 import { LongSessionCard } from "./long-session-card"
-import Image from "next/image"
 import { formatDescription } from "../../schedule/[id]/format-description"
+import { getBase64Placeholder } from "../../../_design-system/utils/get-base64-placeholder"
 
 type SpeakerProps = { params: { id: string } }
 
@@ -140,7 +141,7 @@ export default function SpeakerPage({ params }: SpeakerProps) {
   )
 }
 
-function SpeakerHeader({
+async function SpeakerHeader({
   speaker,
   year,
   className,
@@ -149,6 +150,12 @@ function SpeakerHeader({
   year: `20${number}`
   className?: string
 }) {
+  if (speaker.avatar?.startsWith("//"))
+    speaker.avatar = `https:${speaker.avatar}`
+
+  const avatarPlaceholder =
+    speaker.avatar && (await getBase64Placeholder(speaker.avatar))
+
   return (
     <header
       className={clsx("flex justify-between gap-4 max-md:flex-col", className)}
@@ -179,8 +186,8 @@ function SpeakerHeader({
             width={464}
             height={464}
             className="aspect-square size-[464px] object-cover saturate-[0.1] transition-transform max-lg:w-full"
-            // TODO: Get a placeholder blur URL with plaiceholder
             placeholder="blur"
+            blurDataURL={avatarPlaceholder! as `data:image/${string}`}
           />
         </div>
       )}

src/app/conf/2025/speakers/[id]/page.tsx

@@ -0,0 +1,8 @@
+"server-only"
+
+import { getPlaiceholder } from "plaiceholder"
+
+export async function getBase64Placeholder(src: string) {
+  const image = await fetch(src).then(res => res.arrayBuffer())
+  return (await getPlaiceholder(Buffer.from(image))).base64
+}