어떤 이미지든 Base64 데이터 URI로 인코딩하거나, 데이터 URI를 붙여넣어 이미지로 다시 디코딩하세요. 결과를 복사하거나 CSS url() 스니펫을 가져오세요. 아무것도 기기를 떠나지 않습니다.
이미지를 Base64로 변환하는 도구는 이미지 파일을 읽어서 별도의 파일 요청 없이 HTML, CSS, JSON에 직접 삽입할 수 있는 Base64 데이터 URI로 인코딩합니다. 변환은 브라우저의 FileReader API를 사용하며, 이미지의 어떤 바이트도 서버로 전송되지 않습니다. Base64 문자열을 다시 붙여넣어 이미지를 디코딩하고 미리볼 수도 있으며, 이 모든 과정이 로컬에서 이루어집니다.
Base64 데이터 URI는 3바이트 그룹이 4개의 ASCII 문자로 확장되므로 바이너리 원본보다 약 33% 더 큽니다. 이 크기 증가는 이미지를 문서나 스타일시트에 인라인으로 삽입하는 편의성을 위한 예상된 절충점입니다. 이 도구는 원시 Base64 문자열과 함께 프로젝트에 바로 복사해 붙여넣을 수 있는 HTML img 태그 스니펫과 CSS background-image 스니펫도 보여줍니다.
Base64 인코딩은 3개의 바이너리 바이트를 4개의 ASCII 문자로 표현합니다(4/3 비율). 100KB 이미지는 Base64 문자열로 약 133KB가 됩니다. 이것은 도구의 한계가 아닌 인코딩 방식의 본질적인 특성입니다.
아니요. FileReader API가 로컬 디스크에서 바이너리 파일을 읽고 결과를 브라우저 탭 안의 JavaScript 인코딩 함수에 직접 전달합니다. 이미지 데이터는 기기를 벗어나지 않습니다.
네. data:image/jpeg;base64,로 시작하고 인코딩된 문자열이 뒤따르는 데이터 URI는 img 태그의 src 속성이나 CSS background-image 속성의 url() 값으로 사용할 수 있습니다. 모든 현대 브라우저가 데이터 URI를 지원합니다. 매우 큰 데이터 URI는 페이지 렌더링을 느리게 할 수 있으므로 인라인 삽입은 보통 몇 킬로바이트 미만의 작은 이미지에만 사용합니다.
이 도구는 애니메이션 GIF를 포함해 제공된 파일의 전체 바이너리 내용을 인코딩합니다. 결과 데이터 URI를 img 태그의 src로 사용하면 GIF 애니메이션을 지원하는 브라우저에서 애니메이션이 재생됩니다.
도구를 디코딩 모드로 전환하고, data: 접두사가 있거나 없는 Base64 문자열을 붙여넣으면 도구가 디코딩하여 바이너리 이미지를 다운로드로 제공하고 미리보기도 보여줍니다.