[HTML] IMG 엘리먼트에 base64를...

asp.net을 방문해서 글을 읽다가 보니 이미지 로딩이 페이지가 보이고 나서 나타나서 신기해서 소스를 확인해 보았다.

url : Creating ASP.NET Web Projects in Visual Studio 2013

img 엘리먼트는 동일한데 src에 흔히 보지 못하는 문자가 있었다.

<img

alt="Configure Azure Site Settings"

height="440" src="https://t1.daumcdn.net/cfile/tistory/2306344056EACC6B2E"color: rgb(136, 18, 128); font-family: 'Courier New'; font-size: 10pt; line-height: normal; white-space: pre-wrap;">"

data-original="//i1.asp.net/media/49892/ConfAzWS.png?cdn_id=2012-10-31-001" width="579">

구글에 검색을 해보니 linuxchannel.net에 "한번의 커넥션으로 이미지 모두 전송하는 방법"라는 글이 있었다. (링크)

요지는 RFC 2397(The "data" URL scheme)에 따르면 URL 스킴에 데이터를 넣을 수 있는 방법이라고 할 수 있겠다.

데이터는 바이너리일 경우 base64를 통해 인코딩 할 수 있을 것이다.

하지만 asp.net에서는 html에 데이터를 넣은 게 아니라 data-original이라는 속성을 통해 브라우저에게 HTTP GET 요청을 시킨 것을 알 수 있다.

크롬의 개발자도구로 네트워크 트래픽을 확인해보았다.

우선 브라우저의 캐시를 지우고, 주소창을 치고 접속. 그 다음 스크롤를 천천히 내렸다.

아래와 같이 이미지를 시간에 따라 받는 것이 확인되었다.

데이터 트래픽이 많은 서버의 경우 이렇게 하면 사용자가 내용을 끝까지 읽지 않을 경우 불필요한 이미지 전송의 트래픽을 줄일 수 있을 것으로 판단된다.