홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

데이터 URI 및 MHTML 모든 브라우저에 대한 완전한 솔루션

저자：Eve Cole 업데이트 시간：2025-06-01 10:00:04
데이터 URI

데이터 URI는 RFC 2397에 의해 정의 된 솔루션으로 작은 파일을 문서에 직접 포함시킵니다. 다음 구문을 통해 작은 파일을 지정된 인코딩으로 전환하여 페이지에 직접 포함시킬 수 있습니다.

데이터 : [<mime-type>] [; base64], <data>

  1. Mime-Type : 임베디드 데이터의 마임을 지정합니다. 그 형태는 [type]/[subtype]입니다. 예를 들어, PNG 이미지에 해당하는 MIME는 이미지/PNG입니다. 매개 변수는 추가 정보를 사용하여 텍스트/일반 및 텍스트/htm 등에 대한 charset 매개 변수를 지정할 수 있습니다. 기본값은 텍스트/일반; charset = us-ascii입니다.
  2. Base64 : 후속 데이터의 인코딩은 Base64라고 선언합니다. 그렇지 않으면 데이터는 백분율 숫자 (즉, 컨텐츠를 URLENCODE)로 인코딩해야합니다.

지난 세기에 HTML4.01은 데이터 URI 솔루션을 도입했습니다. 오늘날까지 IE6 및 IE7 지원을 제외한 모든 주류 브라우저는 여전히 데이터 URI의 지원에 대한 제한이 있으며, 객체 (이미지), IMG, 입력 유형 = 이미지, 링크 및 CSS 및 데이터 볼륨은 32K보다 클 수 없습니다.

이점:

  1. 동일한 도메인 이름에서 TCP 연결 소비에 대한 제한과 동시 브라우저 수를 제한하지 않고 HTTP 요청 수를 줄입니다.
  2. 작은 파일의 경우 대역폭이 줄어 듭니다. 인코딩 후 데이터의 양이 증가하지만 HTTP 헤더가 줄어 듭니다. HTTP 헤더의 데이터 양이 파일 인코딩 증분보다 큰 경우 대역폭이 줄어 듭니다.
  3. HTTPS 사이트의 경우 HTTPS 및 HTTP를 혼합하기위한 보안 프롬프트가 있으며 HTTPS는 HTTP보다 비싸기 때문에 데이터 URI는 이와 관련하여 더 명백한 이점이 있습니다.
  4. 전체 멀티미디어 페이지를 파일로 저장할 수 있습니다.
단점 :

  1. 재사용 할 수 없습니다. 동일한 문서가 동일한 컨텐츠를 여러 번 적용하면 여러 번 반복해야하며 데이터의 양이 크게 증가하여 다운로드 시간이 증가합니다.
  2. 단독으로 캐시 할 수 없으므로 문서 재 장전이 포함되어있을 때 다시로드해야합니다.
  3. 클라이언트는 소비를 증가시켜 소비를 증가시켜야합니다.
  4. 데이터 압축이 지원되지 않으며 Base64 인코딩은 크기의 1/3 증가가 증가하고 UrlenCode 이후 데이터의 양이 증가합니다.
  5. 보안 소프트웨어 필터링에는 도움이되지 않지만 특정 보안 위험도 있습니다.
MHTML

MHTML은 MIME HTML (다목적 인터넷 메일 확장 HTML)의 약어이며, 이는 Multimedia 페이지의 모든 내용을 동일한 문서에 저장하기 위해 RFC 2557에 의해 정의됩니다. 이 솔루션은 IE5.0 이후이를 지원하기 위해 Microsoft에 의해 제안되었으며 Opera9.0도 지원하기 시작했습니다. Safari는 파일을 .mht (MHTML 파일의 접미사)에 저장할 수 있지만 표시를 지원하지 않습니다.

MHTML 및 DATA URI는 더 강력한 기능과 더 복잡한 구문으로 유사하며 데이터 URI에서 재사용 할 수없는 단점이 없지만 MHTML은 유연하고 편리하지 않습니다. 예를 들어, 자원을 참조하는 URL은 MHT 파일의 상대 주소가 될 수 있으며, 그렇지 않으면 절대 주소 여야합니다. "Cross Browser Base64 HTML에 내장 된 인코딩 된 이미지"에서 Hedger의 솔루션은 MHTML에 따라 컨텐츠 유형 : Message/RFC822를 선언하기 때문에 상대 경로를 사용합니다. 컨텐츠 유형이 수정되지 않은 경우 MHTML 프로토콜이 필요합니다. 현재 "MHTML- 데이터가 필요할 때 : IE7 이하의 URI"와 같은 절대 경로를 사용해야합니다.

애플리케이션

데이터 URI 및 MHTML의 조합은 모든 주류 브라우저를 완전히 해결할 수 있습니다. 캐시 및 재사용 결함으로 인해 페이지에서 직접 사용하기에 적합하지 않습니다. 그러나 CSS 및 JavaScript 파일에서 이미지를 적절히 사용하는 데 큰 이점이 있습니다.

  1. 요청 횟수가 크게 줄어들 었으며 대형 웹 사이트의 CSS는 이제 많은 수의 이미지 리소스를 참조합니다.
  2. CSS와 JavaScript는 모두 캐싱되어 데이터 캐싱을 간접적으로 구현할 수 있습니다.
  3. CSS를 사용하면 데이터 URI의 재사용 문제를 해결할 수 있습니다.
  4. CSS 스프라이트에 작별 인사를하면 CSS 스프라이트는 요청 수를 줄이는 것처럼 보였지만 불확실한 상황에서 예외를 제외하고 CSS 스프라이트는 인공 이미지 병합이 필요합니다. 병합 도구가 있더라도 여전히 퍼즐을 효과적으로 퍼즐하고 유지 보수 어려움을 가져 오는 방법에 많은 시간을 보내야합니다. 특정 설계 원칙을 따르면 CSS 스프라이트를 완전히 포기하여 CSS를 작성하고 마지막으로 Python에서 구현 된 도구와 같이 서버에 업로드하는 동안 이미지를 데이터 URI 및 MHTML로 변환하는 도구를 사용하여 많은 시간을 절약 할 수 있습니다.
  5. Base64 인코딩은 이미지 파일을 1/3 씩 증가시키고 동시에 데이터 URI 및 MHTML의 사용은 2/3의 증가와 동일합니다. 그러나 CSS 및 JavaScript는 GZIP 압축을 사용할 수있어 데이터 볼륨의 2/3을 절약 할 수 있으므로 GZIP 압축을 사용한 후 최종 데이터 볼륨은 (1 + 1/3) * 2 * (1/3) = 8/9이므로 최종 트래픽이 줄어 듭니다.

CSS에서 데이터 URI 및 MHTML의 구현을 용이하게하기 위해 데이터 URI & MHTML 생성기를 작성하여 데이터 URI & MHTML 애플리케이션 인스턴스를 생성하는 데 사용할 수 있습니다.

CSS 파일에서 MHTML을 사용하는 경우 URL은 절대 경로를 사용해야하므로 매우 융통성이 없습니다. 따라서 CSS 표현식을 사용하여 해결 (데모)을 사용하는 것을 고려할 수 있습니다.

/*

http://old9.blogsome.com/2008/10/26/css-expression-reloaded/

http://dancewithnet.com/2009/07/27/get-right-url-from-html/

*/

*배경 이미지 : expression (function (ele) {

ele.style.backgroundimage = 'url (mhtml :' +

document.getElementById ( 'data-uri-css'). getAttribute ( 'href', 4) +

'! 03114501408821761.gif)';

}(이것));

관련 기사