이미지 Base64 변환기

코드에 붙여넣을 수 있는 Base64 문자열로 이미지를 바꾸세요.

브라우저에서 실행됩니다. 파일이 기기 밖으로 나가지 않습니다.

이미지를 Base64로 변환하는 방법

  1. 여기에 이미지를 끌어다 놓거나 '파일 선택'을 탭하세요.
  2. 데이터 URL, Base64 원본, 또는 바로 쓸 수 있는 CSS나 HTML 코드를 복사하세요.
  3. 코드에 붙여넣으세요.

인코딩 원리

Base64는 이미지의 3바이트마다 텍스트 4글자로 바꾸며, RFC 4648의 표준 알파벳인 A~Z, a~z, 0~9, 더하기(+), 슬래시(/)까지 64개 문자를 사용합니다.

데이터 URL은 이 텍스트 앞에 data:image/png;base64, 같은 짧은 접두사를 붙인 것으로, 별도 파일 없이도 브라우저나 앱이 무엇인지 바로 알아볼 수 있게 해줍니다.

원본 파일Base64 텍스트(약 37% 증가)
5KB 아이콘약 6.9KB
20KB 로고약 27KB
100KB 사진약 137KB

이런 오버헤드 때문에 데이터 URL은 사진 전체보다 작은 그래픽에 가장 잘 맞습니다.

데이터 URL이 쓰이는 곳

  • CSS의 background-image 안에서, 작은 아이콘이 별도 요청 없이 스타일시트와 함께 로드되도록 합니다.
  • HTML의 img src 속성이나 인라인 SVG 마크업 안에서.
  • 이미지를 텍스트로 저장하는 JSON API 응답과 데이터베이스 필드.
  • 일부 이메일 클라이언트가 링크된 이미지는 막아도 인라인 데이터는 허용하기 때문에 쓰이는 이메일 HTML.

그냥 파일을 쓰는 것이 나을 때

데이터 URL은 그것을 담은 페이지와 별도로 캐시되지 않으므로, 10개 페이지에서 쓰는 사진이라면 한 번이 아니라 열 번 다운로드됩니다. 작은 아이콘보다 큰 이미지라면 브라우저 캐싱이 되는 일반 이미지 파일이 더 빠르게 로드됩니다.

이미지→Base64 자주 묻는 질문

Base64 데이터 URL이 무엇인가요?

이미지의 바이트를 텍스트로 표현한 것으로, 별도의 파일 없이도 HTML, CSS, JSON에 이미지를 그대로 붙여넣을 수 있습니다.

Base64로 변환하면 파일이 더 커지나요?

네, 약 37% 커집니다. 인코딩 과정에서 이미지의 3바이트마다 텍스트 4글자로 바뀌기 때문입니다.

파일 대신 데이터 URL을 언제 사용해야 하나요?

페이지 용량보다 네트워크 요청을 줄이는 것이 더 중요한 작은 아이콘이나 단순한 그래픽에 사용하세요. 사진에는 일반 이미지 파일을 그대로 쓰는 편이 좋습니다.

이미지가 어딘가에 업로드되나요?

아니요. 인코딩은 브라우저에서 이루어지므로 이미지가 기기 밖으로 나가지 않습니다.

Base64로 변환하면 이미지 화질이 달라지나요?

아니요. 픽셀 데이터는 그대로 두고 텍스트로만 다시 표현하므로, 디코딩하면 원본과 완전히 같은 바이트를 얻습니다.

데이터 URL의 최대 크기 제한이 있나요?

브라우저가 정해놓은 엄격한 제한은 없지만, 긴 데이터 URL은 따로 캐시할 수 없고 파싱 속도도 느려지므로 작은 아이콘이나 그래픽에만 사용하세요.

모든 브라우저가 데이터 URL을 지원하나요?

네. 데이터 URL은 인터넷 익스플로러 8부터 모든 주요 브라우저에서 작동했으며, 현재의 모든 모바일 브라우저도 포함됩니다.

파비콘에도 사용할 수 있나요?

작은 파비콘은 HTML head 안에 데이터 URL로 바로 넣을 수 있지만, 일반적인 favicon.ico 파일과 PNG 크기별 세트를 함께 쓰는 방식이 여전히 더 흔합니다.

관련 도구