> 인코딩 | 임베딩 | 최적화 <
// 웹 개발과 데이터 임베딩을 위한 이미지 Base64 변환
이미지를 여기에 드롭하거나 클릭하여 선택
파일 찾아보기 클릭
로컬 처리
100% 클라이언트측 이미지 인코딩. 파일이 브라우저를 떠나지 않습니다.
드래그 앤 드롭
드래그 앤 드롭 인터페이스로 빠른 업로드. 즉시 Base64 변환.
제한 없음
모든 이미지 크기나 형식 인코딩. 회원가입이나 API 키 불필요.
// 자주 묻는 질문
Q: 이미지 Base64 인코딩이란 무엇인가요?
A: 이미지 Base64 인코딩은 바이너리 이미지 데이터를 Base64 인코딩을 사용하여 텍스트 문자열로 변환하는 과정입니다. 별도 파일 없이 HTML, CSS, 이메일, API에 이미지를 직접 임베딩하는 데 필수적입니다.
Q: 이미지 Base64 변환은 얼마나 안전한가요?
A: 100% 안전한 로컬 처리입니다. 모든 이미지 인코딩이 브라우저에서 이루어집니다. 서버 업로드는 전혀 없으며, 이미지가 장치를 떠나지 않습니다.
Q: 어떤 이미지 형식을 지원하나요?
A: 모든 일반적인 웹 이미지 형식을 지원합니다: PNG, JPEG, GIF, WebP, SVG, BMP 등. 원본 이미지 품질과 형식을 유지합니다.
Q: HTML에서 Base64 이미지를 어떻게 사용하나요?
A: 데이터 URI 형식을 사용하세요: <img src="data:image/png;base64,YOUR_BASE64_STRING">. 인라인 이미지, 아이콘 또는 HTTP 요청 감소에 완벽합니다.
Q: 파일 크기 제한이 있나요?
A: 서버측 제한은 없습니다. 처리가 브라우저에서 로컬로 이루어집니다. 큰 파일은 인코딩에 시간이 더 걸릴 수 있지만 작동합니다.
// 주요 이미지 형식과 MIME 타입
| 형식 | MIME 타입 |
|---|---|
| PNG | image/png |
| JPEG | image/jpeg |
| GIF | image/gif |
| WebP | image/webp |
| AVIF | image/avif |
| SVG | image/svg+xml |
// 코드에서의 Data URI
HTML <img src="data:image/png;base64,iVBORw0KGgo..." alt="">
CSS background: url("data:image/svg+xml;base64,PHN2Zy...");
Linux base64 -w0 logo.png
macOS base64 -i logo.png
Python base64.b64encode(open('logo.png','rb').read()).decode()
Node.js fs.readFileSync('logo.png').toString('base64')
>> 더 많은 질문
Q: Base64 이미지가 약 33% 커지는 이유는?
A: Base64는 3바이트를 4문자로 표현하므로 약 1/3이 늘어나며, gzip은 일부만 상쇄합니다. 그래서 인라인 이미지는 수 KB 정도의 아주 작은 파일에 적합합니다.
Q: Data URI가 일반 이미지 파일보다 불리한 점은?
A: 포함된 이미지는 따로 캐시할 수 없고, HTML이나 CSS가 커지며, 해당 파일을 불러올 때마다 다시 전송됩니다. 큰 이미지는 별도 파일로 두세요.
Q: SVG는 Base64로 포함해야 하나요?
A: 보통은 아닙니다. SVG는 텍스트이므로 URL 인코딩한 data:image/svg+xml,…가 Base64보다 작고 읽기 쉬운 경우가 많습니다. 다만 Base64는 어디서나 안정적으로 동작합니다.