유용한 출력 형식 4가지
원시 Base64, 전체 데이터 URI, HTML 이미지 요소 또는 바로 사용할 수 있는 CSS 배경 선언을 복사하세요.
이미지 도구
•
무료 온라인 도구
이미지를 Base64로 변환
PNG, JPG, WebP, GIF, SVG 이미지를 브라우저에서 직접 Base64로 인코딩합니다.
무료 사용
회원가입 없음
브라우저 기반
온라인 도구
이미지를 Base64로 변환
준비 완료
브라우저 기반 비공개 이미지 인코더
업로드 없이 이미지를 Base64로 변환
이미지를 원시 Base64 문자열, 전체 데이터 URI, HTML 이미지 태그 또는 CSS 배경 값으로 인코딩합니다. 모든 처리는 브라우저에서 로컬로 진행됩니다.
정확한 크기 분석
원본 파일과 인코딩 결과를 비교하고 인라인 사용 전에 정확한 크기 증가량을 확인하세요.
로컬 및 비공개 처리
원본 이미지와 생성된 Base64 데이터는 브라우저 메모리에만 유지되며 변환을 위해 업로드되지 않습니다.
인코딩할 이미지 업로드
끌어다 놓거나 클립보드에서 붙여넣거나 기기에서 이미지를 선택하세요
이미지를 복사한 후 Ctrl+V 또는 Command+V를 누르세요 브라우저에서 로컬로 처리됨
선택한 이미지
- 파일 이름
- 파일 형식
- 크기
- 원본 크기
- 예상 Base64 크기
큰 파일이 감지되었습니다
Base64 출력은 원본 파일보다 약 33% 크며 상당한 브라우저 메모리가 필요할 수 있습니다.
Base64 인코딩 중에도 애니메이션 GIF 데이터가 유지됩니다.
SVG는 이미 텍스트 기반 형식입니다. HTML에서는 인라인 SVG 마크업이 Base64보다 더 작고 유연할 수 있습니다.
이미지를 인코딩하기 전에 인증을 완료하세요.
이미지 인코딩 중
브라우저에서 이미지를 로컬로 읽고 인코딩하고 있습니다…
생성된 Base64 출력
이미지를 성공적으로 인코딩했습니다.
생성된 Base64 출력
프로젝트에 필요한 형식을 선택한 후 생성된 텍스트를 복사하거나 다운로드하세요.
이미지 인코딩 중
브라우저에서 이미지를 로컬로 읽고 인코딩하고 있습니다…
인코딩 크기 요약
- 원본 파일
- Base64 문자열
- 전체 데이터 URI
- 크기 증가
- 원본 크기의 :percent%
Base64는 원본 3바이트를 텍스트 4자로 표현하므로 일반적으로 크기가 약 33% 증가합니다.
외부 이미지 사용을 고려하세요
큰 Base64 이미지는 HTML 또는 CSS 크기를 늘리고 독립적으로 캐시할 수 없으며 페이지 렌더링을 지연시킬 수 있습니다.
이미지가 이 기기를 벗어나지 않습니다
인코딩은 브라우저 메모리에서 JavaScript로 수행됩니다. 이미지와 생성된 출력은 CyberTools 변환 엔드포인트로 전송되지 않습니다.
이미지 품질 손실 없음
Base64는 되돌릴 수 있는 텍스트 인코딩입니다. 크기 변경, 재압축 또는 품질 변경 없이 원본 파일 바이트를 보존합니다.
Base64를 선택적으로 사용하세요
인라인 Base64는 매우 작은 자산에 가장 적합합니다. 캐시와 지연 로딩의 이점을 얻는 큰 이미지에는 일반적으로 외부 파일이 더 좋습니다.
비공개 온라인 이미지 인코더
이미지를 Base64로 변환: 웹 인라인 사용을 위한 이미지 인코딩
PNG, JPG, JPEG, WebP, GIF 또는 SVG 이미지를 브라우저에서 직접 Base64 텍스트로 변환하세요. 원시 Base64 문자열, 전체 데이터 URI, HTML 이미지 예제 및 CSS 배경 예제를 생성합니다.
이미지는 로컬로 처리되며 변환 서버에 업로드되지 않습니다. 정확한 인코딩 크기를 확인하고 원본 파일과 비교한 후 프로젝트에 필요한 출력 형식만 복사할 수 있습니다.
바로 사용할 수 있는 코드
접두사, MIME 형식 또는 마크업을 직접 조합하지 않고 원시 Base64, 데이터 URI, HTML 및 CSS를 생성합니다.
크기 비용 확인
웹 페이지에 추가하기 전에 Base64 인코딩으로 발생하는 정확한 문자 수와 증가율을 확인하세요.
브라우저 전용 처리
비공개 디자인, 내부 스크린샷 및 고객 자산을 전체 변환 과정 동안 자신의 기기에 보관하세요.
이미지 Base64 변환 도구의 기능
인코더는 이미지의 바이너리 바이트를 읽고 Base64 알파벳으로 표현합니다. 원본 바이너리 데이터를 손상시키지 않고 HTML, CSS, JSON, XML, 이메일 및 기타 텍스트 중심 형식에서 사용할 수 있는 값을 생성합니다.
원시 Base64 문자, MIME 형식이 포함된 전체 데이터 URI, HTML img 요소 및 CSS background-image 예제의 네 가지 출력을 제공합니다. 코드를 직접 구성하지 않고 애플리케이션에 필요한 버전을 복사할 수 있습니다.
이미지를 Base64로 인코딩하는 방법
PNG, JPG, JPEG, WebP, GIF 또는 SVG 파일을 선택하고 업로드 영역에 끌어다 놓거나 클립보드에서 이미지를 붙여넣습니다. 파일 정보와 미리보기를 확인하고 필요한 경우 인증을 완료한 후 인코딩을 시작하세요.
변환 후 원본 크기와 인코딩된 크기를 비교하세요. 원시 Base64, 데이터 URI, HTML 또는 CSS를 선택한 다음 출력을 복사하거나 텍스트 파일로 다운로드합니다. 다른 이미지를 처리하기 전에 도구를 초기화하세요.
Base64 인코딩 작동 방식
바이너리 파일에는 0부터 255까지의 바이트 값이 포함되며, 그중 일부는 보이는 텍스트로 안전하게 표현할 수 없습니다. Base64는 입력을 3바이트 블록으로 묶고 각 블록을 64자 알파벳에서 선택한 인쇄 가능한 ASCII 문자 4개로 변환합니다.
이 과정은 결정적이며 손실이 없습니다. Base64 문자열을 디코딩하면 동일한 원본 바이트가 복원됩니다. 입력 길이가 3으로 나누어떨어지지 않으면 마지막 블록에 패딩 문자가 추가될 수 있습니다.
Base64 출력이 약 33% 더 큰 이유
원본 데이터 3바이트마다 Base64 문자 4개가 생성됩니다. 이 4대 3 비율 때문에 인코딩된 텍스트는 일반적으로 원본 파일보다 약 3분의 1 더 크며, 패딩과 데이터 URI 접두사로 인해 조금 더 증가합니다.
30 KB 이미지는 약 40 KB의 Base64 문자를 생성합니다. 이러한 증가는 인코딩 방식 자체의 특성이므로 다른 표현 방식을 선택하거나 원본 파일을 먼저 줄이지 않으면 제거할 수 없습니다.
Base64 데이터 URI 이해하기
원시 Base64 문자열만으로는 파일 형식을 알 수 없습니다. 데이터 URI는 인코딩 문자 앞에 data: 접두사, 이미지 MIME 형식 및 ;base64 표시를 추가합니다. 그러면 브라우저가 전체 값을 인라인 이미지 URL로 처리할 수 있습니다.
데이터 URI는 HTML img의 src 속성, CSS background-image 값 또는 URL을 허용하는 다른 위치에 사용할 수 있습니다. 생성된 예제에는 선택한 파일에서 가져온 올바른 MIME 형식이 포함됩니다.
인라인 Base64 이미지가 유용한 경우
Base64는 작은 인터페이스 아이콘, 로딩 표시기, 이메일 자산, 휴대 가능한 보고서, 테스트 데이터 및 독립형 HTML 파일에 유용합니다. 별도의 이미지 요청을 없애거나 모든 내용을 하나의 문서에 유지하는 것이 도움이 될 수 있습니다.
JSON 또는 기타 텍스트 전용 페이로드 안에 자산을 포함해야 할 때도 유용합니다. Vite와 webpack 같은 빌드 도구는 설정된 크기 제한보다 작은 자산을 자동으로 인라인 처리하는 경우가 많습니다.
외부 이미지가 더 나은 경우
큰 사진, 히어로 이미지, 반복 사용되는 아이콘 및 페이지 아래쪽 미디어는 일반적으로 외부 파일로 제공하는 것이 더 효율적입니다. 외부 이미지는 독립적으로 캐시하고 병렬로 가져오며 전송 인프라에서 압축하고 필요할 때만 지연 로딩할 수 있습니다.
인라인 Base64 이미지는 HTML 또는 CSS 파일의 일부가 됩니다. 파싱 작업이 늘어나고 독립적으로 캐시할 수 없으며 포함된 문서가 변경될 때마다 다시 다운로드해야 합니다.
개인정보 및 민감한 이미지
Base64는 인코딩이지 암호화가 아닙니다. 출력을 받은 사람은 누구나 이를 디코딩하여 원본 이미지를 복원할 수 있습니다. 기밀 시각 정보를 숨기는 방법으로 Base64 문자열을 사용하지 마세요.
이 도구는 브라우저 메모리에서 로컬로 인코딩하며 이미지를 CyberTools 변환 엔드포인트로 보내지 않습니다. 내부 도표, 고객 자산, 비공개 스크린샷 및 기밀 유지 요건이 있는 파일에 유용합니다.
SVG와 애니메이션 GIF 고려 사항
Base64는 모든 애니메이션 프레임을 포함한 각 바이트를 보존하므로 애니메이션 GIF는 움직임을 유지합니다. 호환되는 HTML 이미지 요소에서 사용하면 생성된 데이터 URI가 원본 GIF와 동일하게 작동합니다.
SVG는 이미 텍스트 기반 XML 형식입니다. 직접 인라인한 SVG 마크업은 더 작은 경우가 많고 개별 요소에 스타일이나 스크립트를 적용할 수 있습니다. Base64로 인코딩한 SVG는 CSS 배경처럼 URL 값이 필요한 곳에서 주로 유용합니다.
최신 웹 프로젝트에서 Base64 사용하기
React, Vue 및 기타 프레임워크는 이미지 속성이나 스타일 바인딩에 데이터 URI를 사용할 수 있습니다. 작은 일회성 자산에는 편리하지만 큰 이미지는 일반적으로 파일로 가져와 빌드 시스템이 이름, 캐시 및 전송을 최적화하도록 하는 것이 좋습니다.
많은 번들러는 설정 가능한 인라인 제한을 제공합니다. 제한보다 작은 자산은 데이터 URI가 되고 큰 파일은 별도로 생성됩니다. 이를 통해 요청 오버헤드, Base64 크기 증가 및 캐시 동작의 균형을 맞출 수 있습니다.
인코더가 생성하는 출력
| 출력 | 포함 내용 |
|---|---|
| 원시 Base64 문자열 | MIME 형식이나 데이터 URI 접두사 없이 인코딩된 문자만 포함합니다. |
| Base64 데이터 URI | 인라인 URL로 사용할 수 있는 전체 data:[mime-type];base64,[content] 값입니다. |
| HTML 사용 예제 | 생성된 데이터 URI가 src 속성에 포함된 img 요소입니다. |
| CSS 사용 예제 | 생성된 데이터 URI를 포함한 background-image 선언입니다. |
이미지 Base64 인코딩의 일반적인 용도
- 추가 이미지 요청 없이 작은 아이콘을 인라인으로 삽입
- 오프라인에서 작동하는 독립형 HTML 문서 생성
- JSON 또는 XML 페이로드 안에 이미지 포함
- HTML 이메일 템플릿용 인라인 이미지 생성
- 작은 배경 이미지를 CSS에 직접 추가
- 개발 및 디버깅용 휴대 가능한 테스트 데이터 준비
- 프런트엔드 빌드 파이프라인 출력 확인
- 텍스트 전용 필드를 통해 바이너리 이미지 바이트 전송
Base64 이미지를 피해야 하는 경우
- 큰 사진 또는 히어로 이미지
- 지연 로딩이 필요한 이미지
- 여러 페이지에서 재사용되는 자산
- 독립적인 브라우저 캐시의 이점이 있는 파일
- 큰 이미지를 포함하며 자주 변경되는 HTML 또는 CSS
- CDN을 통해 효율적으로 제공되는 이미지
이미지 Base64 인코더 사양
| 항목 | 세부 정보 |
|---|---|
| 지원 형식 | PNG, JPG, JPEG, WebP, GIF, SVG |
| 브라우저 최대 파일 크기 | 200 MB, 사용 가능한 브라우저 및 기기 메모리에 따라 달라짐 |
| 입력 방식 | 파일 선택, 끌어다 놓기 또는 클립보드 붙여넣기 |
| 생성 출력 | 원시 Base64, 전체 데이터 URI, HTML 예제 및 CSS 예제 |
| 인코딩 방식 | 크기 변경이나 재압축 없는 무손실 바이트-텍스트 변환 |
| 애니메이션 GIF 지원 | 애니메이션 바이트가 인코딩 출력에 유지됨 |
| 예상 크기 증가 | 약 33% 및 짧은 데이터 URI 접두사 |
| 처리 위치 | 변환을 위한 이미지 업로드 없이 로컬 브라우저 메모리에서 처리 |
이미지 Base64 변환 FAQ
Base64 문자열이 원본 이미지보다 긴 이유는 무엇인가요?
Base64는 원본 3바이트를 텍스트 4자로 표현합니다. 따라서 생성된 문자열은 일반적으로 약 33% 더 크며 패딩과 데이터 URI 접두사로 인해 조금 더 증가합니다.
Base64 인코딩으로 이미지 품질이 떨어지나요?
아니요. Base64는 무손실 방식이며 원본 파일 바이트를 유지합니다. 이미지 크기를 변경하거나 재압축하거나 시각적 품질을 바꾸지 않습니다.
Base64 데이터 URI를 브라우저에서 직접 열 수 있나요?
예. 유효한 이미지 데이터 URI를 브라우저 주소 표시줄에 붙여넣거나 이미지 소스로 지정하면 인코딩 결과를 빠르게 확인할 수 있습니다.
애니메이션 GIF도 유지되나요?
예. 애니메이션 프레임과 타이밍 데이터를 포함한 GIF 파일의 모든 바이트가 인코딩됩니다. 애니메이션 GIF를 지원하는 환경에서는 결과도 계속 움직입니다.
React 또는 Vue에서 Base64 이미지를 사용해야 하나요?
매우 작은 자산에는 유용할 수 있습니다. 큰 이미지는 일반적으로 파일로 가져와 프레임워크나 번들러가 캐시, 파일 이름 및 전송을 최적화하도록 하는 것이 좋습니다.
SVG 이미지를 Base64로 인코딩해야 하나요?
URL 값이 필요한 경우에만 권장합니다. HTML에서는 직접 인라인한 SVG 마크업이 더 작은 경우가 많고 CSS 또는 JavaScript에서 개별 SVG 요소에 접근할 수 있습니다.
Base64는 안전한 암호화 방식인가요?
아니요. Base64는 되돌릴 수 있는 인코딩이며 기밀성을 제공하지 않습니다. 문자열을 가진 사람은 누구나 원본 이미지를 복원할 수 있습니다.
변환 중에 이미지가 업로드되나요?
아니요. JavaScript가 브라우저에서 이미지를 로컬로 읽고 인코딩하며 CyberTools 이미지 변환 엔드포인트로 전송하지 않습니다.
PNG, JPG, JPEG, WebP, GIF, SVG 파일을 위한 무료 온라인 이미지 Base64 인코더입니다. 이미지를 업로드하지 않고 원시 Base64 문자열, 전체 데이터 URI, HTML 이미지 태그, CSS 배경 예제를 로컬에서 생성할 수 있습니다.