이미지 Data URI 변환
이미지를 HTML src 속성이나 CSS url() 값에 바로 붙여넣을 수 있는 완전한 Data URI로 바꾸세요.
이미지 Data URI 변환은 이미지 파일을 Data URI로 바꿔요. Data URI는 파일 형식과 Base64로 인코딩한 이미지를 모두 담은 한 줄의 텍스트예요. img src 속성이나 CSS url() 값에 바로 붙여넣으면 별도 파일 없이 이미지가 표시돼요. 접두사의 MIME 유형은 파일에서 가져오며, 이미지 바이트는 바뀌지 않아요.
이미지 Data URI 변환 사용 방법
- 1
이미지 열기
아이콘, 로고, 작은 그래픽 같은 이미지 파일을 끌어다 놓거나, 선택하거나, 붙여넣으세요.
- 2
Data URI 받기
data:image/로 시작하는 완전한 Data URI가 길이와 대략적인 크기와 함께 나타나요.
- 3
복사하기
Data URI 복사를 클릭하거나, 바로 쓸 수 있는 코드가 필요하면 HTML 복사나 CSS 복사를 쓰세요.
- 4
페이지에 붙여넣기
img 태그나 CSS 배경처럼 일반 이미지 URL을 쓰는 곳이라면 어디든 쓸 수 있어요.
주요 기능
- 올바른 MIME 유형
- 접두사가 image/png, image/jpeg, image/svg+xml처럼 파일에 맞게 붙어요.
- 원래 바이트 그대로
- 파일을 그대로 인코딩하므로 재압축으로 화질이나 크기가 바뀌지 않아요.
- 바로 복사하는 코드
- Data URI가 이미 들어 있는 완전한 img 태그나 background-image 규칙을 받으세요.
- 안전한 처리
- Data URI는 브라우저에서 만들어지므로 이미지가 업로드되지 않아요.
자주 묻는 질문
Data URI란 무엇인가요?
Data URI는 파일을 가리키는 대신 파일 자체를 담고 있는 링크예요. 이미지의 경우 data:image/png;base64, 같은 접두사로 시작하며, 브라우저는 이를 일반 이미지 URL처럼 표시해요.
CSS에서 Data URI를 어떻게 쓰나요?
CSS 복사를 클릭하면 url() 안에 전체 URI가 담긴 background-image 규칙을 얻을 수 있어요. 스타일시트에 붙여넣으세요.
Data URI를 피해야 할 때는 언제인가요?
큰 이미지나 여러 페이지에서 쓰는 이미지에는 피하세요. 인코딩된 텍스트는 파일보다 약 3분의 1 더 크고, 브라우저가 따로 캐시할 수 없어요.
이메일에서도 Data URI 이미지가 보이나요?
지원 여부가 달라요. 일부 웹메일 서비스를 포함한 많은 이메일 프로그램이 Data URI 이미지를 표시하지 않으니, 이메일을 테스트해 보거나 온라인에 호스팅한 이미지를 쓰세요.
어떤 이미지 형식을 지원하나요?
JPG, PNG, GIF, WebP, AVIF, SVG처럼 브라우저가 열 수 있는 모든 이미지를 지원해요. iPhone HEIC 사진은 먼저 PNG로 변환되므로 Data URI에 image/png가 쓰여요.