이미지 Base64 변환 data uri

이 도구가 하는 일

data URI는 이미지를 별도 파일이 아니라 문자열로 문서 안에 직접 넣는 방법입니다. HTML의 img 태그나 CSS의 background-image에 data:image/png;base64, 로 시작하는 문자열을 넣으면 브라우저가 그것을 이미지로 해석합니다.

이 방식의 장점은 요청이 줄어든다는 것입니다. 작은 아이콘 하나를 위해 별도 HTTP 요청을 보내지 않아도 되고, 이메일 템플릿이나 단일 HTML 파일처럼 외부 파일을 참조하기 어려운 환경에서도 이미지를 함께 담을 수 있습니다.

대신 크기가 커집니다. Base64는 3바이트를 4문자로 표현하므로 결과가 원본보다 약 33% 늘어납니다. 이 도구는 변환 후 원본 대비 얼마나 커졌는지 함께 보여줍니다. 반대 방향으로, 코드에서 발견한 긴 data URI가 실제로 어떤 이미지인지 확인하는 용도로도 사용할 수 있습니다.

언제 사용하나요

작은 아이콘을 CSS에 인라인으로 넣을 때, 이메일 템플릿에 이미지를 포함할 때, 단일 HTML 파일로 배포할 문서를 만들 때, 코드에 들어 있는 정체불명의 data URI가 어떤 이미지인지 확인할 때 사용합니다.

입력과 출력 예시

주의사항

data URI는 작은 이미지에만 적합합니다. 파일이 크면 문서 자체가 무거워져 첫 화면이 늦게 뜨고, 브라우저 캐시의 이점도 사라집니다. 같은 이미지를 여러 페이지에서 쓴다면 별도 파일로 두는 편이 낫습니다. 대략 몇 킬로바이트 이하의 아이콘 정도가 적당한 기준입니다. 또한 data URI로 넣은 이미지는 검색엔진이 개별 이미지로 인식하기 어려우므로, 이미지 검색 노출이 필요한 콘텐츠에는 사용하지 마십시오. 모든 처리는 브라우저에서 이루어지며 파일은 업로드되지 않습니다.

자주 묻는 질문