[Next.js] Next/Image base64 placeholder 만들기 (블러 처리된 플레이스홀더)

Next/Image는 크게 로컬 이미지(정적 이미지)와 리모트 이미지(다이나믹 이미지)로 나뉜다. /public 폴더에 저장한 로컬 이미지는 빌드 타임에 import한 이미지 파일의 width, height를 자동으로 지정하고 base64로 인코딩한 이미지가 생성된다. 따라서 추가 작업 없이 블러 처리된 Placeholder를 사용할 수 있다.

// public 폴더에 있는 me.png 파일을 사용하고 있다
<Image
  src="/me.png"
  alt="Picture of the author"
  placeholder="blur"
  // width={500} automatically provided
  // height={500} automatically provided
  // blurDataURL="data:..." automatically provided
/>;

 

그 외 상황은 리모트 이미지로 구분한다. 이때 블러 처리된 Placeholder를 사용하려면 plaiceholder 같은 라이브러리를 사용하거나 캔버스 API를 이용해서 4×4 정도의 사이즈(보통 300바이트 미만)로 줄인 후 base64로 변환하는 작업이 필요하다. NextJS 공식 문서에선 10 픽셀 미만의 사이즈를 권장하고 있다.

 

방법 1. Canvas 활용

---

사용자 컴퓨터에서 이미지를 선택한 후 업로드한 경우엔 유틸 함수를 만들어서 사용할 수 있다. 이미지 크롭 등의 상황에서 사용하면 유용하다. ❶로컬 컴퓨터에서 이미지 선택 ➋이미지 크롭 ➌Placeholder로 사용할 base64 문자열을 생성하고, 크롭 이미지 원본은 서버로 전송 ❹크롭 이미지 렌더.

이미지 출처 - fromyou

s는 source(이미지), d는 destination(캔버스)을 의미한다. drawImage 메서드에 넘긴 파라미터 개수에 따라 사용법이 달라지므로 주의할 것. 참고로 source 엘리먼트를 넘기는 첫번째 인자엔 SVG 같은 이미지는 물론 비디오나 캔버스 엘리먼트도 가능하다. — MDN

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dw, dh)
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

// utils.js
export const toDataURL = (
  img: HTMLImageElement,
  width: number,
  height: number,
) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  if (!ctx) throw new Error('No 2d context');

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);
  // 1번째 인자 : HTMLImageElement, SVGImageElement 등 이미지 소스 엘리먼트
  // 2번째 인자(dx) : 캔버스에 그릴 x축 좌표
  // 3번째 인자(dy) : 캔버스에 그릴 y축 좌표
  // 4번째 인자(dw) : 캔버스에 그릴 width
  // 5번재 인자(dy) : 캔버스에 그릴 height

  return canvas.toDataURL(); // 리사이즈한 이미지를 base64(data URL) 문자열로 변환
};

// 이미지 엘리먼트를 받아 4×4로 리사이즈한 base64 문자열을 반환하는 함수
export const getBlurDataURL = (img: HTMLImageElement) => {
  return toDataURL(img, 4, 4);
};

 

💡 URL.createObjectURL 대신 FileReader API를 사용할 수도 있다(참고 포스팅)

// <input type="file" ... /> 엘리먼트의 onChange 핸들러
const image = e.target.files?.[0];

if (image) {
  const blobUrl = URL.createObjectURL(image);
  const img = new Image();
  img.src = blobUrl;

  img.onload = () => {
    const base64 = getBlurDataURL(img); // "data:image/png;base64,iVBw...
    URL.revokeObjectURL(blobUrl); // 이미지 로드를 완료하면 메모리 누수 방지를 위해 폐기
    // ...원하는 작업 수행
    // base64 문자열은 Next/Image의 blurDataURL 속성에 사용한다
  };
}

 

4×4로 리사이즈한 이미지. 평균적으로 200바이트 미만의 용량으로 줄어든다

 

방법2. Plaiceholder 라이브러리 활용

---

