이미지 파일

data URL

이미지 Base64 변환 판단 기준

작은 아이콘이나 테스트 이미지를 코드에 직접 박아야 할 때 data URL로 바꿉니다. 요청 한 번을 줄이는 이득이 있지만 결과가 원본보다 33% 커지고 캐시가 안 되므로 정말 작은 이미지에만 맞습니다. 반대로 전달받은 data URL이 어떤 이미지인지 확인하려면 파일로 되돌려 열어보면 됩니다.

Data URL 만들기

작은 PNG, JPG, WEBP, SVG 파일을 data URL로 바꿔 샘플 HTML이나 임시 테스트 코드에 바로 붙일 수 있습니다.

문자열에서 파일 복원

전달받은 Base64 이미지 문자열이 실제로 어떤 이미지인지 브라우저에서 복원해 확인합니다.

외부 업로드 없이 확인

이미지 읽기와 변환은 브라우저에서 처리되며, 파일이나 Base64 문자열을 별도 서버에 올리지 않습니다.

자주 만나는 오류

용량이 오히려 늘어날 때

Base64는 원본보다 약 33% 커집니다. 수십 KB가 넘는 이미지를 data URL로 넣으면 HTML/CSS 파일이 무거워져 첫 렌더링이 느려집니다. 작은 아이콘에만 쓰세요.

브라우저 캐시가 안 먹을 때

data URL은 문서에 포함되므로 이미지 단위 캐싱이 되지 않습니다. 여러 페이지에서 재사용하는 이미지는 일반 파일로 두는 편이 낫습니다.

확인할 점

Base64는 크기가 늘어남

Base64는 원본보다 보통 더 긴 문자열이 됩니다. 큰 이미지를 data URL로 넣으면 HTML과 CSS가 무거워질 수 있습니다.

MIME 타입 확인

data:image/png;base64 같은 접두어가 실제 이미지 형식과 맞지 않으면 브라우저나 API에서 예상과 다르게 처리될 수 있습니다.

Data URL은 33% 커집니다

Base64는 3바이트를 4글자로 바꾸므로 결과가 원본보다 약 3분의 1 커집니다. 아이콘처럼 아주 작은 이미지에서는 요청 한 번을 줄이는 이득이 크지만, 큰 이미지는 파일로 두고 캐시를 쓰는 편이 빠릅니다.

CSS에 넣으면 캐시가 안 됩니다

이미지를 CSS 안에 Data URL로 박으면 이미지가 스타일시트의 일부가 됩니다. 이미지 하나만 바뀌어도 CSS 전체가 무효화되고, 브라우저가 이미지를 따로 캐시하지 못합니다. 자주 바뀌는 이미지는 넣지 마세요.

Data URL은 로그와 diff를 망칩니다

한 줄이 수만 자가 되므로 git diff에서 변경 내역을 읽을 수 없고 코드 리뷰가 사실상 불가능해집니다. 에러 로그에 들어가면 로그 파일이 부풀어 다른 정보를 덮습니다. 소스에 박아둘 이미지는 정말 작은 것만 고르세요.

사용 순서

이미지 파일을 선택해 data URL 결과를 생성합니다.

HTML, CSS, JSON 샘플에 넣을 때는 문자열 길이와 MIME 타입을 함께 확인합니다.

Base64에서 이미지로 복원할 때는 접두어가 있는 data URL인지 순수 Base64인지 구분합니다.

최종 서비스에는 파일 크기와 캐싱 전략을 고려해 data URL 사용 여부를 결정합니다.

실제 입력과 결과

작은 아이콘을 data URL로

입력

icon.png (1.2 KB)

결과

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

CSS나 HTML에 그대로 붙여 넣으면 추가 요청 없이 표시됩니다.

함께 쓰면 좋은 도구