이미지 Base64 변환

이미지 Base64란?

이미지 Base64 변환은 PNG, JPG, GIF, WebP 등의 이미지 파일을 ASCII 텍스트 문자열로 인코딩하는 기술입니다. 변환된 문자열은 data:image/png;base64,iVBORw0KGgo... 형태의 Data URI가 되어, 별도 파일 없이 HTML <img> 태그나 CSS background-image 속성에 직접 삽입할 수 있습니다.

Base64 인코딩은 이미지 데이터를 텍스트로 전달해야 하는 상황에서 사용됩니다. 이메일 HTML 템플릿, 단일 파일 HTML 문서, API JSON 응답에 이미지를 포함할 때 특히 유용합니다. 단, Base64로 인코딩하면 원본 대비 약 33%의 파일 크기 증가가 발생하므로, 크기가 작은 아이콘이나 로고에 적합하고 큰 사진 파일에는 권장하지 않습니다.

사용 방법

1. 이미지 선택 — "파일 선택" 버튼을 클릭하거나 이미지 파일을 드래그 앤 드롭하여 업로드합니다. PNG, JPG, GIF, SVG, WebP 등 주요 형식을 지원합니다.
2. 변환 확인 — 파일 선택 즉시 Data URI 형태의 Base64 문자열이 생성됩니다. 미리보기로 올바르게 변환되었는지 확인합니다.
3. 결과 복사 — 전체 Data URI 문자열을 복사하여 HTML이나 CSS에 바로 붙여넣습니다.
4. CSS background 코드 — CSS background-image 속성에 사용할 수 있는 코드가 자동으로 생성됩니다. 복사하여 CSS 파일에 바로 적용하세요.
5. HTML img 태그 — <img src="..."> 형태의 코드도 자동 생성됩니다. HTML에 인라인으로 이미지를 삽입할 때 사용하세요.

이미지 Base64 변환이 필요한 경우

이미지 Base64 변환은 파일을 텍스트 문자열로 바꿔 HTML, CSS, JSON 같은 텍스트 기반 환경에서 다루기 쉽게 만듭니다. 특히 아이콘처럼 작은 리소스를 빠르게 테스트하거나 API 페이로드에 포함해야 할 때 유용합니다.

실무 사용 예시

1. CSS `background-image`에 작은 아이콘을 인라인으로 넣어 요청 수를 줄입니다.
2. 데이터 전송 테스트 시 이미지 파일 대신 Base64 문자열을 JSON에 포함합니다.
3. 외부 파일 접근이 제한된 환경에서 임시 미리보기 이미지를 출력합니다.

주의사항

• Base64 인코딩 시 파일 크기가 일반적으로 약 33% 증가합니다.
• 큰 이미지를 인라인하면 HTML/CSS 크기가 커져 초기 렌더링이 느려질 수 있습니다.
• 반복 재사용되는 리소스는 별도 파일로 분리하는 편이 캐시 효율에 유리합니다.

자주 묻는 질문