💡 TailwindCSS 유틸리티 클래스 형태로 사용할 수 있는 @plaiceholder/tailwindcss 플러그인도 있다

 

plaiceholder 라이브러리는 LQIP(저화질 이미지) 생성을 도와주는 NodeJS 라이브러리다. Base64, SVG 등 포맷으로 생성할 수 있다. Next/Image의 blurDataURL 속성에 사용하려면 Base64로 생성하면 된다. 공식 문서에 따르면 Base64 포맷은 일반적으로 ~300 Bytes 미만 사이즈로 생성된다고 한다.

 

패키지 설치

npm install plaiceholder @plaiceholder/next sharp

 

초기 세팅

// next.config.js (withPlugins 플러그인을 사용하지 않는 경우)
const { withPlaiceholder } = require('@plaiceholder/next');

module.exports = withPlaiceholder({
  images: { domains: ['images.unsplash.com'] },
  // ...NextJS configs
});

// next.config.js (withPlugins 플러그인을 사용하는 경우)
const withPlugins = require('next-compose-plugins');
const { withPlaiceholder } = require('@plaiceholder/next');

const nextConfig = {
  images: { domains: ['images.unsplash.com'] },
  // ...NextJS configs
};

module.exports = withPlugins([withPlaiceholder, ...], {
  ...nextConfig,
  // ...
});

 

기본 사용 방법

💡 plaiceholder는 NodeJS 환경에서만 작동한다.

 

plaiceholder 라이브러리는 NodeJS 환경에서만 작동하므로 getStaticProps, getServerSideProps 등에서 사용해야 한다. getPlaiceholder 첫번째 인자엔 정적 이미지 경로(public 폴더 기준) 혹은 리모트 이미지 경로를 입력한다. 두번째 옵션 인자엔 dir(정적 에셋 폴더 지정, 기본값 ./public), size(기본값 4) brightness 등의 옵션을 지정할 수 있다.

getPlaiceholder(src, options?)

 

• 정적 이미지 경로 예시 : getPlaiceholder("/images/me.png")
  → public/images/me.png (dir 옵션을 변경하지 않았다면 처음 /는 public 폴더를 가리킨다)
• 리모트 이미지 경로 예시 : getPlaiceholder("images.unsplash.com/...")

 

getPlaiceholder 함수는 css, svg, base64, blurhash, img 다섯 유형의 값을 반환한다. img는 이미지 태그에 필요한 어트리뷰트를 포함(src, width, height, type)하고 있다. base64 반환값은 Image 컴포넌트의 blurDataURL 속성에 사용하면 된다.

// 공식 문서 코드 참고
import type { InferGetStaticPropsType } from 'next';
import { getPlaiceholder } from 'plaiceholder';

export const getStaticProps = async () => {
  const { base64, img } = await getPlaiceholder('/path-to-your-image.jpg');
  // img -> { src: '...', width: 382, height: 382, type: 'png' }
  // base64 -> "data:image/png;base64,iVBw...

  return {
    props: {
      imageProps: { ...img, blurDataURL: base64 },
    },
  };
};

export default function ImageList({
  imageProps,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  // ...
  return (
    <div>
      <Image {...imageProps} placeholder="blur" />
    </div>
  );
}

 

브라우저 환경에서 사용하기

plaiceholder는 브라우저 환경에선 사용할 수 없다. 대신 아래처럼 Base64 변환 작업을 수행하는 NextJS API Route를 만들어두고 브라우저에서 NextJS API를 호출하는 방식으로 사용할 수 있다. (참고글)

// pages/api/get-base64.ts
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<string>,
) {
  const { body } = req;
  const { url } = body;

  try {
    const { base64 } = await getPlaiceholder(url);
    res.status(200).send(base64);
  } catch (e) {
    if (e instanceof Error) res.status(500).send(e.message);
    // ...
  }
}

// utils.ts
export const getBase64 = async (url: string) => {
  return await axios.post<string>('/api/get-base64', { url });
};

 

레퍼런스

---

• Usage | Plaiceholder: Docs
• Creating blur placeholder images using Next JS and Plaiceholder

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요