이미지 Base64 변환 도구
이미지와 Base64 인코딩을 상호 변환하며, 드래그 앤 드롭 업로드와 실시간 미리보기를 지원합니다
이미지를 여기에 드래그하거나 클릭하여 파일을 선택하세요
JPG, PNG, GIF, WebP, SVG 등 형식을 지원합니다
Base64 이미지 인코딩이란?
이미지 Base64 도구는 이미지 파일을 Base64 문자열이나 Data URL로 바꾸고, 다시 그 문자열을 이미지로 확인할 수 있게 해 주는 도구입니다. 작은 아이콘, 자리표시자, 이메일 템플릿, CSS 배경, API 테스트, 별도 파일을 붙이기 어려운 데모에서 유용합니다. Base64는 압축 방식이 아니므로 보통 전송 크기가 커지고, 큰 사진이나 반복 사용되는 자산에 적용하면 캐시 효율도 떨어질 수 있습니다. 이 도구는 빠른 변환과 디버깅에 적합하며, 실제 서비스에서는 임베드 데이터, CDN 파일, 일반 이미지 URL 중 무엇이 맞는지 함께 판단해야 합니다.
사용 방법
사용 방법
- 이미지를 드래그하거나 클릭해 업로드하면 형식과 크기를 자동으로 감지합니다.
- 출력 형식을 선택하세요. Data URL(코드에 바로 사용) 또는 순수 Base64
- 복사 버튼을 눌러 인코딩 결과를 필요한 곳에 붙여넣으세요
- 역변환을 하려면 Base64 문자열을 붙여넣고 변환 버튼을 눌러 이미지를 다운로드하세요
Base64 → 이미지
- 입력 상자에 Data URL 또는 원시 Base64 문자열을 붙여넣은 뒤 변환하면 디코딩된 이미지를 미리 본 후 다운로드할 수 있습니다.
- 디코딩이 실패하면 Base64 텍스트가 완전한지, data:image/... 접두사가 올바른 형식인지 확인하세요.
이미지 → Base64
- HTML이나 CSS에 직접 삽입할 때는 Data URL을, 다른 시스템에서 MIME 유형을 별도로 저장하는 경우 순수 Base64를 선택하세요.
- Base64 이미지는 작게 유지하세요. 크기가 커지면 텍스트 용량이 약 3분의 1 늘어나 HTML, CSS, JSON 페이로드 관리가 어려워질 수 있습니다.
활용 사례
기술 원리
Base64로 인코딩된 이미지는 RFC 2397에 정의된 Data URI입니다. 스킴 접두사 data:, MIME 유형(예: image/png), 리터럴 ;base64, 그리고 64개 문자(A-Z, a-z, 0-9, +, /)로 구성된 페이로드에 종단 패딩 문자 =가 결합된 구조입니다. 인코딩 시 바이너리 스트림을 3바이트씩 읽어 4개 문자를 출력하므로 페이로드는 고정 비율 4/3(약 33%)만큼 커지고, 바이트 수가 3의 배수가 아닐 때 패딩 문자 1~2개가 추가됩니다. 브라우저에서 인코딩은 FileReader.readAsDataURL로 시작하며, 동일한 파이프라인을 통해 파일을 처리한 뒤 <img src>나 CSS background-image url()에 바로 사용할 수 있는 완전한 data: URL을 반환합니다. 문자열 전용 btoa와 atob 프리미티브는 이미 바이너리인 페이로드에서만 동작합니다(latin-1 전용이므로 바이너리 바이트는 Uint8Array로 변환해야 합니다). 다시 볼 수 있는 이미지로 디코딩하려면 atob를 Uint8Array로 변환한 뒤, 원래 MIME 유형의 Blob으로 만들고, URL.createObjectURL 핸들을 일반적인 HTTP 접근 가능 에셋으로 사용합니다. 실제 트레이드오프는 대역폭이 아니라 캐싱입니다. HTML, CSS, JSON이 나타나는 모든 곳에 페이로드가 복제되므로 에셋을 별도로 캐시할 수 없고, 고유한 ETag를 가질 수 없으며, 부모 문서가 다시 다운로드될 때마다 함께 다시 다운로드됩니다. 엄격한 Content-Security-Policy 규칙은 img-src나 style-src에 'data:'가 명시적으로 나열되지 않으면 data: URI를 차단합니다. HTTP/2 멀티플렉싱이 도입된 이후 작은 아이콘을 인라인하는 것이 별도 요청보다 거의 이점이 없으므로, 현대적인 규칙은 약 2KB 이하만 인라인하고 히어로 이미지와 재사용 가능한 스프라이트는 캐시 가능한 파일로 유지하는 것입니다.
- Data URI 스킴: RFC 2397 형식 data:[<mime>][;base64],<payload>; 쉼표는 필수이며 가장 흔한 복사-붙여넣기 실수 원인입니다.
- 인코딩 오버헤드: 바이너리 3바이트가 ASCII 문자 4개가 되므로 페이로드가 4/3배(~33%) 커지고, '=' 패딩 문자가 최대 2개 추가됩니다.
- 브라우저 API: 파일에는 FileReader.readAsDataURL, 이미 텍스트인 페이로드에는 btoa/atob(latin-1 전용이므로 바이너리는 Uint8Array 브릿지 필요).
- 디코딩 경로: atob → Uint8Array → new Blob([buf], {type}) → URL.createObjectURL로 고정된 문자열 대신 일반적인 접근 가능 에셋 URL을 제공합니다.
- CSP 주의사항: 엄격한 img-src 또는 default-src 정책에서는 data: 키워드가 명시적으로 나열되지 않으면 차단되며, 이는 프로덕션에서 인라인 이미지를 무작위로 깨뜨립니다.
- 캐싱 트레이드오프: 인라인 데이터는 독립적인 ETag나 캐시 항목이 없으므로 HTTP/2 멀티플렉싱은 보통 ~2KB 이상에서 인라인보다 유리합니다.
예시
HTML에서 사용
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="1x1 투명 픽셀" width="16" height="16" />CSS에서 사용
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}JSON API로 전송
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// 참고: Base64는 페이로드를 약 33% 늘리므로, 100KB 이상의 파일은 multipart/form-data 사용을 권장합니다.자주 묻는 질문
이미지가 업로드되나요?
아니요. 이미지는 FileReader API로 읽혀 브라우저 안에서 Base64로 인코딩됩니다. 데이터는 기기 외부로 전송되지 않으며, 변환 중 Network 탭에서 직접 확인할 수 있습니다.
Base64 문자열이 원본 파일보다 약 33% 더 긴 이유는 뭔가요?
Base64는 입력 3바이트를 4개의 ASCII 문자로 표현하므로 인코딩 후 크기는 ceil(file_size / 3) * 4입니다. 약 33%의 오버헤드가 발생하며, 이는 바이너리를 출력 가능한 텍스트로 표현하기 위한 비용입니다.
결과를 HTML이나 CSS에서 어떻게 사용하나요?
데이터 URI를 사용하세요. HTML에서는 <img src="data:image/png;base64,...">, CSS에서는 background-image: url(data:image/png;base64,...) 형태로 작성합니다. 페이지는 완성된 data: URI를 자동 생성합니다. 작은 인라인 자산에는 유용하지만, HTML/CSS 파일 크기를 키우고 브라우저 이미지 캐시도 우회하게 됩니다.
인라인과 별도 파일 링크의 기준 크기는 어떻게 되나요?
약 5KB 미만이면 인라인이 보통 유리합니다(HTTP 요청을 절약). 그 이상이면 캐싱을 위해 별도 자산으로 두는 게 낫고, 약 50KB 이상이면 인라인이 HTML을 크게 부풀립니다. 빌드 도구마다 기준이 다르며 webpack의 기본값은 8KB입니다.
Base64 문자열을 다시 이미지로 디코딩할 수 있나요?
네. data: URI 또는 image/* MIME 타입의 원본 Base64를 붙여 넣으면 페이지가 이미지를 복원하고 다운로드를 제공합니다. 소스 코드에서 인라인된 이미지를 발견했을 때 원본 파일을 추출하는 데 유용합니다.
SVG와 애니메이션 GIF도 지원되나요?
네. SVG는 직접 인코딩하거나 URL 인코딩 텍스트로 변환할 수 있는데, SVG-XML의 경우 후자가 Base64보다 짧습니다. 애니메이션 GIF는 단일 Base64 문자열로 인코딩되며 결과물도 그대로 움직입니다. WebP, AVIF 등 최신 포맷도 동일하게 동작합니다.
이메일에 보낼 큰 사진을 Base64로 인코딩해야 하나요?
이메일 자체가 첨부 파일을 MIME 방식으로 Base64 인코딩하므로 미리 인코딩할 필요가 없습니다. Base64 문자열을 본문에 붙여 넣으면 메일 크기만 커지고 대부분 클라이언트에서 깨져 보입니다. 일반 첨부 방식으로 보내세요.