이미지를 Base64로

위의 박스에 이미지를 드래그 앤 드롭하거나, 클릭해서 찾아보거나, 클립보드에서 붙여넣거나, URL로 불러오십시오. 도구가 즉시 이미지를 Base64 문자열로 변환하고 CSS, HTML, 마크다운으로 바로 복사할 수 있는 데이터 URI를 보여줍니다. 모든 과정이 브라우저 안에서 이루어집니다 — 이미지는 절대 서버에 업로드되지 않으므로 비공개 또는 민감한 이미지도 안전합니다.

Base64 → 이미지 탭으로 전환하고 데이터 URI(data:image/png;base64,…) 또는 순수 Base64 문자열을 붙여넣으십시오. 도구가 이를 디코딩하고 이미지를 미리보기한 후 파일로 다운로드할 수 있게 합니다. 형식을 자동으로 감지하므로 PNG, JPG, SVG, WebP, GIF 모두 지원됩니다. 전체 디코딩이 브라우저 로컬에서 이루어집니다 — 서버 요청이 없고 Base64 문자열이 어디에도 전송되지 않습니다.

Base64 데이터 URI를 img 태그의 src로 사용하십시오. 인코딩된 문자열을 src="data:image/png;base64,…"에 붙여넣습니다. 위에서 "<img> 복사"를 클릭하면 별도의 파일 요청 없이 바로 붙여넣을 수 있는 완전한 이미지 태그를 얻을 수 있습니다 — 이메일, 단일 파일 페이지, 인라인 아이콘에 이상적입니다. 이렇게 하면 추가적인 HTTP 왕복이 제거되며 원본 이미지 파일을 사용할 수 없는 경우에도 작동합니다.

데이터 URI를 url() 안에 넣어 참조하십시오 — 예를 들어 background-image: url("data:image/png;base64,…"). 위에서 "CSS 복사"를 클릭하면 전체 background-image 규칙을 얻을 수 있습니다. 이 방식으로 작은 배경과 아이콘을 인라인으로 처리하면 HTTP 요청이 제거되며, 자주 변경되지 않는 디자인 시스템 아이콘, 로딩 스피너, 장식 요소에 일반적으로 사용됩니다. 단일 파일 HTML 데모를 완전히 독립적으로 만들어 주기도 합니다.

브라우저에서는 FileReader API로 파일을 읽으십시오. const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file). reader.result가 전체 data:image/...;base64 URI입니다. React나 Next.js에서는 useEffect 또는 input 요소의 onChange 핸들러 안에서 이를 호출합니다. 이 변환기가 정확히 이 방식을 사용하므로 완전히 클라이언트 측입니다. 로컬 서버를 설정하지 않고도 여기서 출력 결과를 복사해 자신의 JavaScript 구현을 빠르게 검증할 수 있습니다.

파일을 이진 모드로 열고 인코딩합니다. import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'. PIL/Pillow를 사용하는 경우, 먼저 이미지를 BytesIO 버퍼에 저장한 후 버퍼의 바이트를 Base64로 인코딩합니다. 이 온라인 도구로 Python 출력 결과가 프로덕션 코드에 삽입하기 전에 예상과 일치하는지 검증하십시오.

데이터 URI는 이미지 바이트를 HTML, CSS, JSON, 이메일에 텍스트로 직접 포함시켜, 별도의 HTTP 요청 없이 문서와 함께 이미지를 로드할 수 있게 합니다. 작은 아이콘, HTML 이메일의 로고, 단일 파일 데모, 데이터베이스나 설정 파일에 작은 이미지를 저장하는 데 이상적입니다. 개발자들은 같은 페이지의 캔버스 작업에서 이미지를 로드할 때 CORS 제한을 피하기 위해서도 사용합니다. 파비콘은 첫 번째 로드 시 추가적인 네트워크 왕복을 없애기 위해 HTML head에 데이터 URI로 포함되는 경우가 많습니다.

