Add placeholder=blur to next/image expressions

Author: hasparus

src/app/conf/2023/gallery/page.tsx

@@ -30,6 +30,7 @@ export default function GalleryPage() {
               c[index] && (
                 <Zoom>
                   <NextImage
+                    placeholder="blur"
                     alt="Gallery"
                     className="aspect-video w-full rounded-md object-cover hover:opacity-75"
                     src={c[index]}

src/app/conf/2024/about.tsx

@@ -84,6 +84,7 @@ export function About() {
             </p>
           </div>
           <NextImage
+            placeholder="blur"
             src={ConfImage}
             className="aspect-video w-full rounded-md object-cover"
             alt="GraphQL Conf Image"
@@ -95,6 +96,7 @@ export function About() {
             alt="GraphQL Conf Image"
             src={ConfImage2}
             className="aspect-square w-full rounded-md object-cover max-lg:order-2"
+            placeholder="blur"
           />
           <div className="flex flex-col gap-14">
             <p className="lg:text-lg">

src/app/conf/2024/page.tsx

@@ -102,6 +102,7 @@ export default function Page() {
               alt="Lee Byron"
               className="aspect-video rounded-md object-cover"
               src={leeImage}
+              placeholder="blur"
             />
           </div>
         </div>

src/app/conf/2024/sponsors.tsx

@@ -78,6 +78,7 @@ function List({
             alt={`${name} logo`}
             src={icon}
             className="max-h-full lg:w-auto lg:max-w-60"
+            placeholder="blur"
           />
           <span className="absolute right-5 top-5 font-sans leading-none text-white lg:text-2xl">
             ↗

src/app/conf/2024/venue.tsx

@@ -33,6 +33,7 @@ export function Venue() {
             src={cityViewImage}
             alt="San Francisco city view"
             className="mx-auto my-8 aspect-video rounded-md object-cover"
+            placeholder="blur"
           />
         </div>
         <div>

src/app/conf/2025/components/gallery-strip/index.tsx

@@ -71,6 +71,7 @@ function GalleryStripImage({
       <Image
         data-index={index}
         src={image}
+        placeholder="blur"
         alt=""
         role="presentation"
         // intrinsic 799x533

src/app/conf/2025/components/hero/hero-image.tsx

@@ -7,6 +7,7 @@ export function HeroImage() {
     <div className="z-[2] bg-blk">
       <Image
         src={heroPhoto}
+        placeholder="blur"
         width={1920}
         height={560}
         alt="five speakers at GraphQLConf 2024"

src/app/conf/2025/components/register-today/index.tsx

@@ -25,6 +25,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
         width="450"
         height="566"
         className="aspect-[312/392] w-full object-cover max-sm:hidden sm:aspect-[2] lg:aspect-[450/566] lg:h-[566px] lg:w-[450px]"
+        placeholder="blur"
       />
       <div className="flex flex-col justify-between">
         <div>

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

@@ -49,6 +49,7 @@ export function SpeakerCard({
           {speaker.avatar ? (
             <Image
               src={speaker.avatar}
+              placeholder="blur"
               alt=""
               width={176}
               height={176}

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

@@ -150,6 +150,7 @@ function TopMindCard({
           width={312}
           height={312}
           className="aspect-square size-[312px] w-full object-cover saturate-[0.1] transition-transform sm:h-[236px]"
+          placeholder="blur"
         />
         <Stripes mask={stripes} />
       </div>