Next.js Image blurDataURL

next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … } 을 사용한다면, 빈 화면이 뜨는 동안 블러처리 된 이미지가 화면에 보이게 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. ux적으로도 사용자에게 이미지가 로딩 중임을 알려주고, 원본 이미지를 추측할 수 있도록 도와준다.

 

정적으로 이미지를 불러오는 상황

// placeholder='blur' 만 추가해도 자동으로 채워준다
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="profileImg"
			placeholder="blur" 
    />
  )
}

 

동적으로 이미지를 불러오는 상황

blurDataURL 를 추가적으로 더하면 되는데 blurImg 는 base64로 인코딩되서 ASCII 문자열로만 이루어진 이미지 데이터가 들어가야 된다.

const base64 = 'data:image/jpeg;base64,'
const blurImg = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO88B8AAqUB0Y/H4mkAAAAASUVORK5CYII='

<Image
  src={img.url}
  alt="image"
  width={300}
  height={300}           
  placeholder='blur'               
  blurDataURL={base64 + blurImg} 
/>

 

 

base64로 인코딩된 이미지 픽셀 만들어주는 사이트

Transparent PNG Pixel Base64 Encoded

 

동적 이미지 placeholder, blurDataURL 적용 여부 비교

placeholder X , blurDataURL X

 

 

placeholder O, blurDataURL O