어떤 이미지 도구가 필요한가요
| 하려는 작업 | 도구 |
|---|---|
| 모든 이미지를 Base64나 data URI로 | 이미지를 Base64로 |
| Base64를 붙여넣고 그림 보기 | Base64 이미지 변환 |
| 로고, 스크린샷, 투명도 | PNG를 Base64로, Base64를 PNG로 |
| 사진 | JPG를 Base64로, Base64를 JPG로 |
| 웹용으로 더 작은 파일 | WebP를 Base64로, AVIF를 Base64로, Base64를 WebP로 |
| 애니메이션 | GIF를 Base64로, Base64를 GIF로 |
| CSS의 벡터 아이콘 | SVG를 Base64로, 또는 대개 더 짧은 SVG data URI |
| Base64로 된 SVG를 안전하게 살펴보기 | Base64를 SVG로 |
| 인라인 파비콘 | 파비콘을 data URI로, Base64를 ICO로 |
| 아이폰 사진, 스캔, 레거시 비트맵 | HEIC를 Base64로, TIFF를 Base64로, BMP를 Base64로, Base64를 BMP로 |
인코더들은 같은 출력 형식을 공유합니다. 일반 Base64, data URI, CSS background-image, 너비와 높이가 들어간 HTML <img>, Markdown, 그리고 이름, 형식, 크기가 담긴 JSON 객체입니다. 여러 파일을 한 번에 놓거나 스크린샷을 Ctrl+V로 붙여넣을 수 있습니다.
인코딩 전에 형식 고르기
Base64는 모든 이미지를 3분의 1 키우므로, 최종 길이의 대부분은 형식이 결정합니다.
- PNG는 단색 그래픽, UI 요소, 투명도나 텍스트가 있는 모든 이미지에.
- JPEG는 사진에. 사진을 PNG로 저장하면 몇 배나 커집니다.
- WebP는 대상이 지원한다면 두 경우 모두에. 대개 셋 중 가장 작습니다.
- SVG는 벡터로 그린 아이콘과 로고에. URL 인코딩한 data URI가 Base64보다 짧은 경우가 많으며, SVG data URI 도구가 둘을 나란히 비교해 줍니다.
- HEIC와 TIFF는 그대로 인코딩됩니다. 대부분의 브라우저가 표시하지 못하므로, 결과를 웹 페이지에 보여야 한다면 먼저 JPEG나 PNG로 바꾸세요.
이미지 Base64 알아보기
| 접두사 | 형식 |
|---|---|
iVBORw0KGgo | PNG |
/9j/ | JPEG |
R0lGODlh / R0lGODdh | GIF |
UklGR | RIFF 컨테이너: WebP, 또는 WAV 오디오 |
PHN2Zy / PD94bWwg | <svg나 <?xml로 시작하는 SVG |
AAABAA | ICO |
Qk | BMP |
전체 data URI는 data:image/png;base64,iVBORw0KGgo…처럼 앞에 MIME 형식이 붙습니다. 디코더는 두 형태를 모두 받으며, 주변 CSS나 HTML과 함께 붙여넣은 문자열도 받습니다. 문자열이 이미지가 아닌 것으로 밝혀지면 Base64를 파일로가 다른 형식을 알아내고, 파일 도구가 PDF, 오디오, 동영상, 문서를 다룹니다.
자주 묻는 질문
Base64 문자열에 어떤 이미지 형식이 들어 있는지 어떻게 알 수 있나요?
첫 문자를 보세요. iVBORw0KGgo는 PNG, /9j/는 JPEG, R0lGOD는 GIF, UklGR는 WebP 같은 RIFF 컨테이너, PHN2Zy나 PD94bWwg는 대개 SVG입니다. Base64 이미지 변환이 형식을 자동으로 알아냅니다.
인코딩하기 전에 이미지를 줄일 수 있나요?
네. PNG, JPG, WebP, GIF, BMP, AVIF 변환기와 범용 이미지 인코더는 최대 너비로 크기를 줄이고, 품질 슬라이더로 PNG, JPEG, WebP로 다시 인코딩하고, EXIF 메타데이터를 제거할 수 있으며 모두 브라우저에서 이루어집니다.
작은 아이콘은 Base64로 인라인해야 하나요?
작은 아이콘 몇 개라면 인라인으로 요청을 줄일 수 있습니다. 큰 이미지는 파일로 두는 편이 낫습니다. Base64는 크기를 3분의 1 늘리고, 데이터를 페이지와 따로 캐시할 수 없기 때문입니다. 수치는 Data URI 성능에 있습니다.