이미지를 Base64로 변환
이미지를 Base64로 인코딩된 문자열로 변환합니다
입력 이미지
이미지를 선택하거나 끌어다 놓으세요
최대 10 MiB의 이미지 파일. JPG, PNG, GIF, WebP, SVG 등 이미지 형식을 지원합니다.
파일 정보
- 이름
- —
- 크기
- 0 B
- MIME 유형
- —
- 치수
- —
Base64 인코딩 정보
- 외부 파일 없이 HTML, CSS, JSON에 이미지를 직접 삽입할 수 있습니다
- 이메일 템플릿, 데이터 URI, API 응답에 유용합니다
- Base64 인코딩은 파일 크기를 약 33% 늘립니다
- 아이콘, 로고, 썸네일 같은 작은 이미지에 가장 적합합니다
Base64 결과
이미지를 업로드하면 Base64 결과를 볼 수 있습니다.
0자
이미지를 업로드하면 Base64 결과를 볼 수 있습니다.
사용 예시
예시는 표시를 위해 줄여 놓았습니다. 복사 버튼을 누르면 전체 HTML 또는 CSS가 복사됩니다.
이미지를 Base64로 변환 소개
무료 이미지 Base64 변환기는 이미지 파일을 HTML, CSS, JavaScript, JSON에 바로 삽입할 수 있는 Base64 인코딩 텍스트 문자열로 바꿔 줍니다. 이미지를 업로드하거나 끌어다 놓기만 하면 코드에 바로 쓸 수 있는 완전한 데이터 URI가 즉시 생성됩니다.
Base64 인코딩은 64개 문자로 이루어진 문자 집합을 사용해 이진 이미지 데이터를 텍스트 형식으로 바꿉니다. 덕분에 텍스트 기반 문서 안에 이미지를 인라인으로 넣을 수 있어 별도의 이미지 파일 요청이 필요 없습니다. Base64 인코딩은 데이터 크기를 약 33% 늘리지만, 아이콘, 로고, 썸네일처럼 작은 이미지는 HTTP 요청을 줄여 페이지 로딩 성능이 좋아지므로 그만한 가치가 있습니다.
이 변환기는 FileReader API를 사용해 이미지를 브라우저 안에서만 처리합니다. 이미지 데이터가 서버로 업로드되는 일은 없으므로 독점 그래픽, 기밀 스크린샷 등 민감한 시각 자료도 안전하게 인코딩할 수 있습니다. 주요 이미지 형식을 모두 지원하며 최대 10MB까지 처리할 수 있습니다.
주요 기능
- JPG, PNG, GIF, WebP, SVG 등 다양한 이미지 형식 지원
- 끌어다 놓기 또는 클릭으로 파일 선택
- 서버 업로드 없이 즉시 변환되는 클라이언트 측 변환
- Base64 출력과 나란히 표시되는 실시간 이미지 미리보기
- MIME 유형 헤더가 포함된 완전한 데이터 URI 출력
- Base64 문자열 전체를 한 번의 클릭으로 클립보드에 복사
- Base64 문자열을 텍스트 파일로 다운로드
- 파일 정보 표시(이름, 크기, 유형)
- 바로 사용할 수 있는 HTML 및 CSS 코드 스니펫
- 형식 검증과 함께 최대 파일 크기 10MB
이미지를 Base64로 변환 사용 방법
- 이미지 업로드: 업로드 영역을 클릭하거나 이미지 파일을 끌어다 놓습니다. JPG, PNG, GIF, WebP 등을 최대 10MB까지 지원합니다.
- 미리보기 확인: 업로드한 이미지의 미리보기가 파일 정보(이름, 크기, 유형)와 함께 표시됩니다.
- Base64 문자열 복사: 복사 버튼을 클릭하면 완전한 데이터 URI가 클립보드에 복사되어 코드에 바로 붙여 넣을 수 있습니다.
- 텍스트로 다운로드: 다운로드 버튼을 클릭하면 나중에 사용할 수 있도록 Base64 문자열이 텍스트 파일로 저장됩니다.
- 코드 스니펫 활용: 출력 아래에 표시된 HTML 및 CSS 사용 예제를 참고하여 인코딩된 이미지를 프로젝트에 적용하세요.
- 지우고 다른 이미지 변환: 파일 정보 카드의 X 버튼을 클릭하면 현재 이미지가 제거되고 새 변환을 시작할 수 있습니다.
활용 사례
- HTML에 아이콘 삽입: 작은 아이콘과 로고를 Base64로 변환하여 데이터 URI를 쓰는 img 태그로 HTML에 직접 넣으면 추가 HTTP 요청이 필요 없습니다.
- CSS 배경 이미지: 장식용 이미지를 인코딩해 인라인 CSS background-image 값으로 사용하면 외부 파일 의존성을 줄일 수 있습니다.
- 이메일 템플릿 디자인: HTML 이메일 템플릿에 이미지를 직접 삽입하면 이메일 클라이언트가 외부 이미지를 차단해도 이미지가 표시됩니다.
- API & JSON 페이로드: 파일 업로드 엔드포인트를 쓸 수 없을 때 JSON API 응답이나 요청에 이미지 데이터를 포함합니다.
- 단일 파일 애플리케이션: 모든 이미지를 Base64로 삽입한 독립형 HTML 파일을 만들 수 있어 문서, 보고서, 오프라인 도구에 적합합니다.
- 설정 파일: 설정 파일, 환경 변수, 코드형 인프라 템플릿에 포함할 작은 이미지를 인코딩합니다.
- 프로그레시브 웹 앱: 서비스 워커나 로컬 스토리지에 핵심 이미지를 Base64 문자열로 캐시하여 오프라인에서도 즉시 렌더링합니다.
자주 묻는 질문
이미지의 Base64 인코딩이란 무엇인가요?
Base64 인코딩은 이진 이미지 데이터를 ASCII 텍스트 문자열로 변환합니다. 그 결과를 HTML img 태그나 CSS background 속성의 데이터 URI로 쓰거나 JSON 페이로드에 포함할 수 있어, 이미지를 일반 텍스트로 전송하고 저장할 수 있습니다.
Base64 인코딩을 하면 파일 크기가 커지나요?
네, Base64 인코딩은 이진 데이터 3바이트마다 텍스트 문자 4개를 사용하므로 데이터 크기가 약 33% 늘어납니다. 그래서 Base64 삽입은 주로 아이콘이나 로고처럼 작은 이미지에 권장됩니다.
일반 이미지 파일 대신 Base64 이미지는 언제 사용해야 하나요?
HTTP 요청을 줄이는 것이 유리한 작은 이미지(10-20KB 미만), 외부 이미지가 차단될 수 있는 이메일 템플릿, 독립형 HTML 문서가 필요할 때 Base64를 사용하세요. 더 큰 이미지는 일반 파일 참조가 더 효율적입니다.
이 도구는 무료인가요?
네, 이 이미지 Base64 변환기는 완전 무료입니다. 변환 횟수 제한도, 회원 가입도 없으며 출력물에 워터마크나 제약이 붙지 않습니다.
내 데이터는 안전한가요?
네. 이미지는 JavaScript FileReader API를 사용해 브라우저 안에서만 처리됩니다. 이미지 데이터가 어떤 서버에도 업로드되거나 저장되지 않으므로 민감하거나 독점적인 이미지에도 안전하게 사용할 수 있습니다.
최대 파일 크기는 얼마인가요?
이 도구는 최대 10MB 크기의 이미지를 지원합니다. 실제로는 Base64 인코딩이 20KB 미만의 이미지에 가장 유용합니다. 더 큰 이미지는 HTML이나 CSS가 비대해지지 않도록 일반 파일로 제공하는 편이 좋습니다.
팁과 모범 사례
- 이미지를 먼저 최적화: Base64로 변환하기 전에 이미지를 압축하고 크기를 조정하세요. 원본 파일이 작을수록 더 짧고 효율적인 Base64 문자열이 만들어집니다.
- 작은 이미지에만 사용: Base64는 10-20KB 미만의 아이콘, 로고, 썸네일에 가장 적합합니다. 더 큰 이미지는 외부 파일 참조가 성능 면에서 낫습니다.
- 전체 데이터 URI 복사: 출력에는 data:image/[format];base64, 접두사가 모두 포함되어 있어 수정 없이 HTML이나 CSS에 바로 붙여 넣을 수 있습니다.
- 코드 스니펫 확인: 제공되는 HTML 및 CSS 예제를 템플릿 삼아 Base64 이미지를 프로젝트에 적용하세요.
- 캐싱 고려: HTML이나 CSS에 삽입된 Base64 인코딩 이미지는 문서와 함께 캐시되지만, 외부 이미지는 독립적으로 캐시할 수 있습니다. 캐싱 전략에 가장 잘 맞는 방식을 선택하세요.
- 백업용 다운로드: 특히 여러 프로젝트에서 쓰는 이미지는 다운로드 버튼으로 Base64 텍스트 파일을 백업해 두세요.