Base64 이미지 인코더
처리 중...
작은 이미지를 Base64 data URI로 인라인하면 HTTP 요청 하나를 줄이고 HTML이나 CSS와 함께 자산을 전달할 수 있습니다. 이 인코더는 5 MiB 이하의 지원되는 PNG, JPEG, GIF, WebP, SVG를 받습니다. 디코딩된 래스터 이미지는 어느 한 변도 16,384픽셀을 넘을 수 없으며 전체 픽셀 수도 33,554,432개 이하여야 합니다. 래스터 이미지는 브라우저에서 디코딩을 확인하고 SVG는 UTF-8 구조만 검사한 뒤 Base64, CSS, HTML, JSON 형식을 만듭니다. 대상 시스템에서 호환성을 확인하고 신뢰할 수 없는 SVG는 인코딩 후에도 활성 콘텐츠로 취급하세요.
이미지를 인코딩하는 방법
-
1
이미지를 끌어다 놓기
5 MiB 이하의 PNG, JPG, GIF, WebP 또는 SVG를 선택하세요. 래스터 이미지는 어느 한 변도 16,384픽셀을 넘을 수 없고 전체 픽셀 수도 33,554,432개 이하여야 하며, 인코딩된 텍스트는 7 MiB 미만으로 유지됩니다.
-
2
인코딩은 브라우저에서 실행
이미지 바이트를 읽고 Base64로 인코딩한 뒤 올바른 `data:` URI 헤더를 붙입니다.
-
3
출력 형식 선택
원본 Base64, CSS `background-image` 규칙, HTML `<img>` 태그, 또는 JSON에 안전한 문자열 중에서 선택합니다.
-
4
결과 복사
대상 시스템의 data URI 지원, 크기 제한, 콘텐츠 안전성을 확인한 뒤 붙여넣으세요.
이미지를 인라인할 가치가 있는 경우
인라인하기 좋은 대상:
- 2 KB 미만 아이콘, 무시할 만한 추가 용량으로 HTTP 요청을 줄입니다.
- 이메일 템플릿 - 데이터 URI 지원은 메일 클라이언트마다 다릅니다. 대상 클라이언트에서 테스트하고 필요하면 CID 이미지나 호스팅 이미지를 사용하세요.
- 히어로 플레이스홀더(LQIP), 저화질의 흐릿한 버전을 인라인으로 먼저 보여주고 완전한 이미지는 나중에 불러옵니다.
- 한 번만 쓰는 SVG, 예약 문자를 올바르게 퍼센트 인코딩하면 비Base64 data URI가 더 짧을 수 있습니다. 신뢰할 수 없는 SVG는 계속 활성 콘텐츠로 취급해야 합니다.
인라인에 적합하지 않은 대상:
- 큰 이미지, 500 KB 이미지가 33% 부풀면 166 KB가 낭비됩니다.
- 여러 페이지에서 재사용하는 이미지, 인라인하면 경로 간 브라우저 캐싱이 동작하지 않습니다.
- 크리티컬 CSS, 무거운 이미지를 인라인하면 크리티컬 패스가 커집니다.
예상 크기
| 이미지 크기 | Base64 문자열 크기 |
|---|---|
| 500바이트 | 약 680자 |
| 2 KB | 약 2.7 KB |
| 20 KB | 약 27 KB |
| 200 KB | 약 270 KB |
Data URI 형식
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
data:스킴- MIME 타입
;base64,표시자- 인코딩된 바이트
SVG는 특수한 경우입니다
SVG는 텍스트이지만 Base64와 퍼센트 인코딩 중 어느 쪽이 짧은지는 내용과 필요한 인코딩 양에 따라 달라집니다. 비Base64 형식은 data:image/svg+xml, 뒤의 예약 문자를 올바르게 퍼센트 인코딩하세요. 흔히 쓰이는 ;utf8은 표준 매개변수가 아니며 퍼센트 인코딩을 대신하지도 않습니다. 이 도구는 SVG를 미리 보여 주지 않고 UTF-8 구조만 확인하므로, 신뢰할 수 없는 SVG는 활성 콘텐츠이며 Base64는 살균 수단이 아닙니다.
자주 묻는 질문
Base64는 data URI 래퍼와 전송 압축을 고려하기 전에 바이너리 데이터 크기를 약 3분의 1 늘립니다. 항상 유리한 고정 크기 기준은 없습니다. 요청 수, 캐시, 압축, 재사용 빈도를 비교하고 실제 사이트에서 측정하세요.
data URI 자체가 자동으로 SEO 이점을 주지는 않습니다. 검색 엔진은 주변 HTML을 다루지만 CSS 배경에는 alt 속성과 같은 대체 텍스트가 없습니다. 의미를 전달하는 이미지에는 적절한 대체 텍스트가 있는 <img>를 사용하고 성능은 별도로 평가하세요.
아니요. 인코더는 FileReader API로 파일을 로컬에서 읽고 브라우저 안에서 Base64 문자열을 생성합니다. 어떤 데이터도 사용자의 기기를 떠나지 않습니다.
네. Base64 to Image 도구를 사용하면 data:image/... URI를 다시 내려받을 수 있는 파일로 되돌릴 수 있습니다.
관련 도구
PNG를 SVG로 벡터화
브라우저에서 PNG 래스터 이미지를 SVG 패스로 변환합니다. 로고, 아이콘, 선화에 적합하며 임계값, 색상 수, 스무딩을 조절할 수 있습니다.
GIF 제작기
이미지 시퀀스나 짧은 영상을 애니메이션 GIF로 변환합니다. 내보내기 전에 프레임률, 반복 횟수, 크기를 조정하세요.
바코드 생성기
Code 128, EAN-13, UPC, ITF-14와 다른 7가지 선형 바코드를 만드세요. 데이터는 브라우저에 남으며 SVG 또는 PNG로 다운로드할 수 있습니다.
QR 코드 생성기
텍스트 또는 URL로 브라우저 안에서 QR 코드를 만들고 PNG로 다운로드하세요.
이미지 압축기
시각 품질을 유지하면서 JPG, PNG, WebP 이미지를 압축해 파일 크기를 줄입니다. 업로드 없이 브라우저 안에서 처리합니다.
밈 이미지 생성기
JPG, PNG, WebP 이미지에 고정된 위아래 문구를 넣고 글꼴, 색상, 외곽선을 조절한 뒤 브라우저에서 PNG로 저장하세요.