이미지 Base64 변환기

이미지 Base64 변환의 원리

Base64는 이미지 파일의 바이트를 64개 문자로 이루어진 일반 텍스트로 바꿉니다. 3바이트가 4문자가 되므로 텍스트는 원본 파일보다 약 33% 커집니다. data URI는 여기에 data:image/png;base64,처럼 MIME 유형을 담은 짧은 접두사를 붙입니다. 덕분에 브라우저는 이미지 URL이 들어갈 자리라면 어디서든 이 텍스트를 이미지로 표시할 수 있습니다.

이미지는 브라우저에서 로컬로 읽고 인코딩합니다. 업로드되지 않으므로 비공개 스크린샷이나 공개 전 디자인도 기기 밖으로 나가지 않습니다.

어떤 출력을 복사해야 할까

• Data URI: URL을 받는 src 속성, JavaScript, JSON 필드에 사용합니다.
• 순수 Base64: 인코딩된 바이트만 받는 API에 사용합니다. 이런 API는 보통 MIME 유형이나 파일 이름을 별도 필드로 받습니다.
• HTML img 태그: 페이지나 템플릿에 바로 붙여넣을 수 있습니다.
• CSS background-image: 스타일시트의 아이콘과 장식 요소에 사용합니다.
• Markdown: 문서와 메모에 사용합니다. GitHub를 비롯한 일부 렌더러는 data URI 이미지를 표시하지 않습니다.

지원 형식 한눈에 보기

Base64 문자열의 첫 몇 글자는 파일 형식 시그니처를 인코딩한 것이므로, 이 부분만 봐도 파일 형식을 알 수 있습니다.

이미지를 인라인으로 넣으면 좋은 경우

data URI를 사용하면 네트워크 요청이 하나 줄고, 파일 하나로 모든 것이 완결됩니다. 그래서 몇 킬로바이트 정도의 작은 아이콘과 로고, 단일 파일 HTML 보고서, 작고 흐릿한 플레이스홀더, JSON에 담아 보내는 이미지에 잘 맞습니다. 반면 큰 사진에는 적합하지 않습니다. 크기가 3분의 1 늘어나고, 브라우저가 이미지를 따로 캐시할 수 없으며, 화면에 무엇이든 그리기 전에 받아야 하는 HTML이나 CSS 파일이 무거워집니다. 대개 요청 하나를 줄여 얻는 이득보다 이런 손해가 더 큽니다. 사이트에서 Content-Security-Policy를 보낸다면 인라인 이미지를 위해 img-src에 data:도 허용해야 합니다.