2012년 4월 10일 화요일

data uris (데이타 uri스킴)

data uris

데이타 uri스킴이라 읽는거 같습니다.

이것은 이미지같은 외부 데이터를 uri로 표현 하는 방식입니다

보통 <img src='/project/wow.jpg' alt='' /> 와 같이 이미지를 불러들입니다
이 이미지를 불러오는 방식에 대해 의문을 갖고 보신적이 있으신가요?
이렇게 데이터를 저장하고 불러오는 방식뿐이 없을까..
다른 방법이 있습니다
그게 데이타스킴 방식입니다
base64 로 인코딩한 data를 src에 직접 넣는 방식입니다

보통은 절대 또는 상대 경로로 불러옵니다.data file이 있는 경로로 지정하여 불러옵니다
하지만 base64로 인코딩 하여
 <img width="111" height="79" title="" alt="" src="data:image/gif;base64,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" />
이런식으로 넣어도 나옵니다
http://pakss3.realmind.net/datauris.html  (여기서 확인 해 보실수 있습니다)

아래 사이트에서 인코딩하여 넣으면 다른 이미지들도 바로 사용 하실 수 있습니다. http://www.websemantics.co.uk/online_tools/image_to_data_uri_convertor/result/

기본적인 포맷:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

왜 이걸 사용할까?

가장 큰 이유는 HTTP 요청할 이미지 데이터를 저장함으로써 기본적인 document 크기가 다른 요소(이미지 데이터등 )을 불러올때보다 훨씬 빠르게 요소를 가져올 수 있습니다

브라우저 호환성

데이터 URI는 IE 5-7에서 작동하지 않지만, IE 8에서 지원됩니다. 

중요 사항

  • 임베디드 코드의 크기 자체에 의한 자원의 크기보다 약간 큽니다. GZip압축도움 됩니다.
  • Internet Explorer 832,768 바이트의 가장 낮은 최대 데이터 URI 크기를 가지고 있습니다
  • 사이트 모든 데이터를 임베디드 data URIs로 유지하긴 힘들다. 단지 이미지 업데이트하는것은 간편해졌다
  • PHP(or PHP as CSS), 를 사용한다면 data URIs를 만들기 쉽다 <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
  • 용량이 좀 되는 css파일을 캐시하여 사용하면 도움이 된다. css파일이 50kb로 6개가 있다면 300kb의 한번의 문서를 불러들이면 6번의 request를 절약할 수 있다. 그러나 그게 이미지 파일을 캐시 할지 모르겟지만 css파일 만료일 설정을 해주면 도움이 될 것이다.
  • Data URIs는 이미지에 국한되지 않습니다.
원본문서 http://css-tricks.com/data-uris/%20
참고문서 http://jonraasch.com/blog/css-data-uris-in-all-browsers
writer : 오홍홍 // http://pakss3.blogspot.com/

댓글 없음:

댓글 쓰기