Base64 이미지 인코더 & 디코더: 데이터 URI 변환기

이미지를 문자열로 만들어야 할 때

데이터 URI는 이미지를 참조하는 문서 안에 직접 집어넣습니다. MIME 타입을 앞에 붙인 base64 문자열의 형태로요. 두 번째 요청도, 따로 배포할 파일도, 링크가 깨질 여지도 없습니다. 대신 원본보다 3분의 1쯤 큰 데이터를, 이미지를 따로 캐시할 수 없게 된 문서 안에 지고 가야 합니다.

이 도구는 이미지를 데이터 URI로 바꾸고 그 반대로도 되돌리며, 문자열이 기대한 대로 디코딩되는지 확인할 미리보기를 제공합니다.

이미지 인코딩·디코딩 하는 방법

파일을 끌어다 놓아 인코딩하거나, 문자열을 붙여넣어 반대로 진행하세요.

1. 이미지를 드롭 영역에 끌어다 놓거나 클릭해서 고르세요. 브라우저가 읽을 수 있는 형식이면 됩니다.
2. 결과 옆에 표시되는 파일 크기를 확인하고, 인코딩된 문자열 길이와 견주어 보세요.
3. 데이터 URI를 복사하세요. `data:image/…;base64,` 접두사가 이미 붙어 있어 CSS나 HTML에 바로 붙여넣을 수 있습니다.
4. 반대로 하려면 디코딩으로 전환하고 base64 문자열을 붙여넣으세요.
5. 디코더는 완전한 데이터 URI뿐 아니라 접두사 없는 base64 문자열도 받으며, 접두사가 없으면 PNG로 간주합니다.
6. 결과를 쓰기 전에 미리보기를 확인하세요. 아무것도 보이지 않게 디코딩된다면 대개 문자열이 잘린 것입니다.

심는 것이 이로울 때와 해로울 때

심기는 네트워크 왕복을 없애 주므로 작은 자산에는 이득입니다. 아이콘, 자리표시자, 배경 장식 같은 것들이죠. 대략 1~2킬로바이트 아래라면 피하게 되는 요청 부담이 감수하는 33% 크기 손해를 대체로 웃돕니다.

그 위로 가면 산수가 뒤집히고 두 번째 문제가 나타납니다. 심은 이미지는 그것을 담은 문서와 별개로 캐시될 수 없으므로, 방문할 때마다 다시 내려받고 문서가 바뀔 때마다 함께 무효화됩니다. 스타일시트에 들어간 200KB 사진은 더 이상 쓸모 있게 캐시되지 않는 267KB의 CSS가 됩니다. 별도 리소스가 아니라 문서의 일부로 도착하므로 지연 로딩도 할 수 없습니다.

인코딩 후의 크기

base64가 파일에 하는 일과, 심는 것이 대체로 그럴 만한지입니다.

SVG는 이 표 전체의 예외입니다. 이미 텍스트이기 때문에 base64 대신 URL 인코딩으로 심을 수 있고 33% 손해를 통째로 피합니다. 인라인 SVG 아이콘이 작게 유지되는 이유가 이것입니다.

실무 참고

데이터 URI는 CSS `url()`, HTML `src` 속성, JSON 페이로드에서 폭넓게 지원되지만, 일부 이메일 클라이언트는 차단하고 오래된 도구 중에는 허용 길이에 제한을 두는 것도 있습니다. 이미지가 둘 이상의 문서에서 쓰인다면 링크된 파일이 거의 언제나 낫습니다. 브라우저가 각 문서에 사본을 지고 가는 대신 한 번 받아 캐시하기 때문입니다.

모든 처리는 File API를 써서 브라우저에서 이루어집니다. 이미지는 업로드되지 않으며, 이는 페이지가 한 번 로드되면 오프라인에서도 작동한다는 뜻이고 사적인 이미지가 기기에 머문다는 뜻이기도 합니다. 아주 큰 파일은 크기에 비례해 메모리를 쓰므로, 수 메가바이트 사진은 아무것도 밖으로 나가지 않더라도 사양이 빠듯한 기기에서는 느릴 수 있습니다.