Data URI 분석

최근 인상에서 가장 기대되는 브라우저 기능 중 하나가 바로 데이터 URI다.최근에는 데이터 URI에 관한 글이 많이 올라왔다. 내 동료인 Stoyan Stefanov는 데이터 URI에 관한 글 두 편을 썼고, 내 옛 동료인 Hedger Wang도 IE에서 데이터 URI를 어떻게 사용하는지에 관한 글을 썼다.그러나 예상외로 데이터 URI에 대한 오해와 당혹감은 여전히 심심치 않게 이어졌다.그것은 무엇입니까?그것은 어떻게 일합니까?왜 당신은 그것을 사용하고 싶습니까?

URI입니다. URL이 아닙니다.

URL은 uniform resource locator의 약자로서 특정한 자원에 대한 프로토콜 (어떤 방식으로 데이터를 가져오는지) 과 주소의 조합입니다.그림, JS 파일, HTML 파일, 스타일시트 파일 등 공개적으로 접근할 수 있는 모든 자원, 예를 들어 브라우저가 어디서 다운로드하는지 알려주는 URL이 있습니다.브라우저는 이 URL에 따라 링크를 만들고 이 파일을 다운로드하거나 실행하기 시작합니다.
URL도 URI입니다. URI는 uniform resource identifier의 약자입니다.URI는 리소스에 대한 추가 정보를 포함하여 정보를 수신할 프로토콜을 지정합니다.그 추가 정보는 주소일 수도 있고 아닐 수도 있지만 (만약 그렇다면 URI는 URL이다), 항상 특정한 프로토콜과 관련이 있다.따라서 주소 정보가 포함되지 않은 이상 데이터 URI도 URL이 아닙니다.

Data Uri 형식

데이터 URI의 형식은 매우 간단합니다. RFC 2397에 명확한 설명이 있습니다. (아주 짧습니다. 당신은 그것을 모두 볼 수 있습니다.)기본 형식은 다음과 같습니다.

data:[][;charset=][;base64],

이 형식에서 데이터: URI 프로토콜은 데이터 URI임을 나타냅니다.두 번째 부분은 MIME type으로 표시할 데이터의 유형을 나타냅니다.PNG 그림을 예로 들면, MIME type은 이미지/png입니다.지정하지 않으면 MIME type은 기본적으로 text/plain이 됩니다.charset은 대부분의 경우 무시할 수 있으며 그림에 대해서는 전혀 쓸모가 없습니다.다음 부분은 사용된 인코딩을 가리킨다.유행 관념과 반대로, 너는 반드시base64 인코딩을 사용할 필요가 없다.만약 내용을base64로 인코딩하지 않는다면, 이 데이터는 표준 URL 인코딩을 사용합니다. (URL에 안전한 ASCII 문자는 그대로 표시되고, 나머지는 x x 형식의 16진수 인코딩으로 표시됩니다.)인코딩된 데이터는 공백을 포함할 수 있습니다.

Base 64 인코딩

Base 64 인코딩은 데이터를 2진 코드로 변환한 다음base 64 기호의 서열로 조합하는 인코딩 규칙입니다.Base 64 기호는 대문자 A부터 Z, 숫자, 기호 + 및/=로 구성됩니다.번호는 채우는 데 사용됩니다. (위키백과에 있는 글을 보면 더 많은 정보를 얻을 수 있습니다.)당신이 진정으로 알아야 할 것은base64 인코딩이 인코딩된 데이터를 더욱 작게 만들 수 있다는 것이다.
다음 예는 GIF 이미지가 base 64로 인코딩된 데이터 URI(소스)입니다.

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

같은 이미지가 base 64 인코딩을 사용하지 않으면 다음과 같이 표시됩니다.

data:image/gif,GIF89a%22%00%1B%00%F7%00%00lll%D6%D6%D6%FF%EB%85 %FF%E0%7B%FF%F7%91%FF%D4o%DF%DF%DF%F6%F6%F6%87%87%87%FE %CBf%FF%F4%8E%E6%B3NKKK%C5%92-%FF%FF%99%FF%FF%FF%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00 %00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%2C%00%00 %00%00%22%00%1B%00%00%08%A9%00%1F%08%1CH%B0%A0%C1%83%08 %13*%5C%C8%B0%A1%C3%87%10%23J%9CH%91%60%83%8B%0D%0C%1C %A8h%B0%81%C5%00%1B9%0A%F4%E8%A0%A4%83%07%181j%9C%D8%80 %80%82%97%2F%0B6%40%60%80%A5%00%01)s%AA%94%D8%60%80G%84 %02P%22%E0Y%A0%81%C9%A3%25%138h%00%80g%02%A3%04%A2J%8D %BA%60i%D3%88%0D%9E%3A%B8%C9%95kU%A6N%8D%0E%18Kv%EC%D7 %AB%10%B3%1A-%C0%B6-%5B%A3%60%23%1A%D0I%97%C1%D0%88%07 %02%20%00%C0%B7%AF_%00%08%02L%3C%60%20%80%E1%C3%88%03 %AC%14%C9%B8%B1%E3%C7%90%23K%9EL0%20%00%3B

