📸 Data URI 생성기 | 이미지를 base64 변환

이미지 파일 (PNG·JPEG·GIF·WebP·BMP·ICO·SVG)

선택한 파일은 브라우저의 FileReader 로 이 페이지 안에서만 읽습니다. 서버로 올리지 않고 어디에도 보내지 않습니다.

추론한 MIME 타입

-

판단 근거 (시그니처 바이트)-

브라우저가 보고한 형식-

파일 이름-

원본 크기-

base64 길이-

Data URI 전체 길이-

원본 대비 증가율-

Data URI

Data URI 를 쓸 때 잃는 것

base64 는 3바이트를 4글자로 바꾸므로 본문이 원본보다 약 33% 커집니다. 여기에 data:MIME;base64, 접두사 길이가 더 붙습니다. 화면의 증가율은 실제 계산값입니다.

별도 파일이 아니므로 브라우저가 따로 캐시할 수 없습니다. 같은 이미지를 여러 페이지에서 쓰면 그만큼 HTML·CSS 가 매번 다시 내려갑니다. CSS 파일에 넣으면 그 CSS 가 커져 첫 렌더가 늦어질 수 있고, 이미지를 교체할 때마다 코드를 다시 배포해야 합니다.

브라우저 안에서만 처리합니다

이미지 파일을 고르면 브라우저의 FileReader 로 바이트를 읽어 base64 로 바꾸고 Data URI 를 만들어 줍니다. 서버로 올리지 않고 어디에도 보내지 않으므로 네트워크가 끊긴 상태에서도 동작합니다. 바로 붙여 쓸 img 태그와 CSS background-image 한 줄도 함께 만들고, 각각 복사 버튼을 둡니다.

MIME 타입은 파일 앞부분으로 판단합니다

확장자가 아니라 파일 맨 앞의 시그니처 바이트를 보고 형식을 가립니다. PNG 는 89 50 4E 47, JPEG 는 FF D8 FF, GIF 는 47 49 46 38, WebP 는 RIFF 뒤 8바이트 위치의 WEBP, BMP 는 42 4D, ICO 는 00 00 01 00 이며 SVG 는 텍스트 시작 부분을 봅니다. 어느 근거로 판단했는지 화면에 바이트째 적어 두고, 시그니처를 못 찾으면 브라우저가 보고한 형식을 쓴 사실을 따로 표시합니다. 2026년 10월 기준입니다.

커지고 캐시되지 않는다는 점

base64 는 3바이트를 4글자로 바꾸므로 본문이 약 33% 커지고 접두사 길이가 더 붙습니다. 또 별도 파일이 아니어서 브라우저가 따로 캐시하지 못해, 같은 이미지를 여러 페이지에서 쓰면 그만큼 매번 다시 내려갑니다. 이 도구는 2MB까지만 처리하고 이미지 크기를 줄이거나 다시 인코딩하지 않습니다.

자주 묻는 질문

고른 이미지가 서버로 올라갈까?

아닙니다. 브라우저의 FileReader 로 이 페이지 안에서만 읽습니다. 파일은 서버로 전송되지 않고 어디에도 저장되지 않습니다.

왜 원본보다 33%쯤 커질까?

base64 는 3바이트를 4글자로 바꾸는 방식이라 길이가 3분의 4가 되고, 여기에 data:MIME;base64, 접두사가 더 붙습니다. 화면에 실제 증가율을 계산해 보여 줍니다.

이 도구가 하지 않는 일은 무엇일까?

이미지를 줄이거나 품질을 다시 인코딩하지 않고, Data URI 를 다시 파일로 되돌리는 일도 하지 않습니다. 형식 판단과 base64 변환까지만 합니다.

📸Data URI(Base64 이미지) 생성기

관련된 도구

Base64 변환기

SVG to Base64 변환기

브라우저 안에서만 처리합니다

MIME 타입은 파일 앞부분으로 판단합니다

커지고 캐시되지 않는다는 점

자주 묻는 질문

관련된 도구

Base64 변환기

SVG to Base64 변환기

브라우저 안에서만 처리합니다

MIME 타입은 파일 앞부분으로 판단합니다

커지고 캐시되지 않는다는 점

자주 묻는 질문

같은 카테고리 도구