이미지를 Base64로 인코딩
이미지를 Base64 데이터 URL로 즉시 변환 - CSS, HTML 또는 코드에 복사하여 붙여넣기만 하면 됩니다. 업로드 필요 없음
Base64로 인코딩된 이미지는 언제 사용해야 할까요?
CSS 및 스타일링
- CSS에서 작은 아이콘을 background-image 데이터 URL로 삽입합니다.
- 스타일시트 내의 인라인 로딩 스피너 또는 플레이스홀더 이미지
- 외부 호스팅 없이 CSS만으로 구성된 이메일 템플릿에 로고를 추가하세요
- 컴포넌트 라이브러리 스타일시트에 UI 요소 이미지를 삽입합니다.
HTML 및 이메일
- HTML에 이미지를 인라인으로 삽입합니다.<img src> 데이터 URL로
- 회사 로고를 HTML 이메일 템플릿에 포함하세요.
- 이미지가 포함된 단일 파일 HTML 문서를 생성합니다.
- Gmail 및 Outlook HTML 서명에 서명 이미지 삽입
API 및 코드
- base64 입력을 예상하는 JSON API 페이로드용 이미지를 인코딩합니다.
- AI/ML API 요청(OpenAI Vision, Claude, Gemini)에 사용할 이미지를 준비합니다.
- 이미지를 base64로 인코딩된 데이터베이스 필드에 저장할 수 있도록 변환합니다.
- JavaScript에서 데이터 URL로부터 캔버스 drawImage에 사용할 이미지를 인코딩합니다.
이미지를 Base64로 변환하는 방법 - 3단계
- 1
이미지를 업로드하세요
JPG, PNG, WebP, SVG 또는 GIF 이미지를 인코더에 넣으세요. 파일은 로컬에서 읽히므로 아무것도 업로드되지 않습니다.
- 2
Base64 출력값을 복사하세요
이 도구는 전체 데이터 URL(data:image/…;base64,…)과 원본 base64 문자열을 각각 별도로 표시합니다. [복사]를 클릭하면 두 형식 중 하나를 클립보드에 사본을 .
- 3
코드에서 사용하세요
데이터 URL을 HTML에 붙여넣으세요<img src> CSS background-image를 사용하거나 API 페이로드 및 JSON 데이터에 대해 원시 base64 문자열을 사용할 수 있습니다.
서버 업로드 없이 무료로 온라인에서 이미지를 Base64로 변환하는 인코더입니다.
Base64 인코딩은 바이너리 이미지 데이터를 ASCII 문자열로 변환하여 외부 URL 없이 코드, CSS, HTML 또는 API 페이로드에 직접 삽입할 수 있도록 합니다. PicsSizer의 Base64 인코더는 브라우저의 FileReader API를 사용하여 이미지 파일을 읽고 전체 데이터 URL과 인코딩된 원본 Base64 문자열을 모두 출력합니다. 서버 업로드가 필요하지 않습니다. 인코딩된 문자열은 CSS의 `background-image` 요소나 HTML 코드에 바로 붙여넣을 수 있습니다.<img src> JSON API 본문 또는 데이터 URL이나 base64 이미지를 예상하는 모든 곳에서 사용할 수 있습니다.
인라인 Base64 이미지와 외부 URL 이미지는 언제 사용해야 할까요?
Base64 인코딩은 아이콘, SVG 일러스트레이션, 이메일 로고, 플레이스홀더 이미지와 같은 작고 정적인 에셋에 가장 적합합니다. Base64로 표현된 이미지는 바이너리 소스보다 약 33% 더 크기 때문에 데이터 URL에 포함된 대형 이미지는 HTML 또는 CSS 파일 크기를 상당히 증가시킵니다. 10KB 이상의 이미지의 경우 CDN을 이용한 외부 호스팅이 거의 항상 더 빠르고 효율적입니다. 5KB 미만의 이미지, 특히 아이콘, 로고, 장식용 SVG의 경우 Base64 임베딩을 사용하면 HTTP 요청이 완전히 제거되어 화면 상단에 중요한 에셋의 성능을 향상시킬 수 있습니다. 이미지 입력을 허용하는 AI/ML API(OpenAI, Anthropic, Google)는 JSON 요청 본문에 Base64를 사용하므로 비전 모델 통합에는 Base64 인코딩이 필수적입니다.
코드에서 Base64로 인코딩된 이미지를 사용하는 팁
CSS의 background-image 속성을 사용하려면 데이터 URL을 url() 함수로 감싸세요. 예: `background-image: url('data:image/png;base64,…')`. HTML의 경우 src 속성에 직접 붙여넣으세요.<img src="data:image/jpeg;base64,…"> 이메일 HTML의 경우: 대부분의 이메일 클라이언트는 작은 이미지에 대한 데이터 URL을 지원합니다. 배포 전에 Gmail, Outlook 및 Apple Mail에서 테스트하십시오. JSON API 페이로드의 경우: API에서 별도의 mediaType 또는 mimeType 필드를 지정하는 경우 (data:…;base64 접두사 없이) 원시 base64 문자열을 사용하십시오. 이 도구는 전체 데이터 URL과 원시 base64 두 가지 형식을 모두 출력하므로 통합에 필요한 버전을 사본을 사용할 수 있습니다.
이미지를 Base64로 변환 — FAQ
이미지를 base64 데이터 URL로 변환하는 것에 대한 일반적인 질문