UltKit
이미지11
이미지 변환이미지 용량 줄이기이미지 크기 조절사진 자르기이미지 PDF 변환증명사진 만들기이미지 SVG 변환이미지 도구 전체 →
PDF13
PDF 압축PDF 변환PDF 이미지 변환PDF 합치기PDF 나누기PDF 암호 해제PDF 암호 설정PDF 도구 전체 →
문서·데이터7
PDF로 변환문서 변환이미지 텍스트 추출(OCR)이미지 엑셀 변환데이터 변환전자책 변환문서·데이터 도구 전체 →
동영상6
동영상 변환영상 용량 줄이기동영상 음원 추출동영상 GIF 변환동영상 자르기오디오 동영상 변환동영상 도구 전체 →
오디오4
오디오 변환오디오 용량 줄이기MP3 자르기음성 텍스트 변환오디오 도구 전체 →
기타 도구22
QR 코드 생성ZIP 파일 만들기온라인 압축 풀기시간대 변환기단위 변환기비밀번호 생성기글자 수 세기컬러 피커기타 도구 전체 →
블로그이용 방법

이미지 Base64 변환

이미지 파일을 HTML, CSS, JSON 요청, 마크다운 파일에 붙여 넣을 수 있는 텍스트 한 줄로 바꿉니다. 앞에 data URI 접두사가 이미 붙어 있어 붙여 넣는 즉시 작동합니다.

데이터 변환

또는 CSV, TSV, TXT … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    이미지 추가

    PNG, JPG, GIF, WebP, SVG 파일을 업로드 영역에 끌어다 놓으십시오. 한 번에 최대 20개, 파일당 95 MB까지 가능합니다.

  2. 2

    접두사 유지 또는 제거

    Data URI 접두사가 켜져 있어 결과는 data:image/png;base64, 또는 해당 형식에 맞는 접두사로 시작합니다. API가 순수 Base64 문자열을 요구하면 고급 설정에서 끄십시오.

  3. 3

    변환 후 복사

    Base64 텍스트로 변환을 누르면 이미지마다 .txt 파일이 하나씩 다운로드되며, 바로 코드에 붙여 넣을 수 있습니다.

이미지를 업로드하고 Base64 텍스트로 변환을 누르십시오. 파일이 data:image/…;base64,로 시작하는 일반 문자로 인코딩되어 img src나 CSS url()에 바로 넣을 수 있습니다. 그림 자체는 전혀 바뀌지 않습니다.

이미지를 Base64로 바꾸면 쓸모 있는 곳

Base64는 RFC 4648(2006)에 정의되어 있으며, 바이너리 데이터 3바이트를 A–Z, a–z, 0–9, +, /로 이루어진 64자 알파벳의 문자 4개로 옮깁니다. 그 결과는 텍스트용으로 만들어진 어떤 경로로도 손상 없이 전달됩니다. 1998년 Larry Masinter가 RFC 2397로 정리한 data URI 스킴은 브라우저가 그 텍스트를 파일처럼 다루게 해 줍니다.

프런트엔드 개발자는 작은 아이콘, 로딩 스피너, 자리표시 이미지를 인라인으로 넣어 추가 요청 없이 페이지가 그려지게 합니다. 백엔드 개발자는 비전·OCR 서비스를 포함해 많은 API가 이미지를 Base64 필드로 받기 때문에 JSON 안에 이미지를 넣어 보냅니다. 테스터는 픽스처를 소스 코드에 보관하고, 단일 파일 HTML 보고서나 마크다운 노트를 만드는 사람은 스크린샷을 포함시켜 이메일로 보내거나 보관할 때도 파일 하나로 완결되게 합니다.

이미지 Base64 변환 결과의 모습

img 태그 안에 data URI로 넣은 1 × 1 투명 PNG(68바이트)
<!-- 1 × 1 투명 PNG --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="">

PNG 아이콘 파일

24 KB

일반적인 툴바 아이콘 세트, 96 × 96 px

용량 +33%, 화질 변화 없음

Base64 텍스트

32 KB

3바이트당 문자 4개, 여기에 접두사

ANY I

모든 이미지

이 도구는 JPG, PNG, WebP, HEIC, GIF, BMP, TIFF 등 일반적인 이미지 형식을 받습니다. 형식은 파일에서 자동으로 감지되므로 어떤 종류의 이미지인지 몰라도 됩니다.

Any image 변환

BASE64

Base64 인코딩 텍스트

Base64는 RFC 4648에 정의된 인코딩 방식으로, 어떤 바이너리 데이터든 안전한 텍스트 문자 64종으로 이루어진 문자열로 바꿉니다. HTML과 CSS에 이미지를 data URI로 넣거나, 이메일에 파일을 첨부하거나, JSON이나 XML로 바이너리 데이터를 보낼 때 쓰입니다. 인코딩은 완전히 되돌릴 수 있지만 데이터가 약 33% 커집니다. Base64는 암호화가 아니며 보안 기능도 없어 누구나 디코딩할 수 있습니다.

