이미지 ↔ Base64 변환기
이미지와 Base64 Data URL 상호 변환 — CSS·HTML 스니펫 포함
로컬 실행
loading…
이 도구에 대해
이미지를 끌어놓거나 선택하거나 붙여넣으면 필요한 모든 형태의 Base64를 얻을 수 있습니다: 바로 쓸 수 있는 Data URL, CSS background-image 선언, 실제 크기가 담긴 완전한 <img> 태그, 그리고 순수 Base64 페이로드까지. 반대 방향도 됩니다 — Data URL이나 맨 Base64 문자열을 붙여넣으면 이미지가 디코딩되어 미리 보이고 파일로 내려받을 수 있습니다.
형식 판별은 확장자나 선언된 MIME 타입이 아니라 매직 바이트로 하므로, .jpg로 이름이 바뀐 PNG(또는 라벨이 틀린 Data URL)도 올바르게 변환됩니다. 크기 패널은 비용에 정직합니다: Base64는 데이터를 약 3분의 1 부풀리며, 인코딩된 정확한 크기가 원본 옆에 표시되어 인라인화가 이득인지 바로 판단할 수 있습니다.
대부분의 이미지-Base64 사이트와 달리 아무것도 업로드되지 않습니다 — 파일은 브라우저의 FileReader API로 읽혀 페이지 안에서 인코딩됩니다. 내부 대시보드 스크린샷이나 미공개 제품 이미지처럼 낯선 서버에 넘기고 싶지 않은 것도 안전합니다.
자주 묻는 질문
- 파일 링크 대신 Base64로 인라인해야 할 때는 언제인가요?
- 이미지가 작고(대략 10 KB 미만), 거의 바뀌지 않으며, 별도 HTTP 요청이 아까울 때입니다 — 아이콘, 이메일 속 로고, 단일 파일 HTML 문서 등. 그보다 크면 별도 파일이 낫습니다: 독립적으로 캐시되고, 병렬로 로드되며, HTML이나 CSS를 33% 부풀리지도 않습니다.
- Base64 버전이 원본보다 3분의 1쯤 큰 이유는 무엇인가요?
- Base64는 바이너리 3바이트를 ASCII 4문자로 표현하므로 구조적으로 +33% 오버헤드가 있습니다(패딩 문자 최대 2개 추가). 서버의 Gzip이나 Brotli가 일부를 만회하지만, 이 팽창은 인코딩 자체에 내재된 것입니다 — 크기를 대가로 바이너리를 텍스트에 담는 능력을 얻습니다.
- 스타일시트나 HTML에서 발견한 Data URL도 디코딩할 수 있나요?
- 네 — "Base64 → 이미지"로 전환한 뒤 data: 접두사까지 통째로 붙여넣으세요. 퍼센트 인코딩된 SVG Data URL(;base64가 없는 형태)도 디코딩되고, 페이로드 속 줄바꿈과 공백은 자동으로 제거됩니다. 결과는 페이지에서 미리 보이고 올바른 확장자로 다운로드됩니다.
- PNG와 JPEG 외에 SVG, GIF, ICO도 되나요?
- 스니퍼가 인식하는 형식은 모두 Base64로 변환됩니다: PNG, JPEG, WebP, GIF, SVG, BMP, ICO, AVIF. 다만 SVG는 XML 소스를 그대로 인라인하는 편이 더 작고 읽기 쉬운 경우가 많습니다 — SVG를 Base64로 만드는 것은 주로 따옴표나 이스케이프가 골칫거리일 때 의미가 있습니다.