이미지 Base64 변환기 — 이미지를 즉시 인코딩
이미지를 업로드하거나 URL을 붙여넣어 즉시 Base64 인코딩을 받으세요. Data URL, HTML img 태그, CSS 배경 또는 Markdown으로 복사하세요. 모든 처리는 브라우저에서 수행되며 업로드되지 않습니다.
여기에 이미지를 드롭하세요
또는 클릭하여 선택 — JPG, PNG, WebP, GIF 모두 지원
이미지를 Base64로 변환하는 이유
단일 파일 전송
이미지를 HTML 또는 CSS에 직접 포함하고 별도의 HTTP 요청을 제거하세요. Base64로 인코딩된 이미지는 문서의 일부로 이동하여 네트워크 호출을 줄이고 자산 관리를 간소화합니다.
이메일 템플릿
이메일 클라이언트는 외부 이미지를 차단하고 첨부 파일을 다르게 처리합니다. Base64 인라인 이미지는 끊어진 이미지 링크 없이 Gmail, Outlook, Apple Mail 전체에 걸쳐 일관되게 표시됩니다.
100% 비공개
이미지가 브라우저를 벗어나지 않습니다. 변환기는 완전히 FileReader 및 Canvas API를 사용하여 실행되며 모든 것은 로컬에 유지됩니다. 업로드, 서버, 개인 정보 보호 문제 없음.
즉각적인 인코딩
업로드나 처리를 기다릴 필요가 없습니다. Base64 인코딩은 컴퓨터에서 밀리초 만에 일어납니다. 결과를 복사하여 코드에 바로 붙여넣으세요.
이 도구 사용 방법
입력 방법 선택
장치에서 이미지 파일을 업로드하거나 URL을 붙여넣으세요. 업로드 옵션은 브라우저가 지원하는 모든 이미지 형식(JPG, PNG, WebP, GIF, SVG)을 처리합니다. URL 모드는 웹에서 공개적으로 접근 가능한 이미지를 가져오지만 CORS 제한으로 인해 일부 소스가 로드되지 않을 수 있습니다.
출력 구성
Data URL 접두사(`data:image/png;base64,` 부분)를 포함할지 결정하세요. 대부분의 사용 사례에서는 이 부분이 필요하지만 순수한 인코딩 문자열만 원한다면 해당 옵션을 선택 취소하세요. 76자에서 줄 바꿈을 하는 것은 이메일 첨부 파일과 MIME 표준에 유용하지만 웹 애플리케이션은 일반적으로 이를 생략합니다.
복사 또는 다운로드
변환을 클릭하면 Base64 문자열이 즉시 나타납니다. 즉시 복사하거나 안전하게 텍스트 파일로 다운로드하세요. 포맷 버튼은 Data URL이 미리 채워진 상태로 붙여넣기 준비가 된 HTML img 태그, CSS background-image 선언 또는 Markdown 이미지 구문을 제공합니다.
Base64를 언제 사용하고 (언제 사용하지 말아야) 할까요?
좋음: 작은 아이콘 및 UI 요소
파비콘, 소셜 미디어 아이콘, 상태 표시기 — 10KB 미만이면 아주 좋습니다. Base64 문자열은 인라인으로 편안하게 맞아 HTTP 요청을 절약합니다. 브라우저가 CSS 파일을 기다렸다가 각 배경 이미지를 다시 기다리는 워터폴 지연을 방지할 수 있습니다.
좋음: 이메일 템플릿 및 뉴스레터
이메일 클라이언트는 외부 이미지를 차단하는 데 공격적입니다. Base64 이미지는 별도의 자산이 아닌 메시지 본문의 일부이기 때문에 안정적으로 렌더링됩니다. 이 때문에 홍보 이메일에서 깨진 링크로 표시되지 않고 실제로 표시되는 로고 이미지를 볼 수 있습니다.
나쁨: 큰 사진 및 배경 이미지
Base64 인코딩은 파일 크기를 약 33% 증가시킵니다. 100KB 사진은 133KB 문자열이 됩니다 — 브라우저 파싱 오버헤드를 고려하기 전의 크기입니다. 작은 자산을 넘어선 경우 외부 이미지 파일이 더 효율적입니다. 별도로 캐시되고 gzip 압축으로 전송되며 HTML이나 CSS를 부풀리지 않습니다.
나쁨: 자주 변경되는 이미지
사용자 아바타, 동적으로 생성되는 콘텐츠 또는 사용자마다 업데이트되는 모든 것은 외부 URL로 유지되어야 합니다. Base64 문자열은 세밀하게 캐시하기가 어렵습니다 — 이미지를 변경한다는 것은 전체 HTML 파일을 다시 배포한다는 것을 의미합니다. 외부 이미지를 사용하면 자산을 독립적으로 업데이트하고 CDN 캐싱을 활용할 수 있습니다.
자주 묻는 질문
이 도구가 내 이미지를 어딘가로 업로드하나요?
아니요. 모든 작업은 브라우저에서 FileReader 및 Canvas API를 사용하여 일어납니다. 이미지는 로컬에서 처리되며 컴퓨터를 떠나지 않습니다. 페이지가 로드된 후 오프라인에서도 작동하는 이유입니다.
Data URL과 원시 Base64의 차이점은 무엇인가요?
Data URL에는 `data:image/png;base64,`와 같은 접두사와 그 뒤에 인코딩된 문자열이 포함됩니다. 이것은 브라우저에게 데이터 유형과 인코딩을 알려줍니다. 원시 Base64는 접두사 없이 인코딩된 문자만 있는 것입니다. 웹 개발에는 Data URL을 사용하고 문자열만 예상하는 시스템에는 원시 Base64를 사용하세요.
왜 줄 바꿈을 사용하나요?
76자에서의 줄 바꿈은 이메일 첨부 파일 및 일부 레거시 시스템을 위한 MIME 표준입니다. 최신 웹 애플리케이션에서는 필요하지 않습니다 — 실제로 줄 바꿈을 하지 않은 문자열이 약간 더 작습니다. 이메일 템플릿에 이미지를 포함하거나 줄 바꿈이 필요한 시스템과 작업하는 경우에만 줄 바꿈을 활성화하세요.
어느 웹사이트에서든 URL을 붙여넣을 수 있나요?
서버가 교차 출처(cross-origin) 요청을 허용하는 경우에만 가능합니다. 많은 웹사이트가 핫링킹을 차단하고 CORS 헤더를 보내지 않아 브라우저가 이미지 데이터를 읽지 못하게 합니다. URL 모드가 실패하면 이미지를 다운로드하여 업로드 옵션을 대신 사용해 보세요.
얼마나 큰 이미지를 변환할 수 있나요?
기술적으로 브라우저는 매우 큰 이미지를 처리할 수 있지만 Base64 문자열은 33% 커져서 다루기 어려워집니다. 5MB 이미지는 6.7MB 텍스트 문자열이 됩니다 — 수백만 개의 문자입니다. 실용적인 목적을 위해 이미지를 500KB 미만으로 유지하세요. 큰 사진과 배경은 외부 이미지 파일로 남겨두어야 합니다.
Base64 인코딩이 애니메이션 GIF에서도 작동하나요?
예. 인코더는 모든 프레임과 타이밍 데이터를 포함하여 파일 전체를 보존합니다. `` 태그에 Data URL을 포함하면 원본 GIF처럼 애니메이션이 재생됩니다. PNG 투명도와 WebP 기능도 마찬가지입니다 — 인코딩 과정에서 아무것도 손실되지 않습니다.
자주 묻는 질문
Base64 인코딩은 어디에 사용되나요?
Base64 인코딩은 이진 이미지 데이터를 HTML, CSS 또는 JavaScript에 직접 포함할 수 있는 텍스트 형식으로 변환합니다. 일반적인 용도: HTTP 요청 없이 CSS에 작은 아이콘 포함, 단일 파일 HTML 페이지용 데이터 URI 생성, 데이터베이스에 텍스트로 이미지 저장, Base64 입력을 허용하는 API 작업.
원본에 비해 Base64 출력의 크기가 얼마나 커지나요?
Base64 인코딩은 원본 이진 파일에 비해 파일 크기를 약 33% 증가시킵니다. 작은 이미지(10KB 미만)의 경우 포함의 편의를 위해 이 오버헤드는 허용됩니다. 더 큰 이미지의 경우 Base64는 비효율적입니다 — 20KB가 넘는 파일 크기에는 URL을 통해 로드하는 것이 더 낫습니다.
한 번에 여러 이미지를 Base64로 변환할 수 있나요?
예, 여러 이미지를 업로드하면 각각 개별적으로 Base64로 변환됩니다. 모든 결과는 쉽게 가져올 수 있도록 복사 버튼과 함께 표시됩니다. 이는 단일 프로젝트에서 다른 아이콘이나 에셋을 위해 여러 Base64 문자열이 필요할 때 특히 유용합니다.
Base64 출력 형식은 무엇인가요?
출력에는 데이터 URI 접두사(예: 'data:image/png;base64,...')가 포함되어 있으므로 HTML src 속성, CSS background-image 속성 또는 JavaScript Image 개체에서 즉시 문자열이 작동합니다. 완전한 문자열을 붙여넣기만 하면 됩니다 — 형식 지정이 필요하지 않습니다.