데이터 URI의 목적은 무엇입니까?

Question

서버의 파일로 저장된 리소스에 링크되는 일반 URI를 사용하는 대신 리소스가 데이터 URI에 포함되는 경우가 있습니다. 서버를 감소

Answer 1

1.

데이터의 URI는 자원을 획득하는 데 필요한 HTTP 요청의 수를 줄임으로써, 클라이언트 성능을 서버 부하를 감소시키고 개선하는 데 사용할 수 있습니다 요청합니다. 예를 들어, HTML은 :

<img src="assets/bullet.png"> 

...이 교체 할 수 있습니다 :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
> 

는 ...이 같은 이미지를 생산하기 위해 : 적은 하나 HTTP 요청을.

참고 : 스택 오버플로 게시물에 데이터 URI 이미지를 포함 할 수없는 것으로 보입니다. 그러나 위의 이미지는 표시된 데이터 URI를 사용하여 이미지 호스팅 서비스에 업로드되었습니다.

, 예를 들어, 귀하의 사이트가 스타일 시트에서 데이터의 URI로 모두를 지정, 많은 작은 아이콘을 사용하는 경우

:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */ 

... 전체의 비용으로 HTTP 요청의 큰 숫자를, 제거 할 수 있습니다 다운로드 크기, 가독성 및 잘못된 편집으로 인해 URI가 무의미하게 (그리고 수정하기 어려울 수 있음) 증가 할 가능성이 있습니다.

이미지에 대해 동일한 결과를 얻는 다른 방법은 CSS sprites을 사용하는 것입니다. 하나의 파일

URI가 정확하게 하나의 문서에서 페이지를 표시하는 데 필요한 모든 리소스를 포함하는 데 사용할 수있는 데이터의 내용을 포함하기

2. 이것은 예를 들어, 하나의 소프트웨어와 함께 배포되는 README 파일. 이론적으로 데이터 URI는 HTML 전자 메일에 리소스를 포함하기 위해 첨부 파일을 사용하는 대신 사용할 수도 있지만 실제로 데이터 URI에 대한 클라이언트 지원은 유용한 기법으로 too unreliable입니다. 페이지 콘텐츠는 HTTP 및 HTTPS의 혼합물을 통해 제공이 포함 된 경우

3. 방지 브라우저 경고

일부 브라우저는 경고를 표시합니다. 이미지와 같은 정적 컨텐츠가 일반적으로 HTTP를 통해 제공되지만 HTTPS를 통해 동적 컨텐츠가 제공되도록 서버를 설정 한 경우 정적 컨텐츠에 데이터 URI를 포함시키는 것이 가능한 해결책입니다.

Answer 2

이전 답변 (매우 좋은 요약) 외에도 최근에 이것을 사용해온 한 가지는 글꼴입니다. 글꼴의 작은 하위 집합 (예 : 로고의 디자인 -y 글꼴 또는 특수한 dingbat 글 머리 기호 아이콘)을 사용해야하는 경우 CSS @ font-face 선언에 필요한 문자 만 인코딩 할 수 있습니다 사용자가 전체 글꼴 파일을 다운로드하도록하지는 않습니다.

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

: 만 악마 (D)와 천사 (e)를 원하는 경우 예를 들어

는, 나는 이런 식으로 뭔가를 만들 수 FontSquirrel의 webfont 생성기 도구 (http://www.fontsquirrel.com/tools/webfont-generator)를 사용할 수 있습니다 Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB)에서 직면

예제를 보려면 다음을 참조하십시오. http://jsfiddle.net/vuuVh/