이미지를 Base64로

모든 이미지를 Data URI로 변환. 바로 붙여넣을 수 있는 HTML·CSS 스니펫 제공.

이미지를 여기에 끌어다 놓기
또는 클릭해서 파일 선택 — 클립보드 붙여넣기도 가능

Base64 Data URI는 이미지를 텍스트 형태로 코드에 직접 넣어 HTTP 요청 한 번을 없애 줍니다. CSS, HTML 메일, 단일 파일 데모에서 작은 아이콘·로고·플레이스홀더 그래픽에 널리 쓰이는 기법입니다.

이미지를 놓으면 Data URI가 즉시 생성됩니다 — 버튼 클릭이 필요 없습니다. 원본 Base64 문자열 외에 HTML <img> 태그와 CSS background-image 속성의 완성된 스니펫, 그리고 Base64가 바이너리보다 약 33% 커진다는 점을 보여 주는 용량 비교까지 제공됩니다.

인코딩은 순수 텍스트 변환이라 기기에서 밀리초 만에 끝납니다. 아이콘, 아바타, 스크린샷 모두 서버와는 아무 관계가 없습니다.

사용 방법

  1. 이미지를 놓거나 붙여넣습니다 (복사 편의상 한 장씩이 좋습니다).
  2. Data URI를 복사하거나 만들어진 HTML·CSS 스니펫을 가져갑니다.
  3. 코드에 붙여넣으면 끝. 호스팅이 필요 없습니다.

이 도구를 쓰는 이유

자주 묻는 질문

Base64 이미지는 언제 쓰면 좋나요?
대략 5~10 KB 이하의 작은 에셋: 작은 아이콘, 불릿, 간단한 로고 등. 이 크기에서는 아낀 HTTP 요청이 33% 용량 증가를 상쇄합니다. 사진이나 그보다 큰 이미지는 제대로 압축한 파일로 서빙하는 게 좋습니다. Base64는 용량을 부풀리고 캐시도 망칩니다.
Base64 버전이 원본보다 왜 커지나요?
Base64는 3바이트 바이너리를 4개의 텍스트 문자로 인코딩해 약 33% 늘어납니다. 서버의 Gzip 압축으로 일부는 회수되지만, 인코딩된 형태가 여전히 원본 바이트보다 큽니다.
이메일에서 Base64 이미지가 동작하나요?
지원이 들쭉날쭉합니다. 보안상의 이유로 많은 데스크톱 메일 클라이언트와 웹메일이 Data URI를 제거하거나 차단합니다. 마케팅 메일에서는 이미지를 평소처럼 호스팅하세요.
크기 제한이 있나요?
기술적으로는 없지만 수 MB짜리 문자열을 textarea에 넣으면 브라우저와 편집기가 느려집니다. 아이콘과 중형 그래픽은 문제없고, 아주 큰 사진은 파일 참조가 낫습니다.