Base64 이미지: 편리한 함정인가 유용한 도구인가?
Base64 문자열로 이미지를 임베딩하는 게 편리해 보여. 언제 도움이 되고 언제 해가 되는지 알려줄게.
HTML이나 CSS에 이미지를 직접 임베드할 수 있어. 별도 파일 없이. 추가 HTTP 요청도 없이.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
편리해. 하지만 즉시 명확하지 않은 비용이 따라와.
어떻게 작동해
Base64는 바이너리 데이터를 ASCII 텍스트로 인코딩해. 어떤 이미지든 복사 붙여넣기 할 수 있는 문자열이 돼.
문자열은 원본 파일보다 약 33% 커. 30KB 이미지가 40KB 문자열이 돼.
Base64가 도움이 될 때
작은 아이콘. 200바이트 아이콘을 Base64로 하면 HTTP 요청을 절약해. HTTP/2가 이걸 덜 중요하게 만들었지만 아주 작은 이미지엔 여전히 유효해.
이메일 HTML. 이메일 클라이언트는 외부 이미지를 차단해. 임베디드 이미지는 "이미지 로드" 프롬프트 없이 표시돼.
단일 파일 배포. 오프라인에서 작동하는 HTML 공유. 하나의 파일에 모든 게 들어있어.
CSS의 Data URI. 스타일시트에 임베디드된 배경 이미지. 더 큰 CSS 파일을 대가로 HTTP 요청 감소.
Base64가 해로울 때
큰 이미지. 33% 크기 증가가 누적돼. 100KB 이미지가 133KB 텍스트가 돼.
캐싱. 외부 이미지는 따로 캐시돼. Base64 이미지는 HTML/CSS의 일부야—페이지가 바뀌면 전체가 다시 로드돼.
파싱 시간. 브라우저는 렌더링 전에 Base64를 디코딩해야 해. 바이너리 파일을 직접 로드하는 것보다 처리가 더 많아.
유지보수. 임베디드 이미지를 업데이트하려면 코드를 편집해야 해. 외부 파일을 업데이트하는 게 더 간단해.
HTTP/2 요소
HTTP/1.1은 비싼 연결 오버헤드가 있었어. 작은 이미지 여러 개는 느린 요청 여러 개를 의미했어.
HTTP/2는 요청을 효율적으로 다중화해. "HTTP 요청 절약" 논리는 이제 약해졌어.
서버가 HTTP/2를 지원하면 (대부분 지원해), 외부 이미지가 보통 더 나아.
실전 가이드라인
1KB 미만: Base64 고려해. 오버헤드가 미미해.
1-10KB: 케이스별로 평가. 중요한 아이콘은 이득일 수 있고, 장식 이미지는 아마 아닐 거야.
10KB 이상: 외부 파일 써. 크기 페널티가 가치가 없어.
자주 업데이트: 외부 파일. 이미지 업데이트로 코드 변경 피해.
페이지 간 공유: 외부 파일. 캐싱이 여러 페이지 로드에 이득.
성능 테스트
추측하지 마. 테스트해.
Base64 임베딩 있고 없고의 총 페이지 무게를 비교해. 실제 로드 시간을 측정해.
"올바른" 답은 네 특정 상황에 달렸어—이미지 크기, 캐싱 전략, HTTP 버전, 업데이트 빈도.
대안
스프라이트 시트. 작은 아이콘을 하나의 이미지로 결합하고, CSS로 부분 표시. 하나의 요청, 정상 캐싱.
아이콘 폰트. 벡터 아이콘을 폰트로. CSS로 스케일 가능하고 스타일링 가능.
인라인 SVG. 벡터 그래픽은 인라인 SVG가 Base64 PNG보다 유연성이 더 커.
Base64 이미지는 파일 크기를 편의성과 맞바꿔. 그 트레이드오프는 아주 작은 이미지나 이메일 같은 특별한 경우에만 의미 있어. 대부분의 웹 사용에선 외부 파일이 성능이 더 나아.