이미지를 Base64으로 변환하는 방법.

이미지-Base64 변환기를 여세요. 이미지를 선택하거나 샘플을 사용해 보세요. 이 예시는 202,491 바이트를 포함하는 512 × 512 픽셀 favicon-orbit.png을 사용합니다. 편집기는 코드 위에 이미지를 표시하므로 의도한 에셋을 선택했는지 확인할 수 있습니다.

브라우저에서 미리보기를 위해 디코딩할 수 있는 경우 PNG, JPG, WebP, GIF, BMP 및 AVIF가 지원됩니다. 최대 파일 크기는 25 MB이며, 제한은 60 메가픽셀 및 한 변당 16,000 픽셀입니다. SVG 마크업은 이 래스터 변환기에서 허용되지 않습니다.

이 도구는 원본 파일 바이트를 읽습니다. 미리보기를 사용하여 이미지를 재구성하거나 크기를 조정하거나 재압축하지 않습니다. 따라서 기존 메타데이터와 GIF 애니메이션은 인코딩된 데이터에 그대로 유지됩니다.

설정을 열고 이 예시를 위해 코드 형식에서 HTML 이미지를 선택하세요. 결과는 Base64 데이터 URL을 포함하는 img 태그입니다. alt 속성은 처음에 비어 있습니다. 이미지가 정보를 전달하는 경우 유용한 대체 텍스트를 작성하세요.

데이터 URL은 data:image/png;base64과 같은 접두사로 시작하며, 그 뒤에 인코딩된 데이터가 옵니다. 일반 Base64은 데이터만 포함합니다. CSS 배경은 데이터 URL을 background-image 선언으로 감쌉니다. 이러한 표현 방식은 목적지가 다르므로, 파일 이름만 변경하지 말고 애플리케이션에서 요청하는 형식을 복사하세요.

코드 패널은 코드 형식을 변경한 직후 업데이트됩니다. 복사 아이콘은 현재 표현 방식을 복사하고 공유 복사 확인 메시지를 표시합니다. 클립보드 액세스가 차단된 경우, 수동으로 복사할 수 있도록 코드가 선택됩니다.

시작을 선택한 다음 다운로드를 선택하세요. 예제는 HTML 이미지 코드가 포함된 favicon-orbit-base64.txt을 저장합니다. 270,029 바이트는 202,491 바이트 소스보다 큽니다. 기사의 비교 내용은 가독성을 위해 단축된 다운로드 텍스트의 시작 부분을 보여줍니다.

Base64은 일반적으로 3개의 소스 바이트를 4개의 텍스트 문자로 변환하여 작은 래퍼 앞에 약 3분의 1을 추가합니다. 작은 아이콘을 포함하면 문서를 독립적으로 만들 수 있지만, 큰 이미지 문자열을 HTML 또는 CSS 안에 넣으면 문서가 커지고 이미지가 별도의 파일로 캐시되는 것을 방지합니다.

인코딩은 암호화가 아닙니다. 완전한 Base64 문자열을 가진 사람은 누구나 기본 이미지를 복구할 수 있습니다. 개인 정보가 포함된 경우 소스와 동일하게 코드를 취급하세요.