css에 data URL 이용하기

dataURL: data: 스키마가 앞에 오는 URL로서, 비교적 작은 크기의 파일을 문서에 임베드할 수 있는 URL

형식

data:[<mediatype>][;base64],<data>

• MIME타입과 base64는 optional (디폴트 text/plain;charset=US-ASCII)

• 예: data:,Hello%2C%20World!

  • url에는 예약된 특수문자(여기서는 컴마와 띄어쓰기)를 사용할 수 없으므로 ascii 테이블의 %2C와 %20 이용

왜 사용하는가?

http 요청을 줄일 수 있기 때문에

사용법

online data url 툴을 이용하면 손쉽게 변환 가능

Svg를 변환해서 사용해보자

Base64

바이너리 데이터를 ASCII로 인코딩 하는 방법. ASCII는 거의 모든 기계가 해석할 수 있는 문자 집합인 반면 binary파일을 해석하지 못하는 경우도 있기 때문에 사용. Mail 시스템같이 binary파일을 해석하지 못하는 경우 데이터가 손실되거나 수정이 될 수도 있기 때문에.

• 주의: base64로 인코딩한다고 해서 보안성이 강화되거나 용량이 줄어들지는 않음. 오히려 1.3배 늘어남

참고자료

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#Encoding_data_into_base64_format

https://flaviocopes.com/data-urls/

https://css-tricks.com/data-uris/