logo
GeekFormat

이미지를 Base64로 변환

여기에 이미지를 끌어다 놓거나 클릭하여 선택

PNG, JPG, GIF, WebP 지원

PNG/JPG/WebP/GIF/SVG/BMP/AVIF 등 다양한 형식을 지원하는 무료 온라인 이미지 Base64 인코딩 도구입니다. 브라우저 Web Worker에서 로컬 처리되어 업로드가 없고 UI가 멈추지 않습니다. CSS 인라인, HTML 임베드, 이메일 템플릿, API 전송용 Data URL을 생성합니다.

관련 추천

Base64 이미지로 변환

Base64 텍스트로 변환

Data URL 변환

JSON 압축

JavaScript Formatter

URL 파서

사용 사례

  • CSS Sprites: 작은 아이콘과 이미지를 CSS background에 인라인하여 HTTP 요청을 줄이고 첫 화면 렌더링을 가속
  • HTML 이미지 임베드: 로고, 플레이스홀더, UI 리소스를 HTML img 태그에 직접 넣어 이미지 요청을 줄임
  • 이메일 템플릿: 이메일 클라이언트는 외부 이미지를 기본 차단하는 경우가 많으므로 Base64 인라인으로 사용자 승인 없이 즉시 표시하기 쉽게 함
  • API 전송: 이미지 바이너리 데이터를 Base64 문자열로 변환해 JSON 요청 본문에 넣어 API 호출에 사용
  • 프론트엔드 성능 최적화: 첫 화면 핵심 리소스를 인라인하여 HTTP 요청 수를 줄임
  • 브라우저 확장 및 단일 파일 앱: 외부 리소스를 참조할 수 없는 상황에서 모든 이미지를 Base64로 인라인

주요 기능

  • 전체 형식 지원: PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF 등 일반 이미지 형식의 MIME을 자동 감지
  • Web Worker 가속: 큰 파일 인코딩을 별도 스레드에서 실행하고 실시간 진행률 바를 표시하여 메인 UI 스레드를 차단하지 않음
  • 브라우저 로컬 처리와 업로드 없음: 이미지를 ArrayBuffer zero-copy로 Worker에 직접 전달하며 데이터가 어떤 서버도 거치지 않음
  • Data URL 자동 생성: HTML img 또는 CSS background에 바로 붙여 넣을 수 있는 data:image/xxx;base64, 접두사를 생성
  • 양방향 변환: 이미지에서 Base64, Base64에서 이미지 모드를 서로 간섭 없이 지원
  • 원클릭 복사 및 다운로드: 순수 Base64, 전체 Data URL, HTML img 태그를 복사하거나 .txt 파일로 다운로드

이용 방법

  1. 인코딩할 이미지 파일을 선택하거나 드래그 앤 드롭합니다(PNG/JPG/WebP/GIF 등)
  2. 도구가 브라우저 Web Worker 안에서 이미지를 자동으로 Base64로 변환하고 진행률을 실시간으로 표시합니다
  3. 인코딩 결과를 확인합니다: 순수 Base64 문자열, 전체 Data URL, HTML img 태그 중 필요한 형식을 복사합니다
  4. 결과를 CSS, HTML, JSON 설정 파일 또는 API 요청에 붙여 넣습니다

자주 묻는 질문

어떤 이미지 형식을 지원하나요?

PNG, JPG, WebP, GIF, SVG, BMP, AVIF, HEIC/HEIF 등 일반 형식을 지원합니다. 도구가 MIME 타입을 자동 감지하고 data:image/png;base64,... 같은 해당 Data URL 접두사를 생성합니다.

Web Worker 가속은 어떻게 작동하나요?

Web Worker는 메인 UI 스레드와 독립된 브라우저 백그라운드 스레드입니다. 일반 이미지 인코딩은 페이지를 멈추게 할 수 있지만, 이 도구는 ArrayBuffer 전송과 진행률 콜백을 사용해 Worker에서 인코딩을 실행하므로 큰 파일을 처리해도 인터페이스가 반응성을 유지합니다.

이미지가 서버에 업로드되나요?