크기로 말하자면base64로 인코딩된 그림이 완승하였는데, 그것은 훨씬 작았다.
참고: Base 64 인코딩은 이미지를 크게 만듭니다.그러나 만약 HTTP 압축을 사용한다면 베이스 64 인코딩된 데이터의 압축성이 매우 좋기 때문에 어떤 차이도 느끼지 못할 것이다.만약 어떤 이유로 HTTP 압축을 사용할 수 없다면, 당신이 보낸 데이터가 얼마나 큰지 알고 싶을 수도 있고, 그렇게 할 가치가 있는지 따져볼 수도 있다.

이미지뿐만 아니라

대부분의 사람들이 HTML이나 CSS 파일에 그림을 삽입하는 방법으로 데이터 URI에 대해 이야기하고 있지만 그림이라고 지정하지 않았습니다.너는 모든 종류의 파일을 인코딩해서 삽입할 수 있으며, 심지어는 HTML 자체도 포함할 수 있다.Ian Hickson, HTML 5명(또는 악인, 네가 어떻게 보든)이 데이터 URI를 체험할 수 있는 도구를 제공한다.기본 예는 데이터베이스 64 인코딩을 사용하여 HTML 파일을 데이터 URI로 변환하는 것입니다.이 데이터 URI 생성기를 체험해 보면 핵심 개념을 구체화하는 데 도움을 줄 수 있다.
주의: IE8은 데이터 URI에 대한 안전 제한이 있어 데이터 URI가 그림이 아닌 데이터의 용도를 크게 할인합니다.

성능 영향

데이터 URI의 가장 흥미로운 점은 파일을 다른 파일에 삽입할 수 있다는 것이다.대부분의 글은 데이터 URI를 CSS 파일에 삽입하여 성능을 개선하는 데 초점을 맞춘다.실제로 대량의 연구에 의하면 HTTP 요청은 웹 페이지 성능에 영향을 주는 가장 주요한 요소 중 하나로 요청의 수를 줄이면 페이지의 성능을 개선할 수 있다.실제로'HTTP 요청 최소화'는 야호!Exceptional Performance Best Practices의 첫 번째 지침은 특히 데이터 URI를 언급합니다.
인라인 이미지는 데이터 URI를 사용하여 페이지에 이미지 데이터를 삽입하여 HTML 문서의 크기를 증가시킵니다.인라인 이미지를 (캐시된) 스타일시트에 조합하면 HTTP 요청을 줄이고 페이지 크기의 증가를 피할 수 있습니다.인라인 이미지는 아직 모든 주류 브라우저의 지원을 받지 못했다.
이것은 데이터 URI를 사용하는 데 아주 좋은 조언입니다. 캐시 빈도가 가장 높은 곳에 사용하십시오.HTTP를 통해 다운로드된 일반 그림은 헤드와 브라우저 설정에 따라 캐시를 해서 요청할 때마다 다시 다운로드하지 않습니다.Data Uri는 마운트된 파일의 일부로 간주되므로 포함된 HTML 또는 CSS 파일의 일부입니다.즉, 데이터 URI에는 별도의 캐시 제어 정책이 없습니다.데이터 URI를 삽입하면 파일을 크게 만들 수 있습니다. 만약 파일이 자주 바뀌면 (예를 들어 블로그의 첫 페이지) 이 커지는 파일은 빈번하게 다운로드되어 웹 페이지의 속도가 느려집니다.
가장 간단한 사용 방법은 데이터 URI를 강제 캐시된 외부 스타일시트에 삽입하는 것이다.이렇게 하면 브라우저의 캐시가 비어 있는 상황에서 사이트의 속도는 비교적 빠르고(추가 요청이 적기 때문에) 브라우저에 캐시가 존재하는 상황에서 체험은 같다.

브라우저 지원 현황

대부분의 현대 브라우저는 데이터 URI를 지원합니다. Firefox 2+ Opera 7.2+ - 데이터 URI는 4100자 미만이어야 합니다. Chrome(all versions) Safari(all versions) Internet Explorer 8+ - 데이터 URI는 32k 미만이어야 합니다.
버전 8보다 낮은 IE 브라우저는 데이터 URI를 지원하지 않기 때문에 데이터 URI를 지원하지 않는 브라우저에 대체할 가치가 있는지 결정해야 합니다. (Stoyan의 글을 보십시오.)

결론

Data URI는 웹 페이지에 있어 매우 흥미롭고 독특한 개념으로 앞으로 점점 광범위하게 응용될 것이다. 당분간은 성능과 관련된 작업에 가장 적합할 것이다. 그러나 어떻게 될지 아무도 모른다.그러나 현재 볼 수 있는 것은 데이터 URI를 사용하여 그림을 가져올 때 추가 HTTP 요청이 가져오는 성능 최적화를 줄이는 것이다.또한 Data URI는 JS를 사용하여 동적으로 그림을 생성할 가능성을 가져왔다. 비록 브라우저가 에 대한 지원이 계속 증가하더라도 이 방법은 도태될 수 있다.