Base64로 바꾸면 파일 크기가 커지는 이유

Base64는 이미지 압축 기술이 아니라 바이너리 데이터를 문자로 표현하는 인코딩입니다. 3바이트 데이터를 4개의 문자로 바꾸기 때문에 본문만 비교해도 원본보다 대략 4분의 1이 아니라 3분의 1 정도 커집니다.

3바이트가 4문자가 되는 구조

바이너리 3바이트는 24비트입니다. Base64는 이를 6비트씩 네 묶음으로 나누고 각 값을 안전하게 전달할 수 있는 문자로 바꿉니다. 결과적으로 원본 3바이트마다 문자 4개가 필요합니다.

원본 길이가 3의 배수가 아니면 끝에 패딩 문자가 붙을 수 있고, Data URI로 사용하면 MIME 형식과 base64 표시 문자열도 추가됩니다.

아주 작은 아이콘을 HTML이나 CSS에 직접 넣으면 별도 파일 요청을 관리하지 않아도 됩니다. 한 파일로 전달해야 하는 프로토타입이나 이메일 템플릿에서도 편리할 수 있습니다.

하지만 큰 사진을 Base64로 넣으면 HTML과 CSS가 비대해지고 같은 이미지를 브라우저 캐시로 분리하기 어려워질 수 있습니다.

문자열이 길고 알아보기 어렵더라도 누구나 다시 원본 데이터로 디코딩할 수 있습니다. 비밀번호, 신분증 이미지나 비밀키를 숨기는 용도로 사용하면 안 됩니다.

YAL에서는 이미지와 Data URI를 양방향 변환하고 HTML img와 CSS background 예제를 만들 수 있습니다. 변환 전후 크기 차이를 확인해 실제 코드에 포함할지 결정하세요.