🖼️ 이미지 → Base64 / Data URL 변환
이미지를 드래그 & 드롭으로 Base64 / Data URL로 변환. CSS background-image나 HTML img 태그에 바로 사용.
이미지를 드래그 & 드롭하거나 클릭하여 선택
PNG / JPG / WebP / SVG / GIF / AVIF / BMP / ICO
미리보기
- 파일명
- MIME
- 크기
- Base64 size
- 해상도
💡 Data URL 사용법
• 작은 아이콘이나 1–2 KB 정도의 이미지는 HTTP 요청 수를 줄일 수 있습니다.
• Base64 인코딩은 크기가 약 33% 증가합니다.
• SVG는 인라인 XML로 사용하는 것이 더 작을 수 있습니다.
📖 자주 걸리는 지점
이미지를 Base64 로 변환하고 Data URL · CSS 의 background-image · HTML 의 img · Markdown 형식으로 내보냅니다. 처리는 브라우저 안에서 끝나며 파일은 전송되지 않습니다. Data URL 로 하면 HTTP 요청은 하나 줄지만 그것이 속도로 이어진다고는 할 수 없습니다 — 데이터양은 약 33% 늘고 브라우저의 캐시도 듣지 않게 되기 때문입니다. 이 둘을 저울질하는 것이 이 도구를 쓸 때의 유일한 판단입니다.
| 사례 | 무슨 일이 일어나는가 | 어떻게 하면 되는가 |
|---|---|---|
| 심은 결과 오히려 느려진다 | data URL 로 만든 이미지는 그 이미지만을 개별적으로 캐시할 수 없습니다 — 심은 곳의 CSS 나 HTML 과 일체가 되기 때문입니다. CSS 에 심은 경우는 특히 영향이 커서 CSS 는 렌더링을 막으므로 이미지의 바이트 수가 그대로 첫 표시의 지연이 됩니다. 10KB 의 이미지를 20 개 심으면 본래는 병렬로 읽어들일 수 있었던 20 개가 266KB 의 하나의 렌더링 차단 자원으로 바뀝니다. 나아가 이미지를 하나 바꾸는 것만으로 CSS 전체의 캐시가 무효가 되므로 갱신할 때마다 전 사용자가 다시 다운로드합니다. | data URL 이 유리한 것은 몇 KB 까지의 작은 아이콘뿐입니다. 기준으로 1~2KB 정도이고 좀처럼 바뀌지 않는 것 — 체크 표시, 화살표, 로딩 스피너 같은 UI 의 부품이 해당합니다. 그 이상의 크기라면 평범한 <img> 로 읽어들이세요 — 캐시와 반응형 이미지(srcset)의 혜택 쪽이 요청 하나분보다 확실히 커집니다. 그리고 전제로서 HTTP/2 이후는 요청 수의 비용이 크게 낮아졌습니다 — 요청을 줄이면 빨라진다는 경험칙은 HTTP/1.1 시대의 것이고 현재는 반드시 성립하지는 않습니다. 판단의 기준은 그 이미지를 교체하는 빈도와 그 CSS 를 배포하는 횟수를 비교하는 것입니다. |
| SVG 까지 Base64 로 해 버린다 | SVG 는 텍스트이므로 Base64 로 만드는 것은 손해입니다. Base64 는 3 바이트를 4 문자로 만드는 부호화이므로 반드시 약 33% 늘고 나아가 결과가 랜덤에 가까운 문자열이 되므로 gzip 이나 Brotli 가 거의 듣지 않습니다. 원래 SVG 는 마크업의 반복이 많아 그대로라면 압축으로 70% 전후 작아지는데 Base64 로 하면 그 성질이 완전히 사라집니다. 최적화하고 나서 Base64 로 한다는 절차를 밟으면 깎은 만큼이 그대로 상쇄되는 일도 드물지 않습니다. | SVG 를 심는다면 Base64 가 아니라 URL 인코딩을 쓰세요 — data:image/svg+xml,%3Csvg... 형식입니다. 이스케이프가 필수인 것은 # · % · " 세 가지뿐이고 나머지는 거의 그대로 둘 수 있으므로 Base64 보다 작고 게다가 압축이 듣는 채가 됩니다. 더 좋은 선택지로 SVG 는 data URL 로 하지 않고 인라인으로 쓰는 방법이 있습니다 — <svg> 를 HTML 에 직접 두면 CSS 로 색을 바꿀 수 있고 애니메이션도 되며 data URL 보다 짧아집니다. 아이콘을 여러 개 쓴다면 하나씩 심는 것보다 SVG 스프라이트로 모으세요 — 요청 수와 총 용량 양쪽에서 유리해집니다. |
| CSP 나 배포처에서 data URL 이 차단된다 | Content Security Policy 로 img-src 'self' 처럼 지정하고 있으면 data: 스킴의 이미지는 거부되어 아무것도 표시되지 않습니다 — 콘솔에 에러는 나오지만 겉보기에는 이미지가 빠져 있을 뿐이므로 원인을 알아채기 어렵습니다. 같은 일이 배포처에서도 일어나 HTML 메일에서는 Gmail 이 data URL 의 이미지를 표시하지 않습니다 — 로컬에서 미리보기 했을 때는 제대로 보이는데 받은편지함에서는 빠지는 형태로 드러납니다. 심었으니 확실히 표시된다는 기대가 가장 배신당하기 쉬운 부분입니다. |
CSP 를 쓰고 있다면 img-src 'self' data: 처럼 data: 를 명시적으로 허용하세요 — 다만 default-src 에 뭉뚱그려 넣지 말 것입니다. data: 를 스크립트나 스타일에까지 허용하면 XSS 의 공격면이 넓어집니다 — 이미지에만 한정해 허용하는 것이 올바른 입도입니다. HTML 메일에 대해서는 data URL 은 쓰지 말고 절대 URL 로 외부의 이미지를 참조하세요 — 어차피 많은 클라이언트가 기본적으로 외부 이미지를 차단하므로 이미지가 안 나오는 전제로 읽히는 본문을 만드는 편이 중요합니다. 그리고 어느 경로에서나 실제로 배포해 실제 환경에서 열어 확인하는 것 외에 확인할 방법은 없습니다 — 로컬의 미리보기는 이런 종류의 문제를 일절 알려 주지 않습니다. |
Base64 는 난독화조차 아닙니다. CSS 안에 심어진 data:image/png;base64,... 는 브라우저의 개발자 도구로 그 자리에서 디코딩해 표시할 수 있습니다 — 대외비 스크린숏이나 아직 공개하지 않은 도판을 CSS 안이니까 안 보인다고 생각해 심는 것은 단순히 잘못입니다. 한 가지 더, 이 도구 특유의 주의가 있습니다 — 여기서는 파일의 바이트열을 그대로 Base64 로 만들고 있으므로 EXIF 가 그대로 남습니다. Canvas 를 거치는 이미지 변환 도구와는 달리 GPS 좌표 · 촬영 일시 · 카메라의 기종이 생성한 data URL 안에 고스란히 포함됩니다. 스마트폰으로 찍은 사진을 data URL 로 만들어 공개할 때는 먼저 EXIF 를 떨어뜨리세요 — 이미지 포맷 변환 이나 이미지 리사이즈 는 Canvas 를 거치므로 그 과정에서 EXIF 가 사라집니다. 심었으니 내용은 안 보인다는 직관은 이 두 가지 어느 쪽에 대해서도 성립하지 않습니다.
📖 사용법
-
1
이미지 드롭 또는 클릭하여 선택드롭 영역에 이미지를 드래그 & 드롭하거나 클릭하여 파일을 선택하세요.
-
2
출력 형식 선택Data URL, Base64만, CSS background-image, HTML img 태그, Markdown 중에서 선택하세요.
-
3
복사하여 사용복사 버튼으로 인코딩된 텍스트를 클립보드에 저장하고 코드에 붙여넣으세요.
❓ 자주 묻는 질문
클립보드에서 붙여넣기도 지원하나요?
Base64로 변환하면 파일 크기가 어떻게 되나요?
Data URL은 어떤 상황에서 사용하는 것이 적절한가요?
🐛 이 도구에서 문제가 발생했나요?
무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.
보고 감사합니다!
운영자에게 전달되었습니다. 개선에 사용됩니다.