이미지를 Base64로 변환
이미지 파일을 Base64 문자열로 변환하세요.
이미지를 여기에 끌어다 놓거나 클릭하여 업로드하세요
PNG, JPG, GIF, WebP 파일 지원 (최대 5MB)
Base64 변환 팁
- • Data URI 형식은 HTML img 태그의 src 속성에 직접 사용할 수 있습니다.
- • Base64 인코딩은 원본 파일보다 약 33% 더 큰 크기의 문자열을 생성합니다.
- • 10KB 미만의 작은 이미지(아이콘, 로고 등)에만 Base64 인코딩을 사용하는 것이 좋습니다.
- • CSS에서 background-image 속성에도 Data URI를 사용할 수 있습니다.
Base64 인코딩이란?
Base64는 바이너리 데이터를 ASCII 문자열로 인코딩하는 방식입니다. 이미지와 같은 바이너리 파일을 텍스트 기반 형식으로 변환하여 이메일이나 HTML, CSS, JavaScript 등에 포함시킬 수 있습니다.
이미지를 Base64로 변환하는 이유
- HTTP 요청 감소: 작은 이미지를 Base64로 인코딩하여 HTML이나 CSS에 직접 포함시키면 별도의 HTTP 요청 없이 이미지를 로드할 수 있습니다.
- 이메일 첨부: 이미지를 Base64로 인코딩하여 이메일 본문에 직접 포함시킬 수 있습니다.
- 데이터 저장: 이미지 데이터를 텍스트 형식으로 데이터베이스에 저장할 수 있습니다.
- API 통신: JSON과 같은 텍스트 기반 형식으로 이미지 데이터를 전송할 수 있습니다.
Base64 이미지 사용 방법
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Base64 이미지" />
위와 같이 HTML에서 이미지 src 속성에 "data:image/[이미지 형식];base64,[Base64 문자열]" 형식으로 사용할 수 있습니다.
주의사항
- 파일 크기 증가: Base64 인코딩은 원본 파일보다 약 33% 더 큰 크기의 문자열을 생성합니다.
- 캐싱 불가: Base64로 인코딩된 이미지는 브라우저에서 개별적으로 캐싱할 수 없습니다.
- 병렬 로딩 불가: 일반 이미지는 병렬로 로드되지만, Base64 이미지는 HTML/CSS와 함께 로드됩니다.
- 대용량 이미지: 큰 이미지를 Base64로 인코딩하면 매우 긴 문자열이 생성되어 성능 문제가 발생할 수 있습니다.
권장사항
일반적으로 10KB 미만의 작은 이미지(아이콘, 로고 등)에만 Base64 인코딩을 사용하는 것이 좋습니다. 더 큰 이미지는 일반적인 방식으로 호스팅하는 것이 성능상 유리합니다.