- 이미지 → Base64: 이미지를 선택하면 data URI 문자열이 만들어집니다. 복사해 코드에 붙여넣습니다.
- Base64 → 이미지: data URI나 Base64 문자열을 붙여넣으면 미리보기가 뜨고 이미지로 저장할 수 있습니다.
- 탭으로 두 방향을 오갈 수 있습니다.
이미지를 글자로 바꿔 코드 안에 직접 넣는 Base64 인라인은 외부 파일 요청을 없애 주지만, 모든 이미지에 좋은 방법은 아닙니다. 용량이 약 33% 늘기 때문에 쓰임새를 가려야 합니다.
- 잘 맞는 경우: 16~64px 아이콘·로고, 단일 HTML 파일로 배포할 자료, 요청 수를 줄이고 싶은 작은 그래픽.
- 피할 경우: 사진처럼 큰 이미지. 코드가 수십 KB로 길어지고 캐싱도 안 돼 오히려 느려집니다.
- 캐싱 차이: 일반 파일은 브라우저가 한 번 받아 두면 재사용하지만, 인라인 Base64는 그 문서를 받을 때마다 함께 내려받습니다.
쓸 곳과 피할 곳은 Base64 데이터 URI 가이드에 더 자세히 정리했습니다.
- 작은 이미지에만: 16~64px 아이콘이나 로고처럼 작은 이미지에 쓰면 외부 파일 요청을 줄일 수 있습니다. 큰 사진은 코드가 길어져 비효율적입니다.
- CSS에 바로: 'CSS background 복사'를 누르면 background-image 구문이 함께 복사되어 스타일시트에 즉시 붙여넣을 수 있습니다.
- SVG도 가능: 단순한 SVG 아이콘도 Base64로 만들어 두면 단일 HTML 파일 안에서 외부 의존 없이 표시할 수 있습니다.
Base64 data URI는 이미지를 별도 파일 없이 코드 안에 글자로 직접 넣을 수 있게 해 줍니다. CSS의 background-image나 HTML의 img src에 그대로 붙이면 외부 파일 요청 없이 작은 아이콘·로고를 표시할 수 있어, 요청 수를 줄이거나 단일 파일로 배포할 때 유용합니다.
네. Base64로 인코딩하면 원본보다 약 33% 정도 용량이 커집니다. 그래서 작은 아이콘이나 로고에는 적합하지만, 큰 사진을 Base64로 넣으면 코드가 지나치게 길어지고 느려질 수 있습니다. 큰 이미지는 일반 파일로 두는 편이 좋습니다.
아니요. 인코딩과 디코딩 모두 사용자의 브라우저 안에서 이뤄지며, 이미지나 Base64 문자열은 서버로 전송되거나 저장되지 않습니다. 민감한 이미지도 안심하고 변환할 수 있습니다.
Base64는 이미지의 이진 데이터를 글자로 바꾼 순수 문자열이고, data URI는 그 앞에 'data:image/png;base64,' 같은 머리말을 붙여 브라우저가 어떤 형식인지 바로 알 수 있게 만든 형태입니다. CSS나 HTML에 그대로 넣어 표시하려면 머리말이 붙은 data URI가 필요합니다. 이 도구에서 '이미지 → Base64'로 만든 결과는 머리말이 포함된 data URI라 복사해 바로 붙여 쓸 수 있습니다.
문자열 중간에 줄바꿈이나 공백이 섞였거나, 일부만 복사되어 잘렸을 때 디코딩에 실패할 수 있습니다. 또 머리말 없이 순수 Base64만 붙여넣으면 형식을 알 수 없어 표시되지 않을 수 있습니다. 전체 문자열을 빠짐없이 복사하고, 가능하면 'data:image/...;base64,'로 시작하는 data URI 전체를 붙여넣으면 대부분 해결됩니다.