이미지를 Base64로 변환 - 즉시, 비공개, 복사 준비 완료.
JPG, PNG, WebP, GIF, SVG 파일을 Base64 데이터 URI, 원시 Base64 문자열 또는 임베딩 가능한 HTML img 태그로 변환하세요. 여러 파일 일괄 변환, 한 번의 클릭으로 클립보드에 복사. 업로드 없이, 서버 없이, 브라우저에서 실행됩니다.
Drop your images here
or browse files or paste from clipboard
온라인에서 이미지를 Base64로 변환하는 방법.
이미지 업로드
JPG, PNG, WebP, GIF 또는 SVG 파일을 업로드 영역에 드래그하세요. 일괄 변환을 위해 여러 파일을 선택하세요. 모바일에서는 탭하여 사진 라이브러리를 찾아보세요. Ctrl+V(Mac에서는 Cmd+V)로 클립보드에서 스크린샷을 붙여넣을 수도 있습니다.
형식 선택
각 이미지에는 세 가지 출력 탭이 있습니다. 데이터 URI는 CSS와 HTML용 전체 data:image/... 문자열을 제공합니다. 원시 Base64는 API 페이로드용 접두사 없는 인코딩된 문자열을 제공합니다. HTML 태그는 너비와 높이 속성이 있는 바로 붙여넣기 가능한 img 요소를 제공합니다.
클립보드에 복사
출력 아래의 복사 버튼을 클릭하여 전체 문자열을 클립보드에 복사하세요. 버튼이 짧은 "복사됨!" 확인을 표시합니다. CSS 파일, HTML 템플릿, API 요청 본문 또는 이메일 마크업에 직접 붙여넣으세요.
Base64 이미지를 사용하는 사람과 이유.
10 KB 미만의 CSS 배경 이미지
background-image: url(data:image/png;base64,...)로 CSS에 직접 임베딩된 작은 아이콘, 로딩 스피너, 장식용 점. 2 KB 스피너를 Base64로 만들면 스타일시트에 2.7 KB가 추가되지만 HTTP 요청 하나를 제거합니다. 8-12개의 작은 에셋을 로딩하는 사이트에서 인라인은 8-12번의 왕복을 절약하고 3G 연결에서 첫 렌더링 시간을 200-400 ms 줄입니다. Webpack과 Vite는 크기 임계값 미만의 가져오기에 대해 이를 자동으로 수행합니다(Vite에서 기본 4 KB).
이메일 HTML 템플릿
Gmail, Outlook, Apple Mail은 사용자가 "이미지 표시"를 클릭할 때까지 기본적으로 외부 이미지를 차단합니다. Base64 인라인 이미지는 그 프롬프트 없이 즉시 렌더링됩니다. 20 KB 미만의 로고, 소셜 아이콘, 구분선 그래픽은 인라인으로 잘 작동합니다. Gmail 클리핑을 피하기 위해 총 이메일 HTML을 102 KB 미만으로 유지하세요. Mailchimp, SendGrid, Amazon SES 모두 HTML 이메일 API에서 Base64 인라인 이미지를 지원합니다.
단일 파일 HTML 페이지
모든 이미지를 Base64로 임베딩하면 외부 종속성이 없는 자체 포함 HTML 파일이 생성됩니다. 오프라인 문서, 이식 가능한 보고서, Jupyter 노트북이나 Google 문서에서의 HTML 내보내기에 유용합니다. 10개의 인라인 썸네일이 있는 500 KB HTML 파일은 서버 없이 디스크에서 로드됩니다. 트레이드오프는 파일 크기입니다 - 외부 이미지와 HTTP/2 다중화가 있는 동일한 페이지는 네트워크를 통해 더 빠르게 로드됩니다.
API 페이로드와 JSON 필드
JSON 본문 필드에서 이미지 데이터를 받는 REST 및 GraphQL API는 JSON이 원시 바이너리를 포함할 수 없으므로 Base64가 필요합니다. OpenAI의 Vision API, Anthropic의 Messages API, Twilio MMS, Stripe 본인 인증 모두 Base64 인코딩 이미지를 허용합니다. 데이터 URI 접두사 없는 원시 Base64 형식이 대부분의 API가 기대하는 것입니다. 일반적인 페이로드 제한은 인코딩된 20 MB로, 원본 이미지 데이터 약 15 MB에 해당합니다.
Base64 vs 외부 파일 - 언제 어떤 것을 사용할지.
결정은 파일 크기와 맥락에 달려 있습니다. Base64는 모든 이미지에 33% 오버헤드를 추가합니다. 10 KB 아이콘은 13.3 KB 텍스트가 됩니다. 단일 작은 에셋의 경우 그 오버헤드는 HTTP 요청 비용(모바일 네트워크에서 100-300 ms의 지연 시간을 추가)보다 적습니다. 더 큰 이미지의 경우 수학이 뒤집힙니다 - 100 KB 사진은 HTML이나 CSS에 임베딩된 133 KB의 캐시 불가능한 텍스트가 됩니다.
10 KB 미만 - Base64 사용
파비콘, 1x1 추적 픽셀, 작은 UI 아이콘, 로딩 스피너, 간단한 로고. Base64 오버헤드(10 KB 파일에서 3.3 KB)는 별도 HTTP 요청의 TCP+TLS 핸드셰이크 비용보다 작습니다. Vite는 기본적으로 4 KB 미만의 가져오기를 인라인합니다. Webpack의 url-loader는 8 KB 임계값을 사용합니다. 성능 수학이 그 규모에서 인라인을 선호하기 때문에 둘 다 존재합니다.
10 KB 이상 - 외부 파일 사용
사진, 일러스트레이션, 히어로 이미지, 브라우저 캐싱의 이점을 받는 모든 것. 50 KB 외부 PNG는 첫 페이지 로드 후 캐시되어 이후 방문에서 0 바이트 비용이 듭니다. Base64로 인라인된 동일 이미지는 인라인 데이터가 독립적으로 캐시될 수 없으므로 매 페이지 로드마다 66.7 KB를 추가합니다. 서빙 전에 이미지 크기를 조절해야 한다면 먼저 그렇게 하여 파일 크기를 임계값 아래로 낮추세요.
이메일 템플릿 - 항상 Base64
이메일 클라이언트(Gmail, Outlook, Yahoo Mail, Apple Mail)는 기본적으로 외부 이미지 로딩을 차단합니다. 사용자가 "이미지 표시"를 클릭할 때까지 깨진 이미지 아이콘이 표시됩니다. Base64 인라인 이미지는 이를 완전히 우회하여 열 때 렌더링됩니다. 33% 크기 오버헤드는 이메일에 어차피 캐싱 메커니즘이 없으므로 가치가 있습니다 - 매번 열 때 전체 HTML을 다시 다운로드합니다. 개별 이미지는 20 KB 미만, 총 이메일 크기는 102 KB(Gmail의 클리핑 임계값) 미만으로 유지하세요.
다른 도구와 결합
최상의 결과를 위해 인코딩 전에 이미지를 최적화하세요. Base64로 변환하기 전에 파일 크기를 줄이려면 JPG 압축기를 사용하세요. 먼저 형식을 변환해야 한다면 JPG를 PNG로 변환기가 처리합니다. 인코딩 전에 여러 이미지를 하나로 합치려면 JPG 합치기를 사용하여 먼저 합치세요.
자주 묻는 질문.
Base64 인코딩이란 무엇인가요?
Base64는 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /)를 사용하여 바이너리 데이터를 텍스트로 표현하는 바이너리-텍스트 인코딩입니다. 바이너리 데이터 3바이트를 4개의 ASCII 문자로 변환합니다. 3 KB 아이콘은 4 KB 텍스트 문자열이 됩니다. 이 인코딩은 이메일(SMTP), JSON API, CSS url() 값, HTML 속성 등 많은 시스템이 원시 바이너리가 아닌 텍스트만 허용하기 때문에 존재합니다. Base64는 모든 파일을 안전한 텍스트 표현으로 변환하여 그 격차를 해소합니다.
외부 파일 대신 언제 Base64 이미지를 사용해야 하나요?
10 KB 미만의 이미지에 Base64를 사용하세요 - 파비콘, 작은 아이콘, 간단한 로고, 1x1 추적 픽셀, 작은 UI 요소. 이 크기에서는 HTTP 요청 오버헤드(DNS 조회, TCP 핸드셰이크, TLS 협상)가 Base64의 33% 크기 증가보다 비용이 더 높습니다. 10 KB 이상의 이미지에는 외부 파일이 더 좋습니다. 브라우저가 독립적으로 캐시하고, 병렬로 로드하며, CSS나 HTML을 부풀리지 않기 때문입니다. 이메일 HTML 템플릿은 예외입니다 - 이메일 클라이언트가 기본적으로 외부 이미지 로드를 차단하므로 항상 Base64로 인라인하세요.
Base64 문자열은 원본 파일보다 얼마나 더 큰가요?
Base64는 파일 크기를 정확히 33%(4/3 비율) 증가시키며 패딩 몇 바이트가 추가됩니다. 9 KB PNG는 12 KB Base64 문자열이 됩니다. 30 KB JPG는 40 KB 텍스트가 됩니다. 이 오버헤드는 Base64 문자열이 전송을 위해 gzip 압축되는 CSS나 HTML 파일 내에 있을 때 복합됩니다 - gzip은 부풀림의 일부를 회수하지만(보통 10-15%), 브라우저 DOM에서 디코딩된 크기는 여전히 전체 33% 더 큽니다. 데이터 URI의 경우 data:image/png;base64, 접두사에 20-30 바이트가 추가됩니다.
데이터 URI와 원시 Base64의 차이는 무엇인가요?
데이터 URI에는 브라우저에 데이터를 해석하는 방법을 알려주는 헤더가 포함됩니다: data:image/png;base64,iVBORw0KGgo... 헤더는 MIME 유형(image/png)과 인코딩(base64)을 지정합니다. 원시 Base64는 헤더 없이 인코딩된 문자열만 있습니다: iVBORw0KGgo... CSS background-image url() 값과 HTML src 속성에는 데이터 URI를 사용하세요. 데이터 URI 접두사 없이 페이로드를 기대하는 API에 이미지 데이터를 보낼 때나 MIME 유형이 별도로 추적되는 데이터베이스에 저장할 때는 원시 Base64를 사용하세요.
Base64 인코딩할 최대 이미지 크기는 얼마인가요?
CSS 임베딩에는 10 KB(원본 파일 크기) 미만으로 유지하세요. Google Lighthouse는 렌더 차단 CSS를 표시하며, 스타일시트 내 100 KB Base64 이미지는 모든 페이지 로드에 133 KB의 비압축 텍스트를 추가합니다. 인라인 HTML img 태그의 경우 20-30 KB가 합리적인 상한입니다 - 그 이상이면 HTML 문서가 빠른 First Contentful Paint에 너무 무거워집니다. 이메일 템플릿은 더 높게 갈 수 있지만(이미지당 최대 100 KB), Gmail 클리핑 방지를 위해 총 이메일 크기를 102 KB 미만으로 유지하세요.
모든 브라우저가 Base64 데이터 URI를 지원하나요?
모든 최신 브라우저가 데이터 URI를 지원합니다 - 2012년 이후의 Chrome, Firefox, Safari, Edge 및 모든 모바일 브라우저. Internet Explorer 8은 데이터 URI당 32 KB 제한으로 부분 지원을 추가했습니다. IE 9+는 그 제한을 제거했습니다. 오늘날 유일한 실질적 제한은 일부 콘텐츠 보안 정책(CSP) 구성이 기본적으로 data: URI를 차단하는 것입니다. 사이트에 엄격한 CSP가 있다면 인라인 Base64 이미지를 허용하기 위해 img-src 지시문에 data:를 추가하세요.
이 도구는 안전한가요? 이미지를 업로드하나요?
이미지는 기기를 떠나지 않습니다. 변환은 브라우저 FileReader API를 사용하여 파일을 로컬로 읽고 JavaScript에서 전적으로 Base64 문자열을 출력합니다. 브라우저 개발자 도구를 열고(F12), 네트워크 탭으로 전환한 후 이미지를 변환해보세요 - 나가는 요청이 0개입니다. 이 도구는 서버 백엔드 없이 정적 HTML과 JavaScript로 실행됩니다. 탭을 닫으면 모든 데이터가 메모리에서 삭제됩니다.
SVG 파일을 Base64 인코딩할 수 있나요?
네, 하지만 SVG는 이미 텍스트 기반 XML이므로 SVG를 Base64 인코딩하는 것은 종종 불필요합니다. Base64 없는 원시 SVG 데이터 URI(data:image/svg+xml,...)는 33% 인코딩 오버헤드를 건너뛰므로 보통 20-30% 더 작습니다. 이 도구는 Base64를 필요로 하는 시스템과의 호환성을 위해 Base64 버전을 제공하지만, CSS 배경 이미지에는 퍼센트 인코딩이 있는 url()에서 원시 SVG 사용을 고려하세요. Base64 버전은 어디서나 작동하지만, 인코딩되지 않은 버전은 일부 구형 이메일 클라이언트에서 실패합니다.