인코딩
Data URI / Base64 이미지
이미지를 Data URI(data:image/…;base64,…)로 인코딩해 CSS/HTML에 삽입하고, Data URI나 순수 Base64를 다시 파일로 디코딩 — 모두 브라우저에서 바로.
여기에 이미지 미리보기가 표시됩니다.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
자주 묻는 질문
Data URI는 언제 사용하는 게 좋은가요?
작은 아이콘이나 스프라이트처럼 별도 HTTP 요청을 줄이고 싶은 이미지를 CSS나 HTML에 직접 삽입할 때 유용합니다. 반면 용량이 큰 이미지는 파일 크기가 커지고 브라우저·이메일 클라이언트별 크기 제한에 걸릴 수 있어 적합하지 않습니다.
Data URI로 넣은 이미지도 일반 파일처럼 캐시되나요?
아니요. Data URI는 HTML/CSS 문서 안에 이미지 데이터 자체가 포함된 형태라 별도의 리소스 URL이 없고, 브라우저가 독립된 파일처럼 캐싱하지 않습니다. 같은 이미지를 여러 곳에서 반복 사용하면 문서 크기만 계속 늘어납니다.
업로드한 이미지가 서버에 저장되나요?
아니요. 인코딩과 디코딩 모두 브라우저 안에서 처리되며 이미지 파일이나 Data URI는 서버로 전송되지 않습니다.
SVG를 Base64 없이 Data URI로 사용할 수 있나요?
네. SVG는 텍스트(XML)이므로 Base64 대신 특수 문자를 percent-encoding하는 것으로 충분합니다: data:image/svg+xml,%3Csvg...%3E. 이 방식은 더 작고 CSS 파일 안에서 그대로 편집할 수 있습니다.
href 속성이나 background-image에도 Data URI를 쓸 수 있나요?
네, Data URI는 리소스 참조가 필요한 모든 곳 — src, href, CSS의 background-image, 심지어 @import에서도 사용할 수 있습니다. 문법과 크기 제한은 img 태그와 동일합니다.