작은 아이콘 이미지를 HTML에 직접 넣고 싶었다. 외부 파일 참조 안 하고 코드에 바로 넣으려면 Base64로 변환해야 한다고 해서 Base64 인코딩 도구를 찾았다.
이미지 파일 변환
이미지 파일을 드래그해서 올리면 이미지 Base64로 변환된다. PNG, JPG, GIF, SVG 다 된다.
변환 결과로 data:image/png;base64,iVBOR... 이런 식의 긴 문자열이 나온다. 이걸 img 태그 src에 넣으면 이미지가 표시된다.
텍스트 Base64 변환
이미지 말고 일반 텍스트도 Base64 변환할 수 있다. API 인증할 때 토큰을 Base64로 인코딩해서 보내는 경우가 있다.
반대로 Base64 문자열을 원래 텍스트로 디코딩하는 것도 된다.
Data URL 생성
이미지 변환하면 Data URL 변환까지 해준다. CSS background-image에 바로 넣을 수 있는 형식이다.
작은 이미지는 Data URL로 넣으면 HTTP 요청이 줄어들어서 로딩이 빨라진다.
파일 정보 표시
변환하면 Base64 디코더 결과와 함께 파일 크기, 인코딩 후 크기도 보여준다. Base64로 변환하면 원본보다 33% 정도 커진다.
웹 개발할 때 작은 아이콘 임베드하려면 텍스트 인코딩 도구 쓰면 편하다.