이미지 → Base64

이미지 → Base64 인코더란

이미지 파일을 data:image/png;base64,iVBORw0KGgo... 형태의 data URI 문자열로 바꿔 줍니다. 이렇게 만든 문자열은 별도 이미지 파일 없이도 HTML의 <img src>나 CSS의 background-image: url(...)에 그대로 붙여 넣어 화면에 표시할 수 있습니다. 이 페이지는 업로드 없이 브라우저 안에서만 변환하므로, 선택한 이미지가 서버로 전송되지 않습니다.

사용법

이미지 파일을 선택하거나 영역에 끌어다 놓거나 붙여넣기(Ctrl+V)하면 즉시 변환됩니다. 결과는 data:로 시작하는 완성형 data URI 한 가지로, 결과 상자에 그대로 표시됩니다. 이 문자열을 그대로 <img src>나 CSS url()에 붙여 넣으면 됩니다. 복사 버튼으로 전체를 클립보드에 담아 HTML·CSS·JSON·마크다운 어디든 붙여 넣을 수 있습니다. PNG, JPG, GIF, WebP, SVG 등 브라우저가 읽는 형식이면 MIME 타입(image/png 등)을 자동으로 감지해 URI 앞부분에 넣습니다.

작동 원리와 용량 계산

Base64는 3바이트(24비트)를 4개의 문자로 나눠 표현합니다. 그래서 인코딩 후 문자열 길이는 원본보다 약 33% 커집니다. 예를 들어 3KB 아이콘은 문자열로 약 4KB가 됩니다. 끝에 붙는 =는 3의 배수를 맞추기 위한 패딩입니다. 원본 크기를 미리 가늠하려면 대략 원본바이트 × 4 ÷ 3로 계산하면 됩니다.

이럴 때 씁니다

작은 아이콘·로고·1px 배경 패턴을 CSS에 인라인으로 넣어 HTTP 요청 수를 줄일 때, 외부 이미지 링크가 막히거나 CORS 문제가 있는 환경에서 이미지를 코드에 내장할 때, 단일 HTML 파일 하나로 이미지까지 포함해 배포·전달할 때, 또는 SVG 파비콘이나 이메일 서명용 작은 이미지를 문자열로 심을 때 유용합니다.

팁

data URI는 브라우저가 별도로 캐시하지 않고 HTML·CSS와 함께 매번 내려받습니다. 따라서 큰 사진에 쓰면 파일이 무거워지고 오히려 느려집니다. 대체로 5~10KB 이하의 작은 이미지에만 쓰는 것이 좋습니다. SVG는 Base64 대신 URL 인코딩 방식이 더 짧아지는 경우가 많으니 상황에 맞게 선택하세요. 여러 곳에서 재사용하는 큰 이미지는 그냥 파일 링크로 두는 편이 캐시 측면에서 유리합니다.

자주 묻는 질문