이미지 Base64 변환으로 작은 아이콘을 HTML에 바로 넣기

개발

메일 템플릿이나 독립 HTML 샘플을 만들 때 작은 아이콘 하나 때문에 별도 이미지 호스팅을 준비하기 번거로운 경우가 있습니다.

이럴 때는 브라우저에서 바로 쓸 수 있는 Dante Tools를 열어 먼저 손으로 검증해보는 것이 좋습니다. 작은 확인 과정을 거치면 배포 후 되돌리는 시간을 줄일 수 있습니다.

이미지 Base64 변환 사용 화면
이미지 Base64 변환 사용 화면

언제 쓰면 좋은가

메일 템플릿, 테스트 HTML, 임시 문서에 작은 이미지를 외부 호스팅 없이 넣어 확인하는 방법입니다.

Base64로 넣기 좋은 이미지

16x16 아이콘
작은 로고 플레이스홀더
테스트용 상태 배지

실무 루틴

  1. 작은 PNG나 SVG 대체 이미지를 업로드합니다.
  2. Data URL 결과를 복사합니다.
  3. HTML의 img src에 붙여 넣고 렌더링을 확인합니다.
  4. 이미지가 커지면 Base64 대신 정식 이미지 호스팅으로 바꿉니다.

배포 전 체크

  • 이미지 크기가 너무 커져 HTML이 무거워지지 않았는가
  • 메일 클라이언트에서 Data URL을 허용하는가
  • 운영 코드에 임시 Base64 이미지를 그대로 남기지 않았는가

Base64 이미지는 임시 확인과 작은 에셋에는 편하지만, 큰 이미지를 넣는 용도로는 적합하지 않습니다. 용도를 좁혀 쓰면 꽤 실용적입니다.

다른 글