이미지 → Base64 변환

이미지를 Base64 Data URI로 인코딩

이미지를 넣으면 Base64 Data URI와 함께 HTML <img>, CSS background-image, Markdown 스니펫을 바로 복사할 수 있게 만들어 줍니다. 인코딩이 브라우저에서 이뤄져 이미지가 업로드되지 않습니다.

Data URI는 언제 쓰나요?

작은 아이콘이나 로고를 Data URI로 인라인하면 네트워크 요청을 하나 줄여 첫 렌더링을 빠르게 할 수 있습니다. 다만 큰 이미지는 문자열이 매우 길어져 HTML·CSS를 비대하게 만드므로 아이콘·소형 그래픽에만 쓰는 것이 좋습니다.

데이터 URI는 원본 파일보다 큽니다

Base64는 3바이트를 4글자로 적으므로, data:image/png;base64, 접두사를 세기 전에 이미 약 33% 커집니다. 그게 거래 조건입니다. HTTP 요청 하나를 아끼는 대신, 따로 캐시할 수 없고 지연 로딩도 안 되며 그것을 품은 문서가 바뀔 때마다 통째로 다시 내려받아야 하는 문자열을 얻습니다. 200바이트 아이콘이라면 남는 거래이고, 사진이라면 손해입니다. 실무에서 갈리는 지점은 대략 2킬로바이트 언저리입니다.

제값을 하는 자리

작고 변하지 않으며 반드시 떠야 하는 자산입니다. CSS background-image 안의 인라인 SVG 아이콘, 원격 이미지가 기본 차단되는 HTML 메일의 로고, 단일 파일 페이지의 파비콘, 서버 없이 USB에서 열려야 하는 문서의 대체 이미지 같은 것들이죠. 두 번째 요청이 없으니 CORS도 통째로 비켜갑니다. 두 가지만 주의하세요. 엄격한 Content-Security-Policy에서는 img-src data:가 있어야 렌더링되고, 일부 오래된 메일 클라이언트는 한 줄 길이에 상한이 있어 아주 긴 URI가 깨진 채 도착할 수 있습니다.