Nextjs blurDataUrl dynamic하게 제공하기

blur이미지로 placeholder제공

오랜만에 포스팅!
오늘은 nextjs 이미지 컴포넌트에서 blurDataUrl을 활용해서 이미지가 완전히 로드되기 전,
흐리게 보이도록 하는 로더를 활용해 보는 방법을 다루고자 한다.
지금까지는 일반 img 태그에 스켈레톤을 활용해서 placeholder를 구현했었는데,
tripie는 여행 관련 앱이므로 사진 콘텐츠가 엄청 많아 모두 스켈레톤으로 로드하기에는 보기에 좋지 않았다.
따라서 앞으로 로드될 이미지의 blur 처리된 버전으로 UX를 높이고자 한번 다뤄보고자 한다.

 

blur data url을 활용한 Nextjs 컴포넌트 placeholder

Blur Data Url 이냐 스켈레톤 UI냐

먼저 blur data url이 스켈레톤 ui 보다 더 적합한가 챗지피티한테 물어보았다.

✅ Pros of Blur Data URLs

1. Better User Experience (UX) 👀
   • Blur data URLs create a smooth loading effect, making the transition to the full image feel natural.
   • Skeleton loaders can feel jarring or disconnected, whereas blurred images give a preview of the actual content.
2. Less Layout Shift (CLS) 📏
   • Using a blurred placeholder prevents Cumulative Layout Shift (CLS), improving Core Web Vitals.
   • Skeleton loaders often take up space but can still cause minor shifts when the actual image loads.
3. Lower Bandwidth Usage 📡
   • Blur data URLs are usually very small base64-encoded images (~100-200 bytes).
   • Skeleton images require a separate request, increasing network requests and data usage.
4. Prevents Flash of Empty Content 🚫⬜
   • Instead of a gray box, users see a blurry preview of the real image, maintaining context.
5. Faster Rendering ⚡
   • Since blur data URLs are inlined in the HTML/CSS, the browser does not need a separate request.
   • Skeleton images require fetching an external file before being displayed.
6. Improves Perceived Performance 🚀
   • Even if the full image takes longer to load, users feel like the page is responsive because they see something instantly.

❌ When Skeleton Images Might Be Better

• For non-image elements (e.g., text, buttons, cards, etc.).
• When content size is unknown, and a blurry preview wouldn’t make sense.
• For very large images where base64 blur placeholders can slightly impact initial page load.

🎯 When to Use Each?

ScenarioUse Blur Data URL? Use Skeleton Loader?

Image-heavy pages (news, travel, e-commerce)	✅ Yes	❌ No
Content with user-generated images	✅ Yes	❌ No
Large text-based content (e.g., blog posts)	❌ No	✅ Yes
UI components (buttons, cards, forms)	❌ No	✅ Yes
Placeholder for API-fetched images	✅ Yes	❌ No

 

즉, 위의 체크리스트 과반 이상은 해당되었다.

 

☑️ 이미지가 많이 필요한 페이지

☑️ 유저가 제공하는 이미지 (static import가 아닌 이미지들)

☑️ 텍스트가 많지 않는 페이지

☑️  API fetch된 이미지의 placeholder로 사용하기 위해

 

걸리는 점은 이미지를 가져와서 db에 인코딩한 값을 저장하면 추가적인 요청이 불필요하지 않을까?

---

Blur Data Url 적용해 보기

먼저 공식문서를 살펴보면 Next 이미지 컴포넌트는 다음과 같이 사용 가능하다.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
      placeholder={'empty'}
    />
  )
}

 

placeholder 에는'empty' // "empty" | "blur" | "data:image/..." 값 등이 들어갈 수 있는데,

blur를 사용하기 위해서는 blurDataURL 속성을 추가해줘야 하는데,  data:image/...와 같이 base64로 인코딩 된 값이 필수다.

 

만약 src가 static Import인. jpg,. png,. webp 또는 .avif로 된 객체라면 자동적으로 가져와지지만, 

dynamic 이미지인 경우, base24 인코딩이 필수다.

 

