이메일 템플릿에 로고 이미지를 넣어야 하는데, 외부 이미지 링크가 차단되는 경우가 있다. 그럴 때 이미지를 Base64로 인코딩해서 HTML에 직접 넣으면 된다.
Base64가 뭔지
바이너리 데이터를 텍스트 문자로 바꾸는 인코딩 방식이다. 이미지 파일은 바이너리인데, HTML은 텍스트다. Base64 인코딩으로 이미지를 텍스트로 바꾸면 HTML 안에 직접 넣을 수 있다.
결과는 ABCDabcd1234+/ 같은 영숫자랑 +, / 조합으로 이루어진 긴 문자열이다.
텍스트 Base64 변환
간단한 텍스트도 Base64 변환이 된다. "Hello"를 인코딩하면 "SGVsbG8="가 나온다.
Base64 디코딩은 반대로 "SGVsbG8="를 "Hello"로 되돌린다. API 응답이나 설정 파일에서 Base64로 인코딩된 값을 볼 때 디코딩해서 확인할 수 있다.
이미지 Base64 변환
이게 더 자주 쓰는 기능이다. 이미지 Base64 변환으로 PNG, JPG, GIF, SVG, WebP 파일을 텍스트로 바꿀 수 있다.
드래그 앤 드롭으로 이미지 올리면 Base64 문자열이 나온다. 그리고 Data URL 변환 결과도 같이 나온다:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
이 Data URL을 img 태그의 src에 넣으면 외부 파일 없이 이미지가 표시된다.
언제 쓰나
- 이메일 HTML 템플릿: 외부 이미지 차단 우회
- 작은 아이콘: HTTP 요청 줄이기
- CSS에 배경 이미지 넣기
- 단일 HTML 파일로 문서 만들기
이미지 미리보기
이미지 인코딩 하면 원본 이미지 미리보기도 같이 나온다. 제대로 된 파일인지 확인할 수 있다.
파일 정보도 표시된다. 원본 크기, 인코딩 후 크기, 파일 형식 등. Base64로 바꾸면 용량이 약 33% 늘어난다는 것도 알 수 있다.
텍스트 인코딩 vs 이미지 인코딩
텍스트 인코딩은 문자열을 Base64로 바꾸는 거다. JWT 토큰 같은 게 Base64 인코딩되어 있다.
Base64 인코더에서 텍스트 탭과 이미지 탭이 분리되어 있어서 목적에 맞게 선택하면 된다.
Base64 디코더로 원본 확인
Base64 문자열이 뭔지 모르겠으면 Base64 디코더에 넣어보면 된다. 텍스트면 원래 내용이 나오고, 이미지면 미리보기가 표시된다.
정리
이미지를 HTML에 직접 넣거나, 인코딩된 문자열 확인할 때 Base64 변환기 쓰면 된다. 이미지 드래그 앤 드롭으로 Data URL 바로 얻을 수 있어서 편하다.