레이블이 Data URIs인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Data URIs인 게시물을 표시합니다. 모든 게시물 표시

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 8은 32,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/
작성자: 시간: 댓글 없음:
라벨: , , , ,

2012년 3월 21일 수요일

Data URIs

by: Chris Coyier
번역:pakss3
Mar 25 2010
70
HTML로 <img> 요소를 사용하거나 CSS에서 배경 이미지를 선언하면 외부 이미지 파일에 연결하지 않아도 된다. 당신은 Data URIs를 사용하여 문서에 직접 이미지 데이터를 추가할 수 있습니다.

With CSS, it looks like this:
li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/ 
        XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QA
nQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}
 
With HTML, it looks like this:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQ
AMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVIC
SOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViF
IDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
 
기본적인 포맷:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
기본적으로 긴 캐릭터의 문자열입니다. 어이없이 긴 코드 같지만 이 코드를 브라우저가 읽어들여 해석합니다
여기를 클릭하면 샘플 페이지를 볼 수 있습니다. 여기가 글쓴이가 봣을땐 가장 좋은 사이트 같다고 합니다 

왜 이걸 사용할까?

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

어떻게 코드를 구합니까?

Use this online conversion tool. It's the nicest one I have found.

브라우저 호환성

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

중요 사항

  • 임베디드 코드의 크기 자체에 의한 자원의 크기보다 약간 큽니다. GZip압축이 도움 됩니다.
  • Internet Explorer 8은 32,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

근데 이미지가 너무 커지면 안된다..
작성자: 시간: 댓글 없음:
라벨: , ,
홈
피드 구독하기: 글 (Atom)