아니요. 변환은 ArrayBuffer zero-copy 기술로 브라우저 Worker 스레드 안에서 직접 완료됩니다. 이미지 내용은 어떤 서버도 거치지 않습니다. “브라우저 처리”라고 주장하면서 실제로 데이터를 업로드하는 도구와는 근본적으로 다릅니다.

Base64 인코딩 후 파일 크기는 얼마나 커지나요?

Base64 인코딩 결과는 원본 바이너리 크기의 약 133%, 즉 약 33% 더 큽니다. 3바이트(24비트)마다 4개의 Base64 문자(각 6비트)로 변환되고 필요하면 끝에 = 패딩이 붙습니다. 인라인 이미지는 개별 10KB 이하를 권장합니다.

어떤 이미지가 Base64 인라인에 적합한가요?

10KB 이하의 작은 아이콘과 이미지에 적합합니다. 작은 이미지를 인라인하면 HTTP 요청을 줄일 수 있지만, 큰 이미지는 HTML/CSS 크기를 늘려 로딩 성능을 떨어뜨릴 수 있습니다. 큰 이미지는 별도 URL을 사용하는 것이 좋습니다.

Data URL과 순수 Base64의 차이는 무엇인가요?

Data URL은 data:image/png;base64, 뒤에 Base64 콘텐츠가 붙는 형식이며 HTML img의 src 속성에 바로 넣을 수 있습니다. 순수 Base64는 인코딩된 문자열만 있으므로 사용하려면 MIME 접두사가 필요합니다.

API 연동 테스트에 사용할 수 있나요?

네. 이미지를 Base64로 변환한 뒤 JSON 요청 본문의 필드 값으로 백엔드 API에 보낼 수 있습니다. 이 도구는 원클릭 복사를 지원하며 대부분의 API 문서 예시 형식과 호환됩니다.

일반 이미지 참조 대신 Base64 인라인을 선택하는 이유는?

Base64 인라인은 작은 파일(<10KB)의 HTTP 요청을 줄이는 데 적합합니다. 큰 이미지는 브라우저가 병렬 다운로드와 캐시를 활용할 수 있으므로 별도 URL이 더 빠르게 로드됩니다.

이미지 Base64 변환이란?

이미지 Base64 변환은 바이너리 이미지 데이터를 ASCII 텍스트 문자열로 인코딩하는 기술입니다. Base64는 64개의 출력 가능한 문자(A-Z, a-z, 0-9, +, /)로 바이너리 데이터를 표현하며, 3바이트마다 4개의 Base64 문자로 변환하고 끝에 = 패딩을 추가합니다. 전체 인코딩 과정은 RFC 4648 표준을 따릅니다.

**인코딩 원리**: Base64는 3바이트(24비트)를 네 개의 6비트 그룹으로 나누고 각 그룹을 Base64 알파벳의 문자에 매핑합니다. 바이트 수가 3의 배수가 아니면 끝에 1-2개의 = 패딩 문자를 추가합니다. 그래서 파일 크기가 약 33%(4/3 ≈ 1.33) 증가합니다.

**Web Worker 최적화**: 이 도구는 Web Worker를 사용해 메인 스레드와 분리된 브라우저 스레드에서 인코딩을 실행합니다. ArrayBuffer.transfer()로 Worker에 zero-copy 전송을 수행해 메인 스레드 차단을 피합니다. 수 MB 이미지도 UI가 부드럽게 반응하며 진행률을 실시간으로 표시합니다.

**개인정보 보호와 보안**: 이미지를 서버에 업로드해야 하는 도구와 달리 이 도구는 완전히 브라우저에서 실행됩니다. 이미지 데이터가 제3자 서버를 거치지 않으므로 신분증이나 계약서 같은 민감한 이미지를 다룰 때 특히 중요합니다.

**사용 사례**: Base64 이미지는 CSS Sprites(HTTP 요청 감소), HTML 이메일 템플릿(메일 클라이언트의 이미지 차단 회피), API 바이너리 데이터 전송, 외부 리소스를 참조할 수 없는 브라우저 확장 또는 단일 파일 앱에서 자주 사용됩니다.