일반적으로 권장하지 않습니다. Base64 인코딩은 데이터를 원본 이진 파일보다 약 33% 더 크게 만들며, 인라인 이미지는 브라우저가 별도로 캐시하거나 loading="lazy"로 지연 로딩할 수 없습니다. Base64는 파비콘, 작은 로고, 약 10 KB 미만의 아이콘 스프라이트 같이 작고 거의 변경되지 않는 자산에 사용하십시오. 대형 사진, 히어로 이미지, 여러 페이지에서 재사용되는 자산은 적절한 HTTP 캐싱 헤더와 함께 일반 이미지 파일로 제공하십시오.

네, 완전히 안전합니다. 인코딩과 디코딩은 FileReader 및 Canvas API를 사용해 브라우저 안에서만 실행됩니다 — 이미지는 절대 기기를 벗어나지 않으며 서버로 전송되지 않습니다. 이미지를 서버에 업로드해 처리하는 <strong>base64.guru</strong>와 <strong>base64encoder.io</strong>와 비교했을 때 중요한 개인정보 보호 장점입니다. UtiloKit에서는 비공개, 기밀, 미공개 이미지가 전체 변환 과정 동안 사용자의 기기에 유지됩니다. 페이지를 로드한 후 인터넷 연결을 끊어도 여전히 작동합니다.

브라우저가 읽을 수 있는 모든 형식이 인코딩에 사용 가능합니다. PNG, JPEG/JPG, SVG, WebP, GIF, AVIF, BMP, ICO 등이 포함됩니다. 디코딩은 모든 표준 data:image/* MIME 타입을 지원하며 다운로드 전에 결과를 미리볼 수 있습니다. SVG 파일은 특별 처리를 받습니다 — SVG의 Base64는 URL 인코딩을 사용한 url('data:image/svg+xml,…') 방식으로 인코딩 없이 CSS에 직접 삽입할 수도 있지만, Base64가 더 보편적이며 모든 브라우저와 이메일 클라이언트에서 작동합니다.

네. 마크다운에는 "마크다운 복사" 버튼으로  형식을, HTML 이메일에는 "<img> 복사" 버튼을 사용하십시오. 단, Outlook이나 Gmail 모바일 앱 등 일부 이메일 클라이언트는 Base64 이미지를 제거하거나 차단할 수 있으므로 광범위한 수신자에게 발송하기 전에 반드시 테스트하십시오. 뉴스레터 캠페인에서는 CDN에 이미지를 호스팅하고 링크로 연결하는 것이 더 안전합니다. 단일 수신자 트랜잭션 이메일의 경우 대부분의 클라이언트에서 Base64가 안정적으로 작동합니다.

base64.guru와 base64encoder.io 모두 서버 측에서 이미지를 처리합니다 — 파일이 그들의 인프라에 업로드됩니다. UtiloKit의 이미지 Base64 변환기는 100% 브라우저에서 실행됩니다. 업로드 없음, 서버 없음, 데이터 저장 없음입니다. UtiloKit은 바로 붙여넣을 수 있는 CSS, HTML, 마크다운 코드 조각을 제공하고, 양방향 변환(인코딩과 디코딩)을 지원하며, 페이지를 로드한 후 오프라인으로도 작동합니다. 또한 파일 크기나 변환 횟수에 제한 없이 완전히 무료입니다.

완전히 무료이며, 회원가입, 워터마크, 파일 크기나 이미지 수 제한이 없습니다. 무료 이미지 변환에 제한을 두고 특정 크기 이상의 파일에는 유료 플랜을 요구하는 browserling.com과 달리, UtiloKit에는 아무런 제한이 없습니다. 클라이언트 측 방식이므로 이미지당 또는 대역폭 비용이 없습니다 — 브라우저 메모리가 허용하는 한 원하는 만큼, 원하는 크기로 변환하십시오.

네. 이 도구는 완전한 반응형으로 iPhone의 Safari, Android의 Chrome 등 모든 모바일 브라우저에서 작동합니다. 탭하여 카메라 롤이나 파일 앱에서 이미지를 선택하거나, URL을 붙여넣어 원격 이미지를 불러올 수 있습니다. 결과물이 클립보드로 복사되므로 Notion, 코드 편집기, 다른 앱에 바로 붙여넣을 수 있습니다. 앱 다운로드가 필요 없습니다 — 모바일 브라우저에서 페이지를 열면 데스크톱과 똑같이 작동합니다.