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는 이미지에 국한되지 않습니다.

ㅋㅋ