> PNG | encode | data-uri <

A: .png 파일의 바이너리 콘텐츠를 RFC 4648에 정의된 Base64 알파벳을 사용하여 ASCII 문자열로 변환합니다. 인코딩된 텍스트는 HTML <img> 태그, CSS background-image, 이메일 메시지, JSON API 페이로드, 또는 기타 텍스트 전용 전송 채널에 직접 삽입할 수 있습니다. PNG 바이트 자체는 변경되지 않으며 — 모든 IHDR, IDAT, tRNS, IEND 청크가 인코딩되고 정확히 복구될 수 있습니다.

A: PNG를 드롭 존으로 드래그하거나(또는 클릭하여 찾아보세요). 이 도구는 FileReader.readAsDataURL()로 파일을 읽어오며, 이미 사용 가능한 data:image/png;base64,… URI를 반환합니다. <img src="…">에 직접 붙여넣으려면 데이터 URI를 선택하고, API/데이터베이스가 data:image/png;base64, 접두사 없이 원시 Base64 부분을 기대한다면 Base64 페이로드만을 선택하세요.

A: 아니요. Base64는 순수한 바이너리-텍스트 변환입니다 — 원본 PNG의 모든 바이트가 보존되며, 알파 채널, 팔레트, 색상 프로필(iCCP/sRGB 청크)을 포함합니다. 문자열을 다시 디코딩하면 파일은 원본과 비트 단위로 동일합니다. 디코딩된 PNG의 SHA-256 해시가 원본과 일치합니다. 이것이 픽셀 정확도가 중요한 아이콘, 로고, 스크린샷을 임베딩하는 데 Base64가 올바른 도구인 이유입니다.

A: Base64는 입력 3바이트당 4문자를 사용하므로 인코딩된 문자열은 원본 PNG 파일보다 약 33% 더 큽니다. 정확한 크기는 4 × ⌈n / 3⌉자이며, 여기서 n은 PNG의 바이트 크기입니다. 10 KB PNG는 약 13.6 KB의 Base64 텍스트가 됩니다. HTTP 압축(gzip, Brotli)이 Base64 텍스트를 꽤 잘 처리하기 때문에 실제 전송 오버헤드는 보통 10–15%에 가깝습니다.

A: 모든 PNG Base64 문자열은 iVBORw0KGgo로 시작합니다. 해당 접두사는 8바이트 PNG 서명 89 50 4E 47 0D 0A 1A 0A를 Base64로 재인코딩한 것입니다. 따라서 iVBORw0KGgoAAAANSUhEUg...는 항상 PNG이며, 이 접두사를 보면 데이터가 무결한지 빠르게 시각적으로 확인할 수 있습니다. 데이터 URI로 감싸면 다음과 같이 보입니다:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

A: <img> 태그의 src 속성에 전체 데이터 URI를 붙여넣으세요:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
브라우저는 Base64 페이로드를 디코딩하고 URL에서 로드한 것처럼 PNG를 렌더링합니다. 추가 HTTP 요청이 없으므로 중요 경로 아이콘, 이메일 서명 및 오프라인 우선 앱에 유용합니다.

A: 데이터 URI를 url() 함수로 감싸세요:
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
재사용을 위해 CSS 커스텀 속성에 저장하세요:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
인라인 배경은 아이콘당 HTTP 요청 하나를 제거하지만 CSS 파일을 부풀리므로 작은 아이콘(< 4 KB)에만 사용하세요.

A:
JavaScript (브라우저): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

A: 다음과 같은 경우 Base64 PNG 데이터 URI를 사용하세요:
• 이미지가 < 4 KB(HTTP 왕복 절약)
• HTML 이메일 내에 임베드해야 할 때(많은 클라이언트가 원격 이미지를 차단함)
• 단일 파일 HTML 보고서나 대시보드를 배포할 때
• 이미지를 JSON 페이로드나 데이터베이스 열 내부에 저장할 때
이미지가 크거나 여러 페이지에서 재사용되거나 별도의 CDN 캐싱이 필요한 경우에는 외부 .png 파일을 선호하세요.

A: 예. Base64는 비트 단위 변환이므로 모든 PNG 색상 모드가 동등하게 지원됩니다:
• RGBA / 트루컬러 + 알파 — 32비트 색상, 전체 투명도
• 팔레트 (PLTE) + tRNS — 1비트 투명도가 있는 인덱스 팔레트 PNG
• 그레이스케일 + 알파 — 알파가 있는 8/16비트 그레이스케일
• 16비트 딥 컬러 PNG — 의료 영상 및 과학적 시각화에 사용되는 HDR 스타일 PNG
이 모든 것이 Base64를 통해 깔끔하게 왕복하고 PNG를 이해하는 브라우저에서 올바르게 표시됩니다.

A: 아니요. Base64는 인코딩이지 암호화가 아닙니다. 문자열을 읽을 수 있는 사람은 누구나 밀리초 내에 원본 PNG로 다시 디코딩할 수 있습니다. 스크린샷에 암호, API 토큰 또는 개인 정보가 포함되어 있다면 Base64로 인코딩한다고 해서 보호되지 않습니다 — Base64 출력 위에 실제 암호화 계층(AES-GCM, age, PGP)을 사용하거나, 액세스 제어를 적용하는 서버로 TLS를 통해 이미지를 전송하세요.

A: 인위적인 상한선은 없습니다. 인코딩이 로컬에서 실행되므로 제한은 브라우저의 메모리입니다 — 보통 데스크톱에서 100 MB 이상, 모바일에서 40–60 MB입니다. 매우 큰 PNG(고해상도 의료 또는 위성 이미지)의 경우 파일을 청크 단위로 읽고 각 청크에서 btoa()를 호출하여 메인 스레드가 응답성을 유지합니다. 이미지가 약 100 MB보다 크면 브라우저에 로드하는 대신 서버 측 인코더에서 직접 스트리밍하는 것을 고려하세요.

A: 로고, UI 아이콘, 스크린샷, 다이어그램, 투명도나 선명한 가장자리(텍스트, 차트)가 있는 모든 것에는 PNG → Base64를 사용하세요. PNG는 무손실이며 알파를 인식합니다. 손실 압축이 허용되는 사진이나 많은 색상이 있는 이미지에는 JPG → Base64를 사용하세요. 사진의 경우 JPEG 파일이 일반적으로 PNG보다 5–20배 작으므로 Base64 페이로드가 훨씬 짧습니다. 대략적인 규칙: 이미지가 카메라에서 나왔거나 사진적 그라데이션을 포함한다면 JPG를 사용하고, 그렇지 않으면 PNG를 사용하세요.