Base64 이미지와 data URL: 쓸 때와 피할 때
data URL은 작은 파일에 유용하지만 크기, 캐시, 성능 비용이 있습니다.
원리
data URL은 작은 파일을 URL 문자열 안에 넣습니다. 이미지는 보통 data:image/png;base64, 형태로 시작합니다.
좋은 용도
아주 작은 아이콘, 테스트, 간단한 이메일 이미지, 생성 미리보기에 적합합니다.
비용
Base64는 3바이트를 4글자로 만듭니다. HTML 또는 CSS가 커지고 브라우저는 먼저 그 파일을 읽어야 합니다.
제한
MDN은 길이 제한과 보안 규칙을 설명합니다. 최신 브라우저는 피싱 위험 때문에 data: URL 최상위 이동을 차단합니다.
실무 규칙
소스에 붙여도 읽기 쉬운 작은 파일만 인라인 처리하세요. 일반 이미지와 업로드는 별도 파일로 둡니다.