Base64 이미지 변환기

Base64 이미지 변환기 사용 가이드

작은 아이콘이나 로고를 HTML·CSS·이메일 안에 직접 넣으면 이미지 파일을 따로 올리지 않아도 됩니다. 이때 이미지를 글자로 바꾼 것이 Base64이고, 앞에 형식을 붙인 data:image/png;base64,... 형태를 data URI라고 합니다.

이미지 → Base64 방향에서는 Base64만, data URI, CSS, HTML img 태그(가로·세로 포함), Markdown 이미지 중 원하는 형태로 바로 만들어 줍니다. 원본 용량, Base64 길이, 원본보다 몇 % 커졌는지도 함께 보여 줍니다.

Base64 → 이미지 방향에서는 접두사가 없어도 첫 글자로 JPG·PNG·WebP·GIF·SVG·ICO·AVIF를 알아내고, 줄바꿈과 공백, URL용 -·_ 글자도 처리합니다. URL 인코딩된 SVG data URI도 복원합니다.

사용 방법

1. 1'방향'에서 이미지 → Base64 또는 Base64 → 이미지를 고릅니다.
2. 2이미지 → Base64라면 '이미지 파일'을 고르고 '출력 형태'와 '대체 텍스트 (HTML·Markdown)'를 정합니다.
3. 3Base64 → 이미지라면 'Base64 또는 data URI' 칸에 문자열을 붙여 넣습니다.
4. 4'전체 복사'로 결과를 복사하거나 복원한 이미지를 파일로 저장합니다.

32 × 32px PNG 아이콘 · 출력 형태 HTML <img> 태그 · 대체 텍스트 '이미지 설명'

Base64 길이 212자 · 원본보다 33% 큼
data URI 234자 · HTML 태그 282자
<img src="data:image/png;base64,iVBORw0KGgo…" alt="이미지 설명" width="32" height="32">

이럴 때 쓰면 좋아요

• 이메일 템플릿에 작은 로고를 파일 없이 넣을 때
• CSS에 아이콘 배경 이미지를 직접 넣을 때
• API 응답이나 로그에 든 Base64 이미지를 확인할 때
• Markdown 문서 하나에 작은 그림을 함께 담을 때

문제가 생겼을 때

활용 팁

• HTML 태그 형태는 가로·세로 크기를 함께 넣어 화면이 덜컥거리지 않게 합니다.
• SVG는 Base64보다 URL 인코딩이 더 짧은 경우가 많습니다.
• 글자를 Base64로 바꾸려면 Base64 텍스트 인코더/디코더를 쓰세요.

자주 묻는 질문