KOEN

이미지 Base64 변환

IMAGE · BASE64 · DATA URI

이미지를 Base64 data URI·CSS·img 태그 코드로 바꾸고, Base64를 다시 이미지로 미리 보고 내려받아요.

파일은 서버로 전송되지 않아요. 인코딩·디코딩 모두 이 브라우저 안에서만 처리돼요.

output.txt 0 chars 
이미지를 불러오면 여기에 코드가 나와요.

언제 쓰면 좋을까요? 아이콘·작은 로고·로딩 이미지처럼 수 KB 이하의 이미지를 HTML·CSS·이메일 템플릿에 파일 없이 넣을 때 좋아요. Base64는 원본보다 약 33% 커지고 브라우저 캐시를 따로 못 쓰니 큰 사진에는 권하지 않아요.

HOW TO

사용 방법

  1. 이미지를 끌어다 놓거나 클릭해서 고르고, 복사해 둔 이미지는 Ctrl+V(⌘+V)로 바로 붙여넣어요.
  2. Data URI·Base64만·CSS background·HTML <img> 중 필요한 형식을 골라요.
  3. 원본 대비 몇 % 커지는지 확인한 뒤 복사하기를 눌러요. 레티나용 이미지는 '2x 이미지로 쓰기'를 켜면 CSS 크기가 절반으로 들어가요.
  4. 반대로 바꾸려면 'Base64 → 이미지' 탭에 코드를 붙여넣고, 미리보기를 확인한 뒤 다운로드해요.
PAIRS WELL WITH

같이 쓰기 좋은 도구

FAQ

자주 묻는 질문

이미지가 서버에 올라가나요?

아니요. 인코딩과 디코딩 모두 브라우저 안에서만 처리하고 파일을 어디에도 전송하지 않아요.

Base64로 바꾸면 왜 용량이 커져요?

Base64는 3바이트를 글자 4개로 표현해서 원본보다 약 33% 커져요. 그래서 10KB 이하의 아이콘·작은 로고처럼 이미지 요청을 하나 줄이는 이득이 더 큰 경우에 쓰는 게 좋고, 100KB가 넘으면 일반 이미지 파일을 권해요.

Data URI와 순수 Base64는 뭐가 달라요?

Data URI는 앞에 'data:image/png;base64,' 같은 형식 정보가 붙어 있어 img src나 CSS url()에 그대로 넣을 수 있어요. 순수 Base64는 그 접두어 없이 데이터만 있어서 API나 JSON에 넣을 때 써요.

Base64 코드만 있는데 어떤 이미지 형식인지 몰라도 되나요?

네. 데이터 앞부분을 읽어 PNG·JPG·GIF·WebP·SVG·BMP·ICO·AVIF를 알아서 판별하고 맞는 확장자로 내려받아요. 줄바꿈·공백, URL-safe 문자(-, _), CSS의 url("…") 감싸기도 자동으로 정리해요.