이미지를 Base64로 변환하는 방법
- 이미지를 입력란에 끌어다 놓거나, 클릭해서 선택하거나, Ctrl+V로 클립보드에서 붙여넣으세요.
- 출력 형식을 고르세요: Data URI, 순수 Base64, HTML, CSS, 마크다운, JSON 중에서 선택할 수 있습니다.
- 복사를 클릭한 다음 HTML, CSS, 이메일 템플릿 또는 API 요청에 코드를 붙여넣으세요.
이미지를 Base64로 삽입하면 좋은 경우
Base64 인라인 이미지를 사용하면 HTTP 요청을 하나 줄일 수 있어 작은 아이콘, 이메일 서명, 단일 파일 HTML 문서, API 페이로드에 유용합니다. 다만 Base64는 원본 파일보다 약 33% 크고 따로 캐시할 수 없으므로, 사진이나 몇 킬로바이트가 넘는 이미지는 일반 이미지 파일로 두는 것이 좋습니다.
출력 형식 안내
- Data URI –
src속성과 CSS에 쓰는data:image/png;base64,…형식입니다. - Base64만 – API와 데이터베이스에 쓰는 순수 문자열입니다.
- HTML / CSS / 마크다운 – 그대로 붙여넣을 수 있는 완성된 코드 조각입니다.
- JSON – 파일 이름, MIME 타입, 데이터를 하나의 객체에 담습니다.
자주 묻는 질문
Base64로 변환하면 이미지 용량이 커지나요?
네, 약 3분의 1 정도 커집니다. 30 KB짜리 PNG는 약 40 KB의 Base64 텍스트가 됩니다. 용량이 중요하다면 먼저 이미지를 압축하거나 크기를 줄이세요.
어떤 이미지 형식을 변환할 수 있나요?
브라우저에서 열 수 있는 형식이라면 모두 가능합니다. PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF 등을 지원하며, Data URI에는 올바른 MIME 타입이 자동으로 추가됩니다.
CSS에서 Base64 이미지를 사용하려면 어떻게 하나요?
CSS 형식을 선택하고 결과를 CSS 규칙에 붙여넣으세요. 예: .logo { background-image: url("data:image/png;base64,…"); }