이미지 → Base64 인코더이란?
Image to Base64 Encoder는 이미지 파일(PNG, JPEG, GIF, SVG, WebP)을 Base64로 인코딩된 텍스트 문자열로 변환합니다. 별도의 파일 호스팅 없이 HTML, CSS, JSON에 이미지를 직접 삽입할 수 있어 HTTP 요청이 줄고 마크업이 간결해집니다.
인코더는 이미지 바이트를 기기에서 읽어 여덟 가지 출력을 만듭니다: 원시 Base64, src= 속성용 data URI, 완전한 <img> 태그, CSS background-image 선언, HTML favicon 링크, XML 래퍼, Image를 쓰는 JavaScript 스니펫, 그리고 파일명·MIME 유형·크기·data URI를 묶은 JSON 객체입니다. 최적화를 켜면 가장 긴 변을 축소하고 먼저 JPEG 또는 WebP로 다시 인코딩해, 인라인하기 전에 문자열을 절반으로 줄일 수도 있습니다. 여러 이미지를 한 번에 드롭하거나 붙여넣으면 각각 라벨이 붙은 출력을 받습니다. 반대로 해야 하나요? "Base64를 다시 이미지로 디코딩" 섹션은 어떤 문자열이든 볼 수 있고 다운로드할 수 있는 그림으로 바꿉니다. 지원 형식: PNG, JPEG, GIF, SVG, WebP, BMP, ICO, AVIF, HEIC 각 최대 20MB.
사용 방법
- 1단계 — 이미지를 끌어다 놓거나 업로드 영역을 클릭하거나 Ctrl+V로 붙여넣어 업로드합니다. 먼저 줄이려면 인코딩 옵션을 열어 최대 크기나 품질을 설정하세요.
- 2단계 — 출력 형식을 선택합니다: 원시 Base64, data URI, HTML img 태그, CSS background-image, HTML favicon 링크, XML, Image를 쓰는 JavaScript 스니펫, 또는 API 페이로드용 JSON 객체.
- 3단계 — 결과를 클립보드에 복사하거나 텍스트 파일로 다운로드합니다.
사용 시기
- HTML 메일에 작은 로고나 아이콘을 박아 외부 호스팅 없이도 보이게 할 때.
- 작은 SVG 스프라이트를 스타일시트에 인라인으로 넣어 렌더링을 막는 HTTP 요청 하나를 줄일 때.
- URL을 쓸 수 없는 JSON 페이로드, JWT 클레임, YAML 설정에 이미지를 문자열로 담아 보낼 때.
결과
이메일 템플릿에 직접 삽입하려는 2KB 로고 아이콘이 있습니다. PNG 파일을 업로드하고, 데이터 URI 출력을 복사한 후 HTML img 태그의 src 속성에 붙여 넣으세요. 외부 호스팅이 전혀 필요 없습니다.
자주 묻는 질문
- Base64로 인코딩하면 파일이 커지나요?
- 네, 약 33% 정도 커집니다. Base64는 3바이트를 ASCII 4글자로 표현하기 때문에 30 KB짜리 PNG는 약 40 KB 텍스트가 됩니다. HTTP 요청을 절약할 수 있는 5 KB 미만 파일에서만 이득이 됩니다.
- 이미지를 Base64로 인라인하는 것과 링크로 두는 것은 어떻게 구분하나요?
- 첫 화면에 등장하고 캐싱이 어려운 자원(사용자별 아바타, 한 번만 쓰는 아이콘) 중 4~5 KB 이하라면 인라인이 낫습니다. 여러 페이지에서 반복 사용되는 이미지는 링크로 두어 두 번째부터는 브라우저 캐시가 처리하게 둡니다.
- data URI는 왜 data:image/png;base64, 로 시작하나요?
- 이 접두어는 미디어 타입입니다. data:image/png 는 이어지는 바이트가 PNG임을 알리고, base64 는 인코딩 방식을, 쉼표는 헤더와 본문을 구분합니다. 이 부분이 없으면 디코더가 형식을 알 수 없습니다.
- Base64를 다시 이미지로 디코딩해 볼 수 있나요?
- 가능합니다. 이 페이지의 ‘Base64를 이미지로 디코딩’ 섹션을 열고 data URI나 순수 Base64를 붙여 넣으면 이미지가 미리 보이고 내려받을 수 있습니다. URL 안전 Base64(- 와 _ 를 쓰는 형식)도 지원합니다.
- SVG 파일을 Base64로 인코딩할 가치가 있나요?
- 대개 없습니다. SVG는 이미 텍스트이므로 data URI 안에서 URL 인코딩만 해도 Base64보다 짧습니다. 도구는 SVG도 지원하지만, 전송용 단일 문자열이 필요한 경우에만 쓰는 편이 좋습니다.