이미지 파일을 HTML이나 CSS에 직접 삽입하고 싶을 때가 있습니다. 별도 파일로 관리하면 요청 수가 늘어나고, 경로가 바뀌면 깨질 수 있습니다. Base64 인코더로 이미지를 텍스트 문자열로 변환하면 코드에 직접 포함시킬 수 있습니다.
Base64가 뭔가요
Base64는 바이너리 데이터를 텍스트로 표현하는 인코딩 방식입니다. 64개의 문자(영문 대소문자, 숫자, +, /)만 사용해서 어떤 데이터든 텍스트로 변환할 수 있습니다. 이메일 첨부파일, JWT 토큰, 데이터 URL 등에서 널리 사용됩니다. 원본보다 약 33퍼센트 크기가 증가하는 단점이 있지만 텍스트로 다룰 수 있는 장점이 있습니다.
이미지를 Data URL로 변환
companys.kr/base64-encoder에 이미지 파일을 업로드하면 data:image/png;base64,... 형식의 Data URL이 생성됩니다. 이 문자열을 img 태그의 src 속성이나 CSS의 background-image에 넣으면 이미지가 표시됩니다. 작은 아이콘이나 로고를 코드에 직접 포함시킬 때 유용합니다.
텍스트 인코딩과 디코딩
Base64 인코더는 이미지뿐 아니라 일반 텍스트도 인코딩할 수 있습니다. API 인증 정보를 Base64로 인코딩해서 헤더에 담는 Basic 인증 방식에서 사용합니다. 인코딩된 문자열을 다시 원래 텍스트로 디코딩하는 것도 가능해서 디버깅할 때 도움이 됩니다.
드래그 앤 드롭으로 간편하게
파일 선택 버튼을 누르지 않아도 이미지를 끌어다 놓으면 바로 변환이 시작됩니다. 변환된 Base64 문자열은 복사 버튼으로 클립보드에 담을 수 있습니다. 여러 이미지를 연속으로 처리할 때 빠르게 작업할 수 있습니다.
요약
이미지를 코드에 직접 삽입하거나 텍스트 형식으로 전송해야 할 때 Base64 인코딩이 필요합니다. 온라인 Base64 인코더로 이미지와 텍스트를 간편하게 변환해보세요.