Base64가 길어지는 이유
Base64는 바이트 3개를 글자 4개로 옮깁니다. 그래서 결과 길이가 원본의 3분의 1만큼 늘어납니다. 여기에 data:image/png;base64, 같은 머리말과 줄바꿈이 더 붙습니다. 5MB짜리 이미지를 넣으면 문자열은 6.7MB가 넘습니다.
data: URI를 쓰는 자리
파일을 따로 올려 둘 수 없는 자리에 씁니다. CSS의 background-image, HTML의 <img src>, 그림을 본문에 담아야 하는 이메일 서명 같은 곳입니다. 아주 작은 아이콘 몇 개를 인라인으로 박으면 그만큼 요청 수도 줄어듭니다.
큰 이미지에는 쓰지 않습니다
data: URI는 자기 주소가 없어서 따로 가리키거나 재사용할 수 없습니다. 같은 그림이 필요한 페이지마다 각자 사본을 싣게 되고, 그 그림 하나만 바꿔도 그것이 박힌 스타일시트 전체의 캐시가 무효가 됩니다. HTML에 직접 박으면 더 나쁩니다. HTML은 대개 캐시되지 않으므로 방문할 때마다 그 바이트가 다시 오갑니다. 배경 사진처럼 큰 이미지는 파일로 두고 링크를 거는 편이 빠릅니다. 인라인은 1KB 안팎의 작은 아이콘까지가 무난합니다.
URL-safe 변형이 따로 있는 이유
표준 Base64는 +와 /를 씁니다. 이 두 글자는 주소나 파일 이름 안에서 다른 뜻으로 읽히므로, URL에 담을 때는 -와 _로 바꾼 URL-safe 변형을 씁니다. 끝의 = 채움 문자도 대개 생략합니다. JWT가 이 형태로 쓰이며, 이 도구는 두 형태를 모두 받습니다.