해당 포스팅은 nextjs(^15.0.3) app router을 기준으로 작성되었다.

 

src/api/blur-image.ts에 다음과 같이 인코딩 작업을 다룰 함수를 작성해 주었다.

import API from 'constants/api-routes';
import { NextResponse } from 'next/server';

// https://medium.com/@kavindumadushanka972/learn-how-to-create-dynamic-blur-data-urls-for-images-in-next-js-bc4eb5d04ec6 참고
export async function GET(request: NextResponse) {
  const { searchParams } = new URL(request.url);
  const url = searchParams.get('url') as string;

  const base64str = await fetch(`${API.BASE_URL}/_next/image?url=${url}&w=16&q=75`).then(async res =>
    Buffer.from(await res.arrayBuffer()).toString('base64')
  );

  const blurSvg = `
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'>
    <filter id='b' color-interpolation-filters='sRGB'>
      <feGaussianBlur stdDeviation='1' />
    </filter>
    <image preserveAspectRatio='none' filter='url(#b)' x='0' y='0' height='100%' width='100%' 
    href='data:image/avif;base64,${base64str}' />
  </svg>
`;

  const toBase64 = (str: string) =>
    typeof window === 'undefined' ? Buffer.from(str).toString('base64') : window.btoa(str);

  return NextResponse.json({ data: `data:image/svg+xml;base64,${toBase64(blurSvg)}` }, { status: 200 });
}

 

API.BASE_URL 은. env에  환경변수로 설정해 준 웹사이트 URL 상수값 (dev 환경일 때는 localhost//...)이다.

w은 width를 나타낸다. 즉, 이미지가 픽셀 단위로 넓이가 얼마인지를 나타내, 16w인 경우 16 픽셀의 이미지로 설정한다는 것이다.

q는 quality를  나타내는데, 이미지가 얼마나 압축되어 화질을 설정할 수 있다. q값이 클수록 더 화질이 좋아지지만 이미지 크기 사이즈가 커진다. 반대로, 낮은 값일수록 이미지 파일 사이즈는 작아지지만 이미지의 질 또한 낮아진다. 예를 들어 q=75인 경우 이미지의 퀄리티는 75%로 설정할 수 있다. 

 

w와 q 값을 최소로 설정할 경우 로드가 가장 빨라진다. 다만 이때, blur 처리된 이미지를 보여줄 것이기 때문에 화질이 나빠지는 건 문제가 되지 않는다.

 

트리피 앱에서 데이터를 긁어왔는데, 다음과 같이 img url 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'를 해당 함수로 돌리면 'data:image/svg+xml;base64,CiAg....' 값이 되어 영상과 같이 로딩 중 blur 처리되어 제공된다는 걸 볼 수 있다.

 

앱에서 활용되는 모습은 다음과 같다.

 

https://tripie-mauve.vercel.app/regions/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD/location/759174cc-0814-4400-a420-5668a0517edd

Tripie ✈️

 

🤔 여기까지는 수월했는데, 로드되는 시간이 너무 길어진 거 같아서 아쉬웠다. 

현재는 이미지 데이터를 url만 저장했는데, 인코딩한 값도 같이 저장해 주면 이 요청을 하는 시간을 단축할 수 있지 않을까 싶어서 저장하기로 했다. firebase에 해당 데이터를 저장하고 싶었으나, 객체를 중첩된 데이터를 그대로 저장하는 것이 불가능하다는 점에서 모든 blurDataURL을 저장할 수 없었다. (현재는 JSON을 문자로 parse한 값을 통으로 저장하고 있는데, 문자열의 크기 또한 너무 커져서 데이터를 다른 타입으로 저장해야 할 거 같다...).

 

😀 그래도 스켈레톤만 덩그러니 보이는 페이지보다는 블러된 이미지라도 보여서 뭔가 없어 보이는 느낌이 덜하긴 하다.

 

 

---

Reference

https://medium.com/@kavindumadushanka972/learn-how-to-create-dynamic-blur-data-urls-for-images-in-next-js-bc4eb5d04ec6

Learn how to create dynamic blur data URLs for images in Next.js.