사용 방법
- PNG를 드롭 영역에 끌어다 놓거나, 클릭해서 선택하거나, 클립보드의 스크린샷을 붙여넣습니다.
- 원본 PNG 바이트를 그대로 인코딩하려면 ‘변환 형식’을 ‘원본 유지’로 두고, 큰 이미지를 줄이려면 ‘최대 너비’를 설정합니다.
- 이미지에 표시되는 원본 크기와 인코딩 후 크기를 비교합니다.
- data URI, 순수 Base64, img 태그, CSS, Markdown 출력을 복사하거나 다운로드합니다.
PNG와 Base64
PNG(Portable Network Graphics, MIME 유형 image/png)는 완전한 알파 채널을 지원하는 무손실 래스터 형식으로, 아이콘, 로고, 다이어그램, 스크린샷에 흔히 쓰입니다. 모든 PNG 파일은 같은 8바이트 시그니처로 시작하므로 모든 PNG data URI도 data:image/png;base64,iVBORw0KGgo...로 똑같이 시작합니다.
Base64는 픽셀을 전혀 건드리지 않습니다. 문자열을 디코딩하면 색상과 투명 영역까지 바이트 단위로 동일한 파일이 그대로 복원됩니다.
PNG data URI가 유용한 경우
- 투명 배경이 필요한 작은 인터페이스 아이콘과 로고
- 독립 실행형 HTML 보고서, 버그 보고서, 내보낸 문서에 넣는 스크린샷
- 서버에서 생성해 JSON 응답으로 돌려주는 차트와 QR 코드
- 기본적으로 PNG data URI를 만들어 주는
canvas.toDataURL()로 생성한 이미지
사진은 사정이 다릅니다. PNG는 사진을 무손실로 저장하므로 파일이 커집니다. JPEG나 WebP를 사용하면 훨씬 짧은 문자열을 얻을 수 있습니다.
인코딩 전에 PNG 크기 줄이기
PNG에서 1바이트를 줄일 때마다 Base64 문자가 약 1.33개 줄어듭니다. 먼저 oxipng나 zopflipng(무손실), pngquant(팔레트 축소) 같은 최적화 도구로 파일을 처리하십시오. 픽셀 크기도 확인하십시오. 표시 크기의 3배로 내보낸 아이콘이라면 대개 ‘최대 너비’ 옵션으로 줄일 수 있습니다.
WebP로 변환하면 투명도가 유지되면서 크기도 훨씬 작아지는 경우가 많습니다. JPEG로 변환하면 투명도가 사라져 투명 영역이 단색으로 채워집니다. 브라우저에서 PNG로 다시 인코딩해도 압축이 최적화되지는 않으므로, 잘 최적화된 원본보다 결과가 더 커질 수 있습니다. 복사하기 전에 크기를 비교하십시오.
출력 사용하기
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# 명령줄: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png자주 묻는 질문
Base64로 인코딩해도 PNG 투명도가 유지됩니까?
예. Base64는 파일 바이트를 바꾸지 않고 인코딩하므로 알파 채널이 그대로 유지됩니다. 투명도는 이미지를 JPEG로 변환할 때만 사라집니다.
PNG Base64 문자열이 모두 iVBORw0KGgo로 시작하는 이유는 무엇입니까?
이 문자들은 PNG 파일 시그니처를 Base64로 나타낸 것입니다. PNG라고 하는 문자열이 다른 문자로 시작한다면 다른 형식이거나 손상된 데이터입니다.
스크린샷을 바로 붙여넣을 수 있습니까?
data:image/png 결과를 얻게 됩니다.Base64로 삽입하기에 적당한 PNG 크기는 어느 정도입니까?
흔히 쓰는 기준은 몇 킬로바이트, 많아야 10KB 정도입니다. 그보다 큰 이미지는 브라우저가 캐시하고 병렬로 불러올 수 있도록 별도 파일로 제공하는 편이 좋습니다.