이게 뭔가요?
이미지를 Base64 Data URI로 변환합니다. 결과를 CSS background-image, HTML <img>, 마크다운 형식으로 바로 복사할 수 있습니다.
언제 쓰나요?
- 작은 아이콘을 CSS에 인라인으로 박아 HTTP 요청을 줄일 때
- 이메일 템플릿처럼 외부 이미지가 차단되는 환경에 이미지를 넣을 때
- 이미지 파일을 따로 배포하기 곤란한 단일 HTML 파일을 만들 때
언제 쓰지 말아야 하나요?
Base64는 원본보다 약 33% 커집니다. 그리고 인라인된 이미지는 브라우저가 따로 캐시하지 못합니다.
큰 이미지를 인라인하면 HTML·CSS 파일이 무거워지고, 페이지를 열 때마다 그 데이터를 다시 받게 됩니다. 대략 10KB 이하의 작은 아이콘·로고에만 쓰는 게 좋습니다.
주의할 점
- 변환은 브라우저 안에서만 이뤄지며 파일이 서버로 전송되지 않습니다.
- 5MB를 넘는 이미지는 변환하지 않습니다.
- SVG는 Data URI로 만드는 것보다 코드를 그대로 넣는 편이 용량이 훨씬 작습니다.
실무에서 — “요청 수를 줄이면 빨라진다”는 생각으로 이미지를 전부 인라인했다가 오히려 첫 화면이 느려지는 경우가 있다. HTTP/2 이후로는 요청 수보다 캐시 활용이 중요해졌다. 인라인은 정말 작은 아이콘에만 쓰고, 나머지는 파일로 두는 편이 대체로 빠르다.