이미지 도구

이미지를 Base64로 변환

이미지를 CSS나 HTML에 바로 붙여 넣을 수 있는 데이터 URI로 바꿉니다.

이미지를 Base64로 변환 기기에서 실행됩니다

파일을 여기에 놓거나 클릭해서 선택

작은 JPG 또는 PNG

업로드되지 않음

작동 방식

데이터 URI는 별도 파일을 참조하는 대신 이미지를 소스 코드에 직접 넣습니다. 그러면 네트워크 요청이 하나 줄어들며, 작은 이미지마다 왕복 한 번씩 드는 경우에 의미가 있습니다.

작은 아이콘, 로고, 단색 그래픽에 적합합니다. 대략 2 KB 미만이면 줄어드는 요청 쪽이 보통 비용보다 큽니다. 그보다 크면 일반 파일 참조가 낫습니다.

Base64는 3바이트를 4개의 문자로 인코딩하므로 데이터 URI는 파일보다 약 33% 큽니다. 또한 별도로 캐시할 수 없어서, 이를 포함하는 스타일시트나 페이지를 받을 때마다 다시 내려받게 됩니다.

CSS의 url()이나 img의 src 속성에 바로 넣으면 됩니다. 결과에는 올바른 미디어 유형 접두사가 이미 들어 있습니다.

자주 묻는 질문

크기 제한이 있는 이유는 무엇인가요?

데이터 URI는 소스 코드에 넣는 용도이며, 아주 큰 데이터 URI는 이를 포함하는 모든 페이지를 무겁게 만듭니다. 제한은 2 MB입니다.

SVG에도 사용할 수 있나요?

SVG는 텍스트이므로 Base64 없이 바로 삽입할 수 있고, 그 편이 더 작습니다.

이미지가 업로드되나요?

아니요. 인코딩은 브라우저에서 이루어집니다.