이미지 Base64 변환 - Data URI 코드 로컬 생성

무료 온라인 이미지 Base64 변환 도구. PNG, JPG, SVG, WebP, GIF 이미지를 드래그하여 CSS 배경 및 HTML img 태그용 Data URI를 생성하세요. 브라우저 로컬에서 처리되므로 업로드가 필요 없습니다.

극장 모드를 보려면 클릭하세요.

변환 결과

이미지를 업로드하면 Data URI, CSS 및 HTML 코드가 여기에 표시됩니다.

사용방법

  1. PNG, JPG, SVG, WebP, GIF 이미지를 업로드 영역으로 드래그하거나 클릭하여 파일을 선택하세요.
  2. 미리보기 영역에서 이미지, MIME 타입, 원본 크기 및 Data URI 출력 크기를 확인하세요.
  3. 필요에 따라 전체 Data URI, 순수 Base64 문자열, CSS background-image 또는 HTML <img> 스니펫을 복사하세요.
  4. 코드를 CSS, HTML, 이메일 템플릿 또는 JSON 구성에 붙여넣으세요.

예시: 'SVG 예시 불러오기'를 클릭하면 로컬 SVG 아이콘이 Data URI로 생성되며, CSS 또는 HTML 스니펫을 바로 복사해 볼 수 있습니다.

핵심 기능

  • 빠른 Data URI 생성: 이미지를 드래그 앤 드롭하면 브라우저 내에서 즉시 프론트엔드 코드에 사용할 수 있는 data:image/...;base64,...가 생성됩니다.
  • CSS 및 HTML 코드 스니펫: Data URI 접두사를 직접 작성할 필요 없이 CSS background-image 또는 HTML <img> 태그를 원클릭으로 복사할 수 있습니다.
  • 다양한 웹 이미지 형식 지원: PNG, JPG, SVG, WebP, GIF, AVIF 등 브라우저에서 읽을 수 있는 다양한 이미지 형식과 호환됩니다.
  • 일괄 처리 대기열: 여러 개의 아이콘, 이메일 자료 또는 UI 이미지를 한 번에 드래그하여 각 파일에 필요한 스니펫을 하나씩 미리보고 복사하세요.
  • 100% 로컬 개인정보 보호: 이미지는 브라우저의 기본 FileReader를 통해 현재 장치에서 로컬로 읽히며 서버로 업로드되지 않습니다.

관련 도구

Base64 이미지/파일 온라인 변환 - 인코딩 디코딩 및 CSS 원클릭 생성

온라인 Base64 변환 도구: 이미지/파일을 Base64 Data URL로 변환하거나 Base64를 다운로드 가능한 파일로 복원합니다. WebP 지원, 일괄 처리 및 CSS background 코드 생성 기능을 제공하며 서버에 업로드되지 않습니다.
Base64를 이미지로 변환 - 로컬 미리보기 및 다운로드

브라우저 로컬에서 Base64 또는 Data URI를 이미지로 복원하여 즉시 미리 보고 원본 형식, PNG, JPG 또는 WebP로 다운로드하세요.
안전한 JSON 포매터 및 타입 생성기 - 로컬에서 변환

안전한 JSON 포매터: 브라우저 로컬에서 JSON을 포맷팅, 유효성 검사 및 수정하세요. 압축, 에러 강조, TypeScript/Zod 자동 생성, XML 변환 등 모든 기능이 안전하게 처리됩니다.
무료 JSONPath 테스트 도구 | 로컬 실시간 쿼리 평가

API JSON을 위한 무료 JSONPath 테스터 및 평가 도구입니다. 실시간으로 매칭되는 노드를 추출하고 경로를 확인하세요. 파싱과 쿼리는 모두 브라우저에서 안전하게 로컬로 실행됩니다.
JSON을 CSV로 변환 - 로컬 스프레드시트 내보내기

브라우저 로컬에서 JSON 객체 또는 배열을 CSV로 변환합니다. 중첩된 필드를 평면화하고, 결과를 미리 본 후 데이터 업로드 없이 복사하거나 다운로드하세요.
CSV를 JSON으로 변환 - 로컬 실시간 변환기

브라우저 로컬에서 CSV 텍스트나 파일을 JSON 배열로 실시간 변환하세요. 헤더, 쉼표/세미콜론/탭 구분자, 파일 드래그 앤 드롭, 복사 및 다운로드를 지원하며 데이터가 업로드되지 않습니다.
JSON 비교 도구 (JSON Diff) - 로컬 시맨틱 비교

브라우저 로컬 환경에서 두 JSON 문서를 비교하세요. 객체의 키를 정렬하여 시맨틱 비교(Semantic Diff)를 수행하며, 키 순서로 인한 노이즈를 방지하고 추가, 삭제, 수정된 필드를 시각적으로 표시합니다. 데이터는 업로드되지 않습니다.
JSON 압축 도구 (Minifier)

서식이 지정된 JSON을 한 줄로 압축하고, 들여쓰기와 줄바꿈을 제거합니다. 원본 크기, 압축 크기, 절약된 바이트 및 절약 비율을 실시간으로 비교하세요.

계산 논리

Base64 인코딩은 이진 이미지 데이터를 ASCII 문자열로 변환하여 HTML, CSS 또는 JSON에 이미지를 직접 삽입할 수 있게 합니다. Data URI의 기본 구조는 data:[mime-type];base64,[encoded-data]이며, 브라우저는 이를 이미지 리소스로 인식하고 읽을 수 있습니다.

주의할 점: Base64는 이미지 압축 기술이 아닙니다. 인코딩된 출력 크기는 일반적으로 원본 파일보다 약 33% 더 큽니다. 따라서 작은 아이콘, 로고, 이메일 인라인 이미지 또는 HTTP 요청 수를 줄이는 용도로 가장 적합합니다. 용량이 큰 사진이나 다량의 이미지는 기존 파일 형태로 유지하고 이미지 압축 도구를 사용하여 용량을 줄이는 것이 좋습니다.

FAQ

왜 이미지를 Base64로 변환하나요?

작은 아이콘, 이메일 이미지 또는 설정용 소형 이미지를 코드에 직접 삽입하여 외부 HTTP 요청을 줄이거나, 이메일 클라이언트에서 외부 이미지 노출을 차단하는 것을 우회하고자 할 때 유용합니다.

Base64로 변환하면 이미지 크기가 압축되나요?

아닙니다. Base64 인코딩은 일반적으로 인코딩된 크기를 약 33% 증가시킵니다. 데이터 압축 목적이 아니라, 코드 삽입 및 요청 수 감소를 위해 사용됩니다.

지원하는 이미지 형식은 무엇인가요?

PNG, JPG, JPEG, SVG, WebP, GIF, AVIF를 비롯하여 사용 중인 브라우저에서 읽을 수 있는 모든 이미지 형식을 지원합니다.

내 이미지가 서버로 업로드되나요?

아닙니다. 브라우저 기본 API인 FileReader.readAsDataURL을 사용하여 변환하므로, 이미지는 사용자의 기기를 벗어나지 않습니다.

CSS나 HTML을 직접 복사할 수 있나요?

네. 각 이미지마다 전체 Data URI, 순수 Base64 문자열, CSS background-image, HTML <img> 스니펫이 각각 생성됩니다.