Data URL 만들기
작은 PNG, JPG, WEBP, SVG 파일을 data URL로 바꿔 샘플 HTML이나 임시 테스트 코드에 바로 붙일 수 있습니다.
이미지 Base64 변환기
🔒 브라우저 내부 처리
이미지 ↔ data URL 변환.
Guide
이미지 Base64 변환 판단 기준
작은 아이콘, 테스트 이미지, data URL을 파일과 문자열 사이에서 바꿔 CSS, HTML, API 샘플에 활용합니다.
문자열에서 파일 복원
전달받은 Base64 이미지 문자열이 실제로 어떤 이미지인지 브라우저에서 복원해 확인합니다.
외부 업로드 없이 확인
이미지 읽기와 변환은 브라우저에서 처리되며, 파일이나 Base64 문자열을 별도 서버에 올리지 않습니다.
Workflow
사용 순서
- 이미지 파일을 선택해 data URL 결과를 생성합니다.
- HTML, CSS, JSON 샘플에 넣을 때는 문자열 길이와 MIME 타입을 함께 확인합니다.
- Base64에서 이미지로 복원할 때는 접두어가 있는 data URL인지 순수 Base64인지 구분합니다.
- 최종 서비스에는 파일 크기와 캐싱 전략을 고려해 data URL 사용 여부를 결정합니다.
Examples
실제 입력과 결과
작은 아이콘을 data URL로
입력
icon.png (1.2 KB)결과
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...CSS나 HTML에 그대로 붙여 넣으면 추가 요청 없이 표시됩니다.
Troubleshooting
자주 만나는 오류
용량이 오히려 늘어날 때
Base64는 원본보다 약 33% 커집니다. 수십 KB가 넘는 이미지를 data URL로 넣으면 HTML/CSS 파일이 무거워져 첫 렌더링이 느려집니다. 작은 아이콘에만 쓰세요.
브라우저 캐시가 안 먹을 때
data URL은 문서에 포함되므로 이미지 단위 캐싱이 되지 않습니다. 여러 페이지에서 재사용하는 이미지는 일반 파일로 두는 편이 낫습니다.
Review
확인할 점
Base64는 크기가 늘어남
Base64는 원본보다 보통 더 긴 문자열이 됩니다. 큰 이미지를 data URL로 넣으면 HTML과 CSS가 무거워질 수 있습니다.
MIME 타입 확인
data:image/png;base64 같은 접두어가 실제 이미지 형식과 맞지 않으면 브라우저나 API에서 예상과 다르게 처리될 수 있습니다.
Related