세상의 모든 유틸데이터 URL이란
데이터 URL(data URL)은 이미지 파일을 따로 두지 않고 주소 자리에 파일 내용을 그대로 적어 넣는 방식입니다.data:image/png;base64,iVBORw0KGgo... 처럼 data: 다음에 형식 표기(MIME), ;base64 표시, 쉼표, 그리고 파일 내용을 Base64로 바꾼 문자열이 차례로 옵니다. 이미지는 0~255 값을 가진 바이트 덩어리라서 주소나 HTML 속성에 그대로 넣을 수 없는데, Base64는 그 바이트를 영문·숫자와+ / = 64가지 글자로만 다시 적는 표기법이라 어디에 붙여 넣어도 깨지지 않습니다. 그래서 이미지 한 장을 HTML·CSS·JSON 안에 문자열로 담아 둘 수 있고, 브라우저는 그 문자열만 보고 이미지를 그려 줍니다. 파일을 따로 요청하지 않으므로 네트워크 요청 수가 줄고, HTML 파일 하나만 있으면 인터넷 없이도 그림이 보이는 문서를 만들 수 있습니다.
왜 약 33% 커지는가
Base64는 3바이트를 4글자로 바꿉니다. 3바이트는 24비트인데 이것을 6비트씩 네 조각으로 잘라 각각을 글자 하나에 대응시키기 때문입니다. 그래서 변환 후 길이는 원본의 4/3배, 즉 약 33.3% 늘어납니다. 3의 배수가 아니면 남는 자리를 = 로 채우므로 아주 작은 파일은 조금 더 늘어납니다. 여기에 data:image/png;base64, 같은 머리말 길이가 더해집니다. 중요한 점은 그림 품질은 전혀 변하지 않는다는 것입니다. Base64는 압축이나 화질 조정이 아니라 같은 데이터를 다르게 적는 표기 방식일 뿐이어서, 되돌리면 원본과 한 바이트도 다르지 않습니다. 반대로 말하면 용량을 줄이려고 data URL로 바꾸는 것은 거꾸로 가는 일입니다. 용량이 문제라면 이미지 용량 줄이기 도구를 먼저 쓰세요.
언제 쓰고 언제 쓰지 말아야 하는가
- 쓰면 좋은 경우: 몇 KB 이하의 작은 아이콘·로고·불릿 이미지, CSS 스프라이트를 대신할 배경 이미지, 파일 하나로 주고받아야 하는 단일 HTML 문서, 이미지 파일을 둘 수 없는 환경.
- 쓰면 안 되는 경우: 사진처럼 수십 KB를 넘는 이미지. data URL은 HTML·CSS 파일 안에 박히기 때문에 따로 캐시되지 않고 페이지를 열 때마다 33% 커진 내용이 함께 내려옵니다. CSS 안에 큰 이미지를 넣으면 스타일시트가 도착할 때까지 화면 그리기가 늦어지고, 여러 페이지에서 같은 이미지를 써도 매번 다시 내려받습니다.
- 같은 이미지를 두 곳 이상에서 쓰거나, 나중에 이미지만 갈아 끼울 계획이라면 파일로 두고 주소로 불러오는 편이 관리하기 쉽습니다.
크기가 얼마나 늘어나는지 미리 보기
| 예시 | 원본 | Base64 | data URL 전체 | 증가율 | 판단 |
|---|---|---|---|---|---|
| 16×16 favicon (PNG) | 0.5KB | 0.6KB | 0.6KB | +33.3% | 권장 |
| 작은 버튼 아이콘 | 2KB | 2.7KB | 2.7KB | +33.4% | 권장 |
| 로고 이미지 | 12KB | 16KB | 16KB | +33.3% | 상황에 따라 |
| 블로그 본문 사진 | 300KB | 400KB | 400KB | +33.3% | 권장하지 않음 |
| 휴대폰 사진 한 장 | 3,072KB | 4,096KB | 4,096KB | +33.3% | 권장하지 않음 |
Base64 한 글자는 1바이트이므로 글자 수가 곧 늘어난 용량입니다. 위 표는 PNG 기준이며, 파일을 올리면 실제 값으로 다시 계산해 보여 줍니다.
형식은 확장자가 아니라 내용으로 판별합니다
| 형식 | data URL 표기 | 머리 바이트(매직 넘버) |
|---|---|---|
| PNG | image/png | 89 50 4E 47 0D 0A 1A 0A |
| JPEG | image/jpeg | FF D8 FF |
| GIF | image/gif | 47 49 46 38 37 61 / 39 61 ("GIF87a"·"GIF89a") |
| WebP | image/webp | 52 49 46 46 … 57 45 42 50 ("RIFF"…"WEBP") |
| BMP | image/bmp | 42 4D ("BM") + DIB 헤더 크기 |
| ICO | image/x-icon | 00 00 01 00 + 이미지 개수 |
| SVG | image/svg+xml | 없음 (XML 텍스트에서 <svg 태그를 찾는다) |
확장자는 언제든 바꿔 쓸 수 있어 믿을 수 없습니다. 그래서 이 도구는 파일 앞부분의 고정된 바이트를 보고 형식을 정합니다. SVG만은 예외로, XML 텍스트라 고정된 머리 바이트가 없어 앞부분을 글자로 읽어 <svg 여는 태그가 있는지 확인합니다. 지원하지 않는 형식(예: HEIC·TIFF·PDF)이나 10MB를 넘는 파일, 망가진 data URL은 이유를 적어 오류로 알려 줍니다. 되돌리기 칸에 이미지가 아닌 Base64를 넣으면 빈 그림을 보여 주는 대신 이미지가 아니라고 분명히 알려 줍니다.