코드에 이미지 직접 삽입하기
별도의 파일 없이 이미지를 사용해야 할 때가 있습니다. 스타일시트의 아이콘, 단일 파일 HTML 문서의 로고, JSON API 응답의 플레이스홀더, 마크다운 문서의 이미지, 컴포넌트 라이브러리의 배경 이미지 등이 그렇습니다. 이 변환기는 모든 이미지를 Base64로 인코딩하여 즉시 붙여넣을 수 있는 형태로 제공합니다. Data URI, 일반 Base64, CSS background-image, HTML <img> 태그, 마크다운 이미지 문법을 지원합니다.
주요 기능
- 모든 주요 이미지 포맷 지원: PNG, JPG, GIF, WebP, AVIF, SVG, ICO 등.
- 5가지 출력 포맷: 다양한 용도에 맞게 제공.
- 용량 비교: 원본 파일과 인코딩된 텍스트 크기 비교.
- 이미지 미리보기: 투명도 체커보드 배경 지원.
- 원클릭 복사.
- 개인정보 보호: 파일이 브라우저 외부로 전송되지 않습니다.
출력 예시
| 포맷 | 예시 |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| Base64 | iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt="logo"> |
| 마크다운 |  |
삽입하는 이미지 용량 최적화
코드에 삽입된 이미지는 개별적으로 캐시될 수 없으며, 해당 이미지가 포함된 페이지나 스타일시트를 불러올 때마다 다시 다운로드됩니다. 일반적으로 몇 킬로바이트 이하의 작은 이미지만 삽입하는 것이 좋습니다. 먼저 이미지 압축 도구로 이미지 용량을 줄이거나, 비트맵이 필요한 경우 SVG PNG 변환 도구로 벡터 아이콘을 변환하세요. 다른 파일이나 텍스트를 인코딩하려면 Base64 인코더를 사용할 수 있습니다.