이미지를 Base64 문자열로 변환하거나 Base64를 이미지로 복원합니다.
Base64는 바이너리 데이터를 ASCII 문자열로 변환하는 인코딩 방식입니다. 이미지, 오디오, 비디오 같은 바이너리 파일을 텍스트 형식으로 표현할 수 있어 이메일, JSON, XML 등 텍스트 기반 프로토콜에서 바이너리 데이터를 전송할 수 있습니다. 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /)만 사용하여 모든 바이너리 데이터를 표현합니다. HTML에서 Data URL로 이미지를 인라인 삽입하거나, API 응답에 이미지를 포함할 때 유용합니다. 다만 원본 크기보다 약 33% 증가하는 단점이 있습니다.
Base64 이미지는 다양한 웹 개발 상황에서 활용됩니다. CSS에서 background-image로 작은 아이콘을 인라인 삽입하면 HTTP 요청 수를 줄여 페이지 로딩 속도를 개선할 수 있습니다. 이메일 템플릿에서 외부 이미지 차단을 우회하기 위해 사용됩니다. 단일 HTML 파일로 완전한 웹페이지를 배포할 때 모든 이미지를 Base64로 포함시킬 수 있습니다. RESTful API에서 이미지를 JSON 응답에 직접 포함시켜 별도의 파일 업로드 없이 전송할 수 있습니다. Canvas API로 생성한 이미지를 서버에 전송할 때도 Base64를 사용합니다.
Data URL은 파일을 URL 형태로 표현하는 스키마입니다. 형식은 data:[<mediatype>][;base64],<data>입니다. 예: data:image/png;base64,iVBORw0KG... mediatype은 MIME 타입으로 image/png, image/jpeg, image/gif 등을 지정합니다. ;base64는 인코딩 방식을 나타내며, 이후 실제 Base64 문자열이 옵니다. HTML img 태그에서 <img src="data:image/png;base64,...">처럼 직접 사용할 수 있습니다. CSS에서도 background: url(data:image/svg+xml;base64,...)로 활용됩니다. 브라우저는 Data URL을 일반 URL처럼 처리하여 이미지를 표시합니다.
Base64 이미지 사용 시 성능을 고려해야 합니다. 작은 이미지(1-2KB 이하)는 HTTP 요청 오버헤드보다 인라인 삽입이 유리합니다. 큰 이미지는 Base64로 인한 33% 크기 증가와 파싱 오버헤드로 오히려 느려질 수 있습니다. Base64 이미지는 브라우저 캐시를 활용할 수 없어 매번 HTML/CSS와 함께 다운로드됩니다. 반복 사용되는 이미지는 별도 파일로 제공하여 캐싱하는 것이 좋습니다. Gzip 압축은 Base64 문자열에도 효과적이므로 서버에서 활성화하세요. 중요 콘텐츠가 아닌 장식용 이미지나 아이콘에 Base64를 사용하는 것이 적절합니다.
Base64 이미지에도 보안 위험이 있습니다. 사용자가 업로드한 이미지를 Base64로 변환하여 표시할 때 XSS 공격에 주의해야 합니다. SVG 이미지는 JavaScript를 포함할 수 있어 특히 위험합니다. Content-Security-Policy 헤더로 data: 스키마 사용을 제한할 수 있습니다. 파일 크기 제한을 설정하여 메모리 부족 공격을 방지하세요. 이미지 타입 검증으로 허용된 MIME 타입(image/png, image/jpeg)만 처리하도록 합니다. 서버 측에서 실제 이미지 파일인지 검증하고, 악성 코드가 포함되지 않았는지 확인해야 합니다.
대부분의 프로그래밍 언어는 Base64 인코딩을 기본 제공합니다. JavaScript는 btoa()로 인코딩, atob()로 디코딩하며, FileReader API로 파일을 Base64로 읽을 수 있습니다. Python은 base64 모듈의 b64encode()와 b64decode()를 제공합니다. PHP는 base64_encode()와 base64_decode() 함수를 사용합니다. Java는 java.util.Base64 클래스로 getEncoder()와 getDecoder()를 제공합니다. Node.js는 Buffer.from(data).toString("base64")로 인코딩하고, Buffer.from(base64, "base64")로 디코딩합니다. 이미지 파일을 읽어 Base64로 변환하는 것은 모든 언어에서 표준 라이브러리로 쉽게 구현할 수 있습니다.