이미지 → Base64 변환기
이미지를 Base64 Data URI로 즉시 변환
입력
클릭하여 이미지 업로드
JPG, PNG, GIF, WebP, SVG (최대 5MB)출력
이미지 → Base64 예시
이미지를 업로드하여 Data URI를 얻으세요. 출력 형식은 data:image/<type>;base64,<base64-string>입니다.
Data URI 출력 샘플
위에 이미지를 업로드하여 나만의 Data URI를 생성하세요.
이미지 → Base64란?
이미지 → Base64는 이미지 파일을 Base64로 인코딩된 Data URI로 변환합니다. Base64는 RFC 4648에서 정의됩니다. Data URI를 사용하면 이미지를 HTML, CSS, JSON에 직접 삽입할 수 있습니다.
이 도구는 브라우저의 FileReader API를 사용합니다. 지원 형식: JPG, PNG, GIF, WebP, SVG. Base64를 다시 이미지로 디코딩하려면 Base64 → 이미지 변환기를 사용하세요.
이 도구 사용 방법
이미지 업로드
업로드 영역을 클릭하거나 업로드를 사용하여 이미지 파일을 선택하세요. 지원 형식: JPG, PNG, GIF, WebP, SVG (최대 5MB).
Base64 출력 받기
오른쪽 패널이 전체 Data URI로 자동 업데이트됩니다. HTML <img src="..."> 또는 CSS background-image: url(...)에 직접 복사하여 붙여넣을 수 있습니다.
복사 또는 다운로드
복사로 Data URI를 클립보드에 넣거나 다운로드로 .txt 파일로 저장하세요. 이미지 이외의 파일을 인코딩하려면 Base64 인코더를, Base64 이미지 문자열을 보려면 Base64 → 이미지 변환기를 사용하세요.
작동 방식
도구는 FileReader.readAsDataURL()으로 이미지를 읽어 Data URI를 반환합니다. Base64 인코딩은 크기를 약 33% 증가시킵니다.
HTML: <img src="data:image/png;base64,...">. CSS: background-image: url(...).
이미지 → Base64가 유용한 경우
웹 개발자는 작은 아이콘에 Base64 이미지를 사용합니다. 이메일 HTML은 종종 이미지를 Base64로 삽입합니다.
디코딩하려면 Base64 → 이미지 변환기를, 텍스트나 파일(이미지 외)을 인코딩하려면 Base64 인코더를, 일반적인 Base64 디코딩에는 Base64 디코더를 사용하세요.
자주 묻는 질문
내 데이터는 안전한가요?
예. 변환은 완전히 브라우저 내에서 실행됩니다.
크기 제한은?
도구는 업로드를 5MB로 제한합니다.
출력을 HTML/CSS에 사용할 수 있나요?
예. 출력은 img 또는 background-image에 사용할 준비가 된 Data URI입니다.
SVG를 지원하나요?
예. SVG가 지원됩니다. Base64를 다시 SVG로 디코딩하려면 Base64 디코더를 사용하세요.
일반 이미지 URL 대신 Base64를 사용하는 이유는?
Base64는 이미지를 문서에 삽입하므로 추가적인 HTTP 요청이 필요 없습니다.
관련 도구
사양: RFC 4648.