Base64 Encoding Images: When It Helps and When It Hurts Performance

Context

이미지를 외부 파일로 참조할 때 HTTP 요청의 오버헤드(DNS 조회, TCP 연결, TLS 핸드셰이크, 요청/응답)가 발생한다. 동시에 Base64 인코딩은 원본 바이너리 데이터를 33% 크기 증가(4/3 비율)의 대가로 ASCII 텍스트로 변환하여 HTML, CSS, JSON에 직접 삽입할 수 있게 한다.

Technical Solution

• Base64 인코딩 메커니즘: 3바이트 입력을 4개의 Base64 문자로 매핑(64개 알파벳: A-Z, a-z, 0-9, +, /)
• 인라인 효과 발생 기준: 1 KB 아이콘의 경우 HTTP 요청 오버헤드(약 200ms)가 33% 크기 증가보다 비용이 크므로 Base64 인라인이 더 빠름
• 외부 참조 효과 발생 기준: 50 KB 이미지의 경우 67 KB로 증가한 인라인 데이터는 캐싱되지 않아 매 페이지 로드마다 재다운로드되므로 외부 파일이 유리
• HTTP/2 멀티플렉싱 영향: 연결 재사용으로 요청당 오버헤드가 감소하여 임계점이 1-2 KB로 하향 이동
• 크로스오버 포인트: 일반적으로 2-5 KB 범위에서 외부 참조와 Base64 인라인의 성능이 동등하며, HTTP/2 설정에 따라 변동
• 브라우저 인코딩 방식: FileReader API와 readAsDataURL()로 클라이언트에서 Blob을 data URI로 변환 가능
• Node.js 인코딩 방식: fs.readFileSync()로 파일을 읽고 toString('base64')로 Base64 문자열 생성

Impact

• 1 KB 아이콘: Base64 인라인이 외부 참조 대비 약 200ms의 HTTP 오버헤드 제거
• 50 KB 이미지: 외부 참조 시 50 KB 캐싱 vs 인라인 시 67 KB 매 로드 재다운로드
• 10개의 3 KB 이미지 인라인: HTML 페이로드에 40 KB 추가 vs 별도 파일 30 KB + 병렬 로드 + 독립 캐싱

Key Takeaway

Base64 이미지 인라인 처리는 2-5 KB 이하의 아이콘, CSS 배경 이미지, 이메일 템플릿 로고 같은 소형 자산에 최적화되며, 5 KB 이상 대형 이미지나 다중 사용 사례에서는 외부 파일 캐싱의 반복 방문 성능 이득이 초기 HTTP 오버헤드 절감을 상쇄한다.