언제 쓰나
이메일 본문에 이미지를 인라인으로 박을 때, CSS 의 background-image
에 작은 아이콘을 직접 넣어 외부 요청을 줄일 때, MDX·블로그 글에
스크린샷을 임시로 끼워 두고 싶을 때.
사용법
이미지를 드롭하거나 선택하면 자동으로 base64 Data URI 가 생성됩니다. 미리보기와 함께 원본 크기, 인코딩 후 크기, 오버헤드 (%) 가 같이 나타납니다.
아래 토글로 출력 형식을 고를 수 있습니다.
- Data URI — 그대로 (다른 곳에서 활용)
- CSS background —
background-image: url(...)로 감싸서 복사 <img>태그 —<img src="...">로 감싸서 복사
오버헤드 주의
base64 인코딩은 원본보다 약 33% 커집니다. 작은 아이콘 (수 KB) 에는 좋은
선택이지만, 100 KB 가 넘는 이미지를 인라인하면 HTML/CSS 파일이
부풀어 캐싱 효율이 떨어집니다. 큰 이미지는 일반 <img src="https://...">
로 두고, 진짜 작은 자원만 Data URI 로 옮기세요.
형식 지원
PNG · JPG · WebP · GIF · SVG. 5 MB 까지.
이미지 업로드 없음
FileReader 로 base64 변환 + Data URI / CSS background / '<img>' 3 형식 출력. 파일을 업로드하지 않고 브라우저 안에서 인라인 변환만 합니다.