base64 인코딩 원리

지난 번에 next/image 에서 제공하는 property인 placeholder 와 blurDataURL을 사용하여 이미지 렌더링 시 블러처리로 개선했다. 근데 blurDataURL을 사용해서 어떻게 블러처리를 했을 까 의문이 생겼다. 🤔

왜 blurDataURL에서 base64 인코딩을 사용했는지, base64 인코딩 과정이 어떻게 되는지 알아보자! 🚀

Next.js blurDatURL

const base64 = 'data:image/jpeg;base64,'
const blurImg = 'base64로 인코딩되서 ASCII 문자열로만 이루어진 이미지 데이터'
 
<Image
  src="/jump.webp"
  width={850}
  height={300}
  alt="점프하는 공룡"
  placeholder="blur" //추가
  blurDataURL={base64 + blurImg} // 추가
/>

Next.js에서 ‘blurDataURL’이란?

이미지의 데이터 URL에서 이미지의 미리보기(프리로딩)용으로 작은 해상도의 이미지를 렌더링하는 기능을 제공한다. 작은 해상도의 이미지는 초기 페이지 로드 시 빠르게 표시되고 실제 이미지가 로드될 때 원본 이미지로 대체된다.

base64 인코딩을 사용하는 이유?

Base64는 이진 데이터를 ASCII 문자로 변환하는 인코딩 체계 중 하나로, Base64 인코딩은 이진 데이터를 ASCII 문자로 변환하는 방법이다.

이미지를 base64로 인코딩하면 인코딩 결과인 문자열이 이미지 데이터 자체이므로 이미지를 가져오기 위해 별도의 데이터 통신을 하지 않아도 된다. 따라서 초기 로드 시 페이지 성능을 향상시켜준다.

또한 이진 데이터를 텍스트로 변환하여 데이터의 안전한 전송과 저장, 다양한 환경에서의 호환성, 그리고 데이터의 무손실 변환을 위한 일반적인 방법 중 하나로 널리 사용된다.

base64 인코딩 과정

예시로 "Hello"라는 문자열을 Base64로 인코딩하는 과정을 살펴보자.

문자열을 이진 데이터로 변환

먼저 문자열 "Hello"를 ASCII 문자로 표현하고 각 문자를 16진수로 변환한다.

H: 01001000
e: 01100101
l: 01101100
l: 01101100
o: 01101111

이진 데이터를 6비트 블록으로 변환

이진 데이터를 6비트 블록으로 나눈다.

010010 000110 010101 101100 110011 000011 011011 110

6비트 블록을 10진수로 변환

각 6비트 블록을 10진수로 변환한다.

18, 6, 21, 44, 51, 3, 27, 62

Base64 문자 집합 사용

각 10진수 값을 Base64 문자 집합에 따라 문자로 변환한다.

S: 18
G: 6
V: 21
s: 44
z: 51
D: 3
b: 27
+: 62

패딩 추가

데이터가 3바이트로 나누어 떨어지지 않는 경우, 패딩 문자 '='를 추가하여 데이터 길이를 4의 배수로 맞춘다. "Hello"는 5바이트이므로, 하나의 패딩 문자를 추가한다.

SGVsbG8=

Base64 문자열 생성

위의 과정을 통해 생성된 Base64 문자들을 연결하여 최종 Base64 인코딩된 문자열을 얻는다. "Hello" 문자열은 "SGVsbG8="로 Base64로 인코딩된다.

base64 인코딩 도구

window 객체 메서드인 btoa()나 atob()를 사용해 인코딩, 디코딩 할 수도 있다.

const a = btoa("bear"); // 'YmVhcg=='
const b = atob("YmVhcg=="); // 'bear'