Base64 이미지 변환

쓰는 법은 간단해요

이미지 → Base64 (인코딩)

1. 이미지 올리기 - 파일을 드래그하거나 클릭해서 선택하세요.
2. 형식 고르기 - Data URI / Raw Base64 / CSS Background / HTML img 중에 필요한 걸로요.
3. 복사 - 옆에 붙은 복사 버튼 한 번 눌러서 붙여넣기만 하면 끝.

Base64 → 이미지 (디코딩)

1. 문자열 붙여넣기 - Raw Base64든 data:image/... 형태든 다 받습니다.
2. 변환 - 버튼 누르면 바로 이미지가 떠요.
3. 저장 - PNG나 JPG로 받을 수 있어요.

이 변환기의 특징

• 한 페이지에서 양방향 - 인코딩·디코딩 사이트 따로 안 찾아다녀도 돼요.
• 출력 4종 - Data URI, Raw Base64, CSS background, HTML img 태그까지 바로 쓸 수 있는 형태로 나옵니다.
• 파일 정보 표시 - 원본 크기, Base64로 변환 후 늘어난 용량, 해상도, 증가율을 한눈에 보여줘요.
• 서버 안 거쳐요 - 모든 처리는 브라우저에서 끝납니다. 민감한 이미지라도 안심하고 올리세요.
• 자동 포맷 감지 - 디코딩할 때 PNG인지 JPG인지 GIF인지 WebP인지 알아서 판별해요.

주의할 점

• Base64로 바꾸면 용량이 약 33% 늘어나요. 10KB 이하 아이콘·로고에 적합하고, 1MB 넘는 사진은 문자열이 너무 길어져서 실용성이 떨어집니다.
• 대용량 이미지를 억지로 변환하면 브라우저가 잠깐 버벅일 수 있어요.

이미지와 Base64, 양쪽으로 오가기

작은 로고나 아이콘을 CSS·HTML 안에 바로 박아 넣고 싶을 때, 그리고 반대로 API 응답에서 받아온 긴 문자열이 대체 어떤 이미지인지 눈으로 확인하고 싶을 때 쓰는 도구예요.

Base64는 이미지 같은 바이너리 파일을 A~Z, 0~9 같은 문자로 풀어낸 포맷이라서 텍스트만 들어가는 JSON이나 CSS 파일에도 이미지를 통째로 끼워 넣을 수 있거든요. 대신 용량이 33% 정도 늘어나기 때문에 아이콘급 작은 파일에만 쓰는 게 좋아요.

이럴 때 열어보세요

• 프런트엔드 개발자 - SVG 아이콘을 CSS에 inline 처리해서 HTTP 요청 줄이고 싶을 때
• 이메일 작업 - 이미지 호스팅 없이 HTML 메일에 썸네일 넣고 싶을 때
• API 디버깅 - 서버가 뱉은 Base64 문자열이 깨진 건지 멀쩡한 건지 확인
• 일반 사용자 - 누가 보내준 Base64 코드가 뭔지 궁금할 때

다른 Base64 사이트랑 뭐가 다른가요