압축 방식
무손실
투명도
–
애니메이션
–
도입 연도
–
BASE64 변환

이미지를 텍스트만 담을 수 있는 곳에 실어 보내야 할 때 Base64 텍스트로 바꿉니다. 별도 요청 없이 쓰는 HTML·CSS 파일, API 호출의 JSON 필드, 테스트 픽스처, 단일 파일 보고서가 그런 경우입니다.

이미지 인라인이 페이지에 도움이 될 때와 해가 될 때

인라인으로 넣으면 요청이 하나 줄어듭니다. 이는 브라우저가 사이트당 몇 개의 연결만 열던 HTTP/1.1 시절에 가장 중요했습니다. HTTP/2와 HTTP/3의 멀티플렉싱에서는 작은 요청이 늘어나도 부담이 적으므로 이점은 줄고 비용은 그대로 남습니다. 인코딩된 이미지는 따로 캐시될 수 없고, HTML이나 CSS가 바뀔 때마다 다시 다운로드되며, 자신이 들어 있는 파일의 파싱을 늦춥니다.

합리적인 기준은 로고나 아이콘 스프라이트처럼 모든 페이지에 나오는 몇 킬로바이트짜리 이미지만 인라인으로 넣고 나머지는 파일로 제공하는 것입니다. 사진을 인라인으로 넣을 일은 거의 없습니다. 실제로 필요한 것이 텍스트가 아니라 다른 파일 형식이라면 이미지 변환을 쓰십시오.

Base64 이미지의 장점

  • HTML, CSS, JSON 파일 하나로 완결
  • 작은 아이콘에 추가 요청 불필요
  • JSON, XML 등 텍스트 형식 안에서도 안전
  • 무손실이며 되돌릴 수 있음

Base64 이미지의 단점

  • 바이너리 파일보다 약 33% 큼
  • 브라우저가 따로 캐시하지 않음
  • 많은 이메일 클라이언트에서 이미지 차단
  • 코드 diff에서 검토하기 어려움

이미지 Base64 변환 자주 묻는 질문

Base64와 data URI는 무엇이 다른가요?

Base64는 인코딩된 문자 자체일 뿐입니다. data URI는 그 문자 앞에 스킴과 형식, 즉 data:image/png;base64,를 붙여 브라우저가 어떻게 디코딩해 표시할지 알게 합니다. HTML과 CSS에는 전체 data URI가 필요하고, 대부분의 JSON API는 순수 Base64 부분만 원합니다.

이미지를 Base64로 바꾸면 용량이 얼마나 커지나요?

Base64는 3바이트마다 문자 4개를 쓰므로 텍스트는 파일보다 약 3분의 1 커지고, 여기에 짧은 접두사가 더해집니다. 30 KB PNG는 약 40 KB 텍스트가 됩니다. HTML이나 CSS를 gzip으로 압축해 전송하면 늘어난 양의 일부는 전송 과정에서 되찾습니다.

이메일 서명에 Base64 이미지를 쓸 수 있나요?

믿을 만하지 않습니다. Gmail은 data URI 이미지를 표시하지 않고, 여러 데스크톱 메일 프로그램도 이를 제거하므로 받는 사람에게는 깨진 아이콘이 보입니다. 이미지를 웹 서버에 올리거나 첨부하고, Base64는 웹 페이지와 앱에만 쓰십시오.

SVG 아이콘도 Base64로 인코딩해야 하나요?

가능은 하지만 SVG는 이미 텍스트입니다. 마크업을 Base64 대신 URL 인코딩하면 보통 data URI가 더 짧아지고 읽기도 쉽습니다. 작은 아이콘보다 큰 것이라면 브라우저가 캐시할 수 있는 별도 SVG 파일이 낫습니다.

Base64 텍스트를 다시 이미지로 바꿀 수 있나요?

가능합니다. 인코딩은 무손실이고 완전히 되돌릴 수 있어 디코딩하면 원래 바이트가 그대로 나옵니다. 모든 프로그래밍 언어에 디코더가 있고, 완전한 data URI를 브라우저 주소창에 붙여 넣으면 이미지가 표시됩니다.

인코딩하면 이미지 화질이 달라지나요?

아닙니다. Base64는 바이트를 적는 방식을 바꿀 뿐 픽셀은 건드리지 않습니다. 문자열을 짧게 하려면 먼저 이미지 용량 20KB로 줄이기 등으로 이미지를 줄인 다음, 작아진 파일을 인코딩하십시오.