이미지 Base64 변환
이미지 한 장을 Data URI, HTML 태그, CSS 규칙, 순수 Base64로 바꾸고 코드에 맞는 설명과 선택자까지 직접 정합니다.
- 더 적은 클릭, 키보드 지원
- 다른 곳에선 유료인 기능을 무료로
이미지를 끌어다 놓거나, 클릭하거나, 붙여넣으세요
한 번에 한 장 · JPG, PNG, WebP, GIF, SVG 등 · 최대 25 MB
이미지는 이 브라우저에서 읽고 변환합니다. 어디에도 업로드되지 않습니다.
사용 방법
- 이미지를 끌어다 놓거나, 기기에서 고르거나, Ctrl/⌘ + V로 스크린샷을 붙여넣습니다.
- 복사 형식에서 Data URI, Base64, HTML, CSS 중 필요한 것을 고릅니다.
- HTML에는 이미지 설명을, CSS에는 스타일시트에서 쓸 클래스 이름을 입력합니다.
- 원본과 인코딩 뒤 용량을 확인한 다음 코드 복사를 눌러 정확한 결과를 클립보드에 넣습니다.
형식별로 어디에 붙일까
순수 Base64는 MIME 타입을 따로 받는 API에 알맞습니다. Data URI는 `data:image/...;base64,` 접두어까지 포함하므로 이미지 `src` 값에 바로 넣을 수 있습니다. HTML 형식은 직접 쓴 대체 텍스트가 들어간 `<img>` 태그를 만듭니다. CSS 형식은 클래스 선택자와 `background-image` 선언을 함께 만들어, 코드를 붙인 뒤 이름을 다시 고치는 일을 줄입니다.
Base64로 바꾸면 얼마나 커질까
Base64는 원본 3바이트 묶음을 문자 4개로 표현합니다. 따라서 길이는 `4 × ceil(바이트 ÷ 3)`이고, Data URI나 코드 형식을 고르면 짧은 접두어·태그가 더해집니다. 대체로 원본보다 약 33% 커집니다. 이 도구는 픽셀 수로 추정하지 않고 선택한 파일의 실제 인코딩 용량과 글자 수를 보여 줍니다.
Data URI를 쓰기 좋은 경우
RFC 2397은 URL이 필요한 자리에 작은 데이터를 직접 넣는 `data:[미디어 타입];base64,...` 형식을 정의합니다. 작은 아이콘, 파일 하나로 끝나는 HTML 예제, API 요청 본문에는 편리합니다. 다만 큰 사진을 웹페이지나 CSS에 넣으면 Base64로 늘어난 용량만큼 문서가 커지고 이미지를 별도 리소스로 캐시할 수도 없습니다. 이 도구는 원본 바이트만 읽으므로 크기를 바꾸거나 다시 압축하지 않고, 메타데이터도 그대로 유지합니다.
자주 묻는 질문
이미지가 서버에 업로드되나요?
아니요. 선택한 이미지는 브라우저의 FileReader API로 내 기기에서 읽고 변환합니다. 이미지 바이트가 Betterbit 서버로 전송되지 않습니다.
Base64와 Data URI는 무엇이 다른가요?
순수 Base64는 인코딩한 바이트만 담고, Data URI는 `data:image/png;base64,` 같은 접두어를 더해 브라우저가 이미지 URL처럼 바로 쓸 수 있게 합니다.
Base64로 바꾸면 왜 약 33% 커지나요?
Base64는 원본 3바이트를 ASCII 문자 4개로 표현하기 때문에 인코딩 데이터가 보통 3분의 1가량 커집니다. Data URI, HTML, CSS의 접두어와 태그는 그 뒤에 추가됩니다.
이미지를 Base64로 바꾸면 화질이 떨어지나요?
아니요. Base64는 같은 파일 바이트를 되돌릴 수 있는 텍스트 표현일 뿐입니다. 이 도구는 리사이즈나 재압축을 하지 않아 픽셀, 메타데이터, 애니메이션, 투명도를 바꾸지 않습니다.
HTML의 alt 텍스트에는 무엇을 써야 하나요?
이미지의 목적이나 내용을 짧게 설명합니다. 예를 들어 “파란색 Betterbit 로고”처럼 쓰고, 장식용 이미지일 때만 주변 HTML의 접근성 처리를 확인한 뒤 비워 둡니다.
25 MB 이미지도 Base64로 바꿀 수 있나요?
네. 이 페이지는 한 장당 25 MB까지 받습니다. Base64는 코드 접두어와 태그를 더하기 전에도 약 33.3 MB가 되므로, 더 큰 파일은 브라우저의 메모리를 많이 쓰고 느려질 수 있습니다.
관련 도구
2026-10-28 업데이트