본문으로 건너뛰기
LifeTools

이미지 Base64 변환기

이미지를 Base64 문자열이나 data URL로 바꿉니다. CSS·HTML에 바로 붙일 형태로 주고, 파일이 얼마나 커지는지 함께 알려 줍니다.

광고

광고 자리

이렇게 계산돼요

Base64는 그림 파일의 바이트를 글자로만 이루어진 문자열로 바꾸는 방식입니다. 앞에 data:image/png;base64, 같은 머리말을 붙이면 그 자체가 이미지 주소가 되어, 별도 파일 없이 HTML이나 CSS 안에 그림을 넣을 수 있습니다. data URL 만들기는 이 머리말을 붙이는 것으로 끝납니다. 이 도구는 이미지를 읽어 그 문자열을 만들고, CSS 배경 이미지 인라인 삽입이나 img 태그 형태로 감싸 붙여 쓰기 좋게 줍니다. PNG·JPG는 물론 SVG도 같은 방식으로 다룹니다. 크기가 늘어난다는 점을 알아 두셔야 합니다. Base64는 3바이트를 4글자로 바꾸므로 원본보다 약 33% 커집니다. 10KB짜리 아이콘이 13KB가 되는 셈입니다. 그래서 파일을 하나 덜 불러오는 이득과 문서가 커지는 손해를 견줘 봐야 합니다. 이미지 인라인 삽입은 작은 아이콘에만 쓰는 것이 관례입니다. 큰 사진을 넣으면 HTML이나 CSS 파일이 그만큼 무거워지고, 이미지가 문서 안에 박혀 있어 따로 캐시되지 않습니다. 같은 그림을 여러 페이지에서 쓴다면 매번 다시 내려받는 셈이라 오히려 느려집니다. 이 도구는 10KB가 넘으면 그 사실을 알려 줍니다.

자주 묻는 질문

반대로 늘어납니다. 3바이트를 4글자로 바꾸는 방식이라 원본보다 약 33% 커집니다. 용량을 줄이려는 목적이라면 이미지 압축 도구를 쓰셔야 하고, Base64는 파일을 따로 두지 않고 문서 안에 넣기 위한 방식이라고 보시면 됩니다.

몇 KB짜리 작은 아이콘이나 한 곳에서만 쓰는 그림에는 좋습니다. 파일 요청이 하나 줄기 때문입니다. 반대로 큰 사진이나 여러 페이지에서 함께 쓰는 그림에는 맞지 않습니다. 문서 안에 박혀 있어 따로 캐시되지 않으므로 페이지마다 다시 내려받게 됩니다.

대체로 보이지 않습니다. 많은 메일 프로그램이 보안을 이유로 data URL 이미지를 막아 두기 때문입니다. 웹 페이지나 개발 중인 화면에서는 잘 동작하지만, 메일 본문에 넣을 그림은 파일로 첨부하거나 이미지 주소를 쓰는 편이 확실합니다.

올라가지 않습니다. 브라우저가 파일을 직접 읽어 변환하므로 어디로도 전송되지 않습니다. 아직 공개하지 않은 디자인 시안이나 사내 자료도 그대로 넣어 보실 수 있습니다.

광고

광고 자리

만든 문자열은 원본 이미지를 그대로 담고 있으므로, 공개된 곳에 붙이면 이미지도 함께 공개됩니다. 비공개 자료를 코드 저장소나 게시글에 올릴 때는 그 점을 유의하시기 바랍니다.