이미지 데이터 URI·Base64 변환기

이 도구에 대하여

데이터 URI란

데이터 URI는 data:image/png;base64,iVBORw0KGgo…처럼 주소 자체에 파일을 담습니다. data: 다음에 미디어 타입이 오고, 그다음에 내용의 인코딩 방식을 나타내는 ;base64 표시가 선택적으로 오며, 쉼표 뒤에 내용이 옵니다. HTML의 src나 CSS의 url()처럼 브라우저가 이미지 URL을 받는 곳이라면 어디서든 데이터 URI를 쓸 수 있고, 추가 요청 없이 이미지가 표시됩니다. 이 형식은 RFC 2397에 정의되어 있습니다.

인라인 이미지의 비용

Base64는 3바이트를 4개의 문자로 표현하므로, 인코딩된 이미지는 원래 파일보다 약 33% 커집니다. 또한 인라인 이미지는 이를 포함한 문서에 묶이기 때문에 브라우저가 따로 캐시할 수 없고, 같은 이미지를 반복해서 포함하는 페이지나 스타일시트마다 다시 전송됩니다.

따라서 데이터 URI는 1~2KB 정도의 아이콘이나 플레이스홀더처럼 작은 이미지 몇 개에는 적합하지만, 사진에는 적합하지 않습니다. 이 도구는 결과가 약 10KB를 넘으면 경고를 표시합니다.

SVG에는 Base64가 필요 없습니다

SVG 파일은 텍스트이므로 data:image/svg+xml;charset=utf-8,…처럼 텍스트 그대로 데이터 URI에 넣을 수 있습니다. 퍼센트 인코딩해야 하는 문자는 일부뿐으로, URL이나 이를 감싼 따옴표를 끝내 버리는 문자와 URL에 그대로 넣을 수 없는 문자입니다. 색상 값에 흔히 쓰이는 #을 이스케이프하지 않으면 URL 프래그먼트가 시작되어 이미지가 중간에서 잘립니다. 이 도구는 %, #, <, >, ", &, 백슬래시, 공백 문자, 제어 문자를 이스케이프하고, ASCII 범위 밖의 문자는 UTF-8 이스케이프로 씁니다. 결과를 디코딩하면 원래와 같은 SVG 텍스트가 나옵니다. 텍스트 형식은 파일이 유효한 UTF-8일 때 제공됩니다.

URL 인코딩 형식은 사람이 읽을 수 있는 상태로 남고, 여전히 일반 텍스트이기 때문에 보통 Base64보다 gzip과 Brotli로 더 잘 압축됩니다. 압축 전에 어느 형식이 더 짧은지는 파일에 따라 다르므로, 이 도구는 두 크기를 모두 보여 줍니다.

실행 방식

이미지는 브라우저가 읽고, 사용자의 기기에서 JavaScript로 인코딩합니다. 반대 방향도 마찬가지로, 붙여 넣은 데이터 URI를 페이지에서 디코딩해 파일로 제공합니다. 이미지와 데이터 URI 모두 업로드되지 않습니다.