0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
설정
HTML, CSS 또는 JSON에 이미지를 삽입하기 위해 Base64로 변환하거나 Base64 문자열을 이미지로 다시 디코딩할 수 있습니다. PNG, JPEG, GIF, WebP, SVG 및 BMP를 지원합니다.
이미지를 드래그하거나 클릭하여 선택하세요.
PNG, JPEG, GIF, WebP, SVG, BMP
작동 방식
이미지를 Data URI 형태(data:image/…;base64,…)의 Base64 문자열로 변환하여, 별도 파일이나 추가 HTTP 요청 없이 HTML이나 CSS에 직접 삽입할 수 있습니다.
결과는 원본 파일보다 약 33% 더 크므로, 아이콘, 로고, 패턴, 자리 표시자 같은 작은 이미지에 사용하는 것이 좋습니다.
디코딩 모드에서는 Base64 문자열이나 전체 Data URI를 받아 첫 바이트로 이미지 종류를 감지하고 다운로드 가능한 미리보기를 표시합니다.
예시
logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…data:image/png;base64, 접두사가 종류를 나타냅니다. 인코딩된 모든 PNG는 파일 시그니처에 해당하는 iVBORw0KGgo로 시작합니다.background-image: url("data:image/png;base64,iVBORw0KGgo…");Data URI는 외부 파일 없이 이미지를 삽입하기 위해 CSS 규칙 안에서 그대로 사용할 수 있습니다.활용 사례
- data URI를 통해 작은 아이콘이나 로고를 CSS/HTML에 삽입하여 추가 요청을 피하기.
- 이미지를 JSON, 구성 파일 또는 데이터베이스 안에 저장하기.
- 텍스트만 허용하는 API나 이메일(MIME)을 통해 이미지를 보내기.
- Base64 문자열이나 Data URI에서 이미지를 복구하고 미리 보기.
자주 묻는 질문
모든 이미지를 Base64로 변환해야 하나요?
아니요. 크기가 약 33% 늘고 브라우저가 이미지를 별도로 캐시할 수 없습니다. 작은 이미지에는 이상적이지만, 큰 이미지에는 거의 항상 별도 파일이 낫습니다.
어떤 이미지 형식을 지원하나요?
인코딩할 때는 어떤 것이든(PNG, JPEG, GIF, WebP, BMP, SVG). 디코딩할 때는 파일의 첫 바이트로 종류를 자동 감지합니다.
내 Data URI가 왜 이렇게 긴가요?
Base64는 3바이트마다 4문자로 표현하므로 텍스트가 원본 이진보다 약 33% 커집니다. 특히 이미지에서는 정상입니다.
내 이미지가 서버에 업로드되나요?
아니요. 이미지는 모두 브라우저에서 읽고 인코딩되며, 컴퓨터를 벗어나지 않습니다.