PNG를 Base64로

PNG를 Base64로 변환하는 방법

1. .png 파일을 상자에 놓거나 파일 선택 창에서 고르세요. 스크린샷을 인코딩하려면 복사한 뒤 이 페이지에서 Ctrl+V(Mac은 Cmd+V)를 누르세요. 먼저 저장할 필요가 없습니다.
2. PNG가 필요 이상으로 크다면 최대 너비를 설정하거나 변환 형식에서 WebP를 고르세요. 메타데이터(EXIF) 제거는 텍스트 청크와 EXIF 청크를 지웁니다.
3. 출력 형식을 Data URI로 두거나, CSS, <img>, Markdown, JSON, 일반 Base64로 바꾸세요.
4. 출력 복사를 누르세요. 미리보기에 픽셀 크기와, 다시 인코딩한 뒤의 새 파일 크기가 표시됩니다.

Base64 PNG의 생김새

모든 PNG는 같은 16바이트로 시작합니다. 8바이트 시그니처와, 반드시 맨 앞에 와야 하는 IHDR 청크의 헤더입니다. Base64로는 22문자의 고정된 시작 부분이 됩니다.

iVBORw0KGgoAAAANSUhEUg

그래서 JSON 응답이든, 로그 파일이든, 데이터베이스 열이든 iVBORw0KGgo로 시작하는 문자열은 PNG입니다. 바로 뒤의 문자에 너비와 높이가 들어 있습니다.

참고로 다음은 완전히 투명한 1×1 PNG 전체입니다. 파일은 70바이트이고 Base64는 96문자입니다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

붙여넣기에는 함정이 하나 있습니다. 브라우저와 이미지 뷰어는 복사한 이미지를 원래 형식과 상관없이 대개 PNG로 클립보드에 넣기 때문에, 붙여넣은 JPEG 사진이 디스크의 파일보다 훨씬 큰 PNG가 될 수 있습니다. 원본 형식이 중요하다면 원본 파일을 놓으세요.

인코딩한 PNG가 다른 것으로 시작한다면 그 파일은 PNG가 아니었습니다. 실제로는 JPEG인 .png 파일은 /9j/로, .png로 이름만 바꾼 WebP는 UklGR로 시작합니다. 미리보기의 MIME 형식이 브라우저가 감지한 형식을 알려 줍니다.

인코딩 전 PNG, JPEG, WebP 고르기

PNG는 무손실이라 로고, 아이콘, UI 그래픽, 텍스트가 있는 스크린샷에 알맞습니다. 사진에는 맞지 않습니다. 사진을 PNG로 저장하면 같은 그림의 좋은 JPEG나 WebP보다 몇 배 큰 경우가 많습니다. Base64는 무엇을 넣든 약 33% 키우므로, 최종 크기는 대부분 어떤 형식을 고르느냐에 달려 있습니다.

변환기는 브라우저의 캔버스로 다시 인코딩합니다. 그래서 다음 세 가지 결과가 생깁니다.

• JPEG로 변환하면 투명도가 사라집니다. 투명한 픽셀은 흰색이 됩니다.
• Safari에는 WebP 인코더가 없습니다. 거기서 WebP를 요청하면 그렇다는 안내와 함께 PNG가 나옵니다.
• 캔버스 인코더는 PNG를 최적화하지 않습니다. 전용 최적화 도구로 이미 압축한 PNG를 다시 인코딩하면 커질 수 있습니다. 미리보기에서 크기를 비교하고 원본이 작다면 원본을 쓰세요.

메타데이터(EXIF) 제거는 EXIF와 텍스트 청크 같은 부가 데이터도 함께 지웁니다. 대부분의 PNG에는 이런 데이터가 거의 없지만, 일부 앱의 스크린샷과 내보내기 파일에는 소프트웨어 이름이나 타임스탬프가 들어 있습니다.

Base64 PNG가 쓰이는 곳

• CSS 아이콘: 추가 요청을 들이지 않아야 할 작은 아이콘에 background-image: url("data:image/png;base64,...")를 씁니다. 벡터 아이콘이라면 대개 SVG가 더 작습니다. SVG를 Base64로를 참고하세요.
• 캔버스 출력: canvas.toDataURL()은 기본으로 PNG data URI를 돌려주며, 서명 패드, 차트, 이미지 편집기에서 이 형식이 그토록 자주 나오는 이유가 여기에 있습니다. Base64를 PNG로가 이를 다시 파일로 바꿉니다.
• API 페이로드: 스크린샷 서비스, 테스트 러너, AI 비전 API는 JSON 안의 Base64로 PNG를 주고받습니다. API가 data:image/png;base64, 접두사를 원하는지 Base64만 원하는지 확인하고 Data URI나 일반 Base64를 고르세요.
• 테스트 스냅샷과 버그 리포트: 시각적 테스트와 크래시 리포터는 스크린샷을 JSON이나 HTML 리포트에 Base64 PNG로 넣어 리포트를 파일 하나로 유지하는 경우가 많습니다.
• 파비콘과 단일 파일 페이지: <link rel="icon">에 작은 PNG 파비콘을 인라인하면 HTML 파일이 다른 파일 없이 완결됩니다. 자세한 내용은 파비콘 페이지에서 다룹니다.

코드에서 PNG 인코딩하기

Node.js는 파일을 Buffer로 읽어 한 번의 호출로 인코딩합니다.

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

브라우저에서는 캔버스가 PNG data URI를 바로 줍니다.

const uri = canvas.toDataURL("image/png");

스트리밍과 URL-safe 출력은 Node.js의 Base64를, 브라우저의 파일과 Blob은 JavaScript의 Base64를 참고하세요.

표시되지 않는 PNG data URI 고치기

• 접두사가 틀렸습니다. 쉼표까지 포함해 data:image/png;base64,여야 합니다. ;base64가 빠지면 브라우저가 문자를 원시 텍스트로 읽습니다.
• URL-safe가 선택되어 있습니다. 브라우저는 data: URL에서 표준 알파벳만 디코딩합니다. -와 _가 든 PNG Base64는 깨진 이미지로 보입니다.
• CSS 안의 줄 바꿈. 76자에서 줄 바꿈은 이메일용입니다. 스타일시트에서 url("...") 안에 줄 바꿈이 있으면 선언이 무효가 됩니다.
• 문자열이 잘렸습니다. PNG는 고정된 12바이트 IEND 청크로 끝나므로, 파일 길이를 3으로 나눈 나머지에 따라 Base64는 AAAAAElFTkSuQmCC, AABJRU5ErkJggg==, AAAASUVORK5CYII= 중 하나로 끝납니다. 끝이 다르고 이미지가 반만 그려지거나 보이지 않는다면 복사할 때 잘린 것입니다. 문자열을 검증해 길이와 패딩을 확인하세요.

자주 묻는 질문