image Base64 이미지 변환기 star

작동 방식

이 도구는 두 방향으로 작동합니다. 이미지 → Base64 모드에서는 브라우저 기본 파일 선택 창으로 파일을 고르면, 도구가 FileReader.readAsDataURL() API로 파일을 읽어 data:image/png;base64,iVBORw0KG...와 같은 완전한 데이터 URI를 생성합니다. 이 값은 한 상자에 표시되고, 접두어 없이 순수 Base64 데이터만 담긴 값이 두 번째 상자에 표시되어 용도에 맞는 형태를 골라 쓸 수 있으며, 각각에 원클릭 복사 버튼이 붙어 있습니다. Base64 → 이미지 모드에서는 전체 데이터 URI 또는 순수 Base64 텍스트만 텍스트 영역에 붙여넣으면 됩니다. 접두어 없이 순수 Base64를 붙여넣으면 도구가 자동으로 data:image/png;base64, 헤더를 추가해 브라우저가 여전히 렌더링할 수 있게 하며, 이후 실시간 <img> 미리보기와 함께 디코딩된 바이트를 실제 이미지 파일로 저장하는 다운로드 버튼이 표시됩니다.

Base64 인코딩은 이진 데이터를 인쇄 가능한 ASCII 문자 64개(A–Z, a–z, 0–9, +, /)만으로 표현하는 방식으로, 본질적으로 이진 데이터인 이미지를 HTML, CSS, JSON, URL처럼 텍스트만 다루는 형식 안에 담을 수 있게 해 줍니다. 이 메커니즘은 고정되어 있고 수학적입니다: 원본 파일의 3바이트(24비트)마다 정확히 4개의 Base64 문자(4 × 6비트)로 변환되며, 입력 길이가 3의 배수가 아니면 =로 채워집니다. 이 "3바이트 입력, 4문자 출력" 비율이 바로 Base64 출력이 원본 이진 데이터보다 항상 약 33% 더 커지는 이유입니다 — 4를 3으로 나누면 약 1.333이며, 이는 근사치나 품질 설정이 아니라 고정된 수학적 오버헤드입니다.

알아두면 좋은 점

이미지를 HTML이나 CSS에 데이터 URI로 직접 삽입하면 실질적인 장점이 있습니다: 별도의 HTTP 요청이 사라지는데, 이는 아이콘, 작은 스프라이트, 또는 외부 이미지가 차단될 수 있는 이메일 템플릿에 넣는 작은 로고처럼 매우 작고 자주 재사용되는 자산에서 중요합니다. 반대로 더 큰 자산에는 단점이 작용합니다: 데이터 URI는 링크된 .png나 .jpg 파일과 달리 브라우저가 독립적으로 캐싱할 수 없고, 그것을 포함한 HTML/CSS 파일의 크기를 (같은 약 33%만큼) 부풀리며, 인코딩된 블록 전체가 다운로드될 때까지 해당 파일의 렌더링을 막습니다. 대략적인 기준으로, 데이터 URI는 몇 킬로바이트 이하의 자산에 적합하고, 사진이나 히어로 이미지처럼 페이지를 이동할 때마다 캐시되기를 원하는 대상에는 적합하지 않습니다.

MIME 타입 접두어 — data:image/png;base64,...에서 image/png, image/jpeg, image/webp 부분 — 는 장식이 아닙니다. 이는 브라우저(또는 이 문자열을 읽는 다른 프로그램)에게 뒤따르는 바이트를 어떤 디코더에 넘길지 알려주는 역할을 합니다. 이 접두어가 없거나 잘못되어 있으면, 그 자체로는 유효한 Base64 데이터라도 렌더링에 실패하거나 완전히 다른 파일 형식으로 렌더링될 수 있습니다. 바로 이 때문에 이 도구는 접두어 없는 순수 Base64를 붙여넣으면 자동으로 PNG 접두어를 추가합니다 — 합리적인 기본값이지만, 원본 파일이 실제로 JPEG나 WebP였다는 것을 알고 있다면 그에 맞게 바꿔야 합니다.