블로그나 이메일에 이미지를 넣을 때 보통 이미지 파일을 따로 업로드하고 링크를 거는 방식을 씁니다. 근데 이미지 서버가 죽거나 파일이 삭제되면 이미지가 깨져버려요. 이런 문제를 피하려면 이미지를 Base64로 변환해서 HTML 코드 안에 직접 넣는 방법이 있습니다.
Base64 인코딩이 뭔가
Base64는 바이너리 데이터를 텍스트로 변환하는 방식이에요. 이미지 파일은 원래 0과 1로 된 바이너리인데, 이걸 알파벳과 숫자 조합의 문자열로 바꿔줍니다. 이렇게 변환하면 HTML img 태그의 src에 직접 넣을 수 있어요. 외부 파일 링크가 아니라 코드 자체에 이미지 데이터가 포함되는 거죠.
Base64 변환기에서 이미지 파일을 업로드하면 바로 Base64 코드가 나옵니다. 이 코드를 img src에 data:image/png;base64,코드 형식으로 넣으면 별도 이미지 파일 없이 이미지가 표시돼요.
언제 쓰면 좋은가
아이콘 같은 작은 이미지에 적합합니다. 5KB 이하의 작은 이미지는 Base64로 넣으면 HTTP 요청 수가 줄어들어서 페이지 로딩이 빨라질 수 있어요. 하지만 큰 이미지는 Base64 코드가 엄청 길어져서 HTML 파일 크기가 커집니다. 그래서 로고나 아이콘 정도만 이 방식을 추천해요. 100KB 넘는 사진은 그냥 파일로 올리는 게 낫습니다.
이메일 템플릿에도 유용합니다. 이메일 클라이언트마다 외부 이미지 차단 설정이 다른데, Base64로 넣으면 이미지가 이메일 본문에 포함되니까 차단될 걱정이 없어요. 마케팅 이메일 보낼 때 이 방식을 많이 씁니다.
실제 사용 예시
Base64 변환기에서 PNG나 JPG 파일을 드래그앤드롭하면 Data URL 형식으로 변환해줍니다. 이 코드를 복사해서 HTML에 붙여넣기만 하면 끝이에요. 미리보기도 제공해서 변환이 제대로 됐는지 확인할 수 있습니다.