img 태그에 width와 height 속성이 필요한 이유

출처 : http://blog.wystan.net/2007/08/01/img-tag-with-width-and-height

앞서 포스팅한 HTML Transitional과 Strict 규격 비교라는 글에서 엄격한 문서 타입(Strict DTD)에서는 ‘표현(presentation)’을 담당하던 속성들이 대부분 사라졌다고 알려드린 바 있습니다.

하지만 일부 태그에는 여전히 표현을 나타내는 속성이 남아있는데 그 중의 하나가 img와 object 태그에 사용되는 width, height 속성입니다. W3C가 이 속성들을 삭제하지 않은 이유를 이미지의 가로와 세로 크기를 지정하는 것이 페이지 로딩 속도 향상에 도움이 되기 때문이라고 설명하기도 합니다. 하지만 그런 효과는 부수적으로 얻어지는 것이고, 해당 속성이 필요한 근본적인 이유는 아니지요. 그럼 왜 img 태그에 width와 height 속성이 필요한지 알아볼까요?

브라우저가 HTML 문서를 해석하는 방식

브라우저가 HTML 문서를 어떻게 해석하는지에 대해서는 블로깅 툴간의 속도 차이라는 글에서 간단히 설명한 적이 있습니다. 중복을 피하기 위해서 일부를 인용하도록 하겠습니다.

“먼저 브라우저가 원하는 페이지를 전송해달라고 웹 서버에 요청하게 됩니다. 그러면 웹 서버가 이에 대한 응답으로 해당 페이지의 html 문서를 브라우저에게 전송합니다. 브라우저는 전송된 html 문서를 해석해서 페이지 출력(렌더링)에 필요한 CSS, 이미지, 스크립트 파일 등을 순차적으로 다시 웹 서버에 요청하고 그 결과를 받아옵니다. 그러면서 동시에 페이지를 그려나는데 이렇게 필요한 자원에 대한 요청과 전송, 렌더링이 동시에 이루어지기 때문에 이미지가 많이 포함된 페이지도 빠르게 화면에 표시됩니다.”

즉, HTML 문서를 해석하다가 img 태그를 발견하기 전까지는 이미지 파일이 브라우저에게 전송되지 않습니다. 하지만 이미 전송된(또는 전송중인) HTML 문서는 즉시 해석되고 화면에 출력되는데 이 과정에서 약간의 문제가 발생할 수 있지요.

페이지에서 이미지가 차지하는 영역

이미지가 많고 전송 회선이 느린 페이지를 열 경우에 이미지가 로딩되면서 페이지 길이가 계속 늘어나는 경우를 볼 수 있습니다. 스크롤바를 내려서 원하는 텍스트로 이동한 다음에도 계속 화면이 늘어나므로 불편함을 느낄 수도 있지요.

하지만, HTML 문서에 직접 이미지의 width와 height 속성을 지정했다면 얘기는 달라집니다. 브라우저가 HTML을 로딩하는 순간 이미 각각의 이미지가 차지하는 영역을 알고 있으니까요. 즉, 처음부터 문서의 길이를 모든 이미지를 수용할 수 있을 만큼 늘려서 렌더링한다는 얘기입니다.

또한, 브라우저가 이미지가 차지할 영역을 알고 있으면 문서 안에 책갈피(bookmark, anchor)를 넣을 경우 원하는 위치로 정확히 이동할 수 있습니다. 예를 들기 위해서 의미 없는 텍스트(dummy text) 사이에 이미지와 책갈피를 넣은 두 페이지를 준비했는데 실질적인 HTML 소스 상의 차이는 이미지의 width와 height 속성뿐입니다.

먼저 첫 번째 페이지에 포함된 이미지에는 width와 height 속성을 지정했습니다.

<img src="http://blog.wystan.net/images/42.png" width="180" height="120" />
<h4 id="withdimension">책갈피1: width, height 지정</h4>

속성을 지정하지 않은 두 번째 페이지 소스는 아래와 같습니다.

<img src="http://blog.wystan.net/images/43.png" />
<h4 id="withoutdimension">책갈피2: width, height 미지정</h4>

속성을 지정한 페이지와 지정하지 않은 페이지를 각각 클릭해보면 이동하는 위치에 차이가 있는 것을 알 수 있습니다. 일단 이미지가 로딩된 후에는 웹 서버에 있는 파일 대신 로컬 컴퓨터에 저장된 캐시(cache) 파일을 이용하므로 캐시를 비우지 않으면 처음과는 다른 결과나 나타납니다.

각각의 페이지 책갈피를 열였을 때 보여지는 브라우저 화면 맨 윗부분을 동일한 영역으로 캡처한 이미지는 아래와 같습니다.

왼쪽 이미지에서 볼 수 있듯이 가로와 세로 길이를 지정하면 책갈피로 이동하는 시점에서 이미지가 차지할 영역을 미리 계산하기 때문에 원했던 결과를 얻을 수 있습니다. id가 withdimension인 h4 태그로 정확하게 이동하지요.

오른쪽 이미지는 width와 height 속성을 지정하지 않았기 때문에 브라우저가 이미지의 크기를 알 수 없습니다. 이미지의 크기를 알 수 없어서 높이가 없다고 가정하고 페이지를 렌더링한 다음 실제로 이미지를 전송받고 화면에 표시하려다 보니 이미지 높이 만큼 아래로 밀려난 것이지요. 결과적으로 의도했던 withoutdimension 책갈피로 이동하지 못했습니다.

† 이 상태에서 페이지를 다시 읽으면(새로 고침) 이미지가 캐시 파일로 저장되었기 때문에 의도했던 곳으로 이동합니다. 또한, 이미지 상단의 테두리(border-top)가 표시되지 않는 것으로 봐서 이미지 크기가 지정되지 않으면 CSS의 border 속성이 적용되지 않는 것도 확인할 수 있습니다.

페이지 로딩 속도에 미치는 영향

이미지의 크기를 미리 알면 브라우저가 크기 정보를 파일에서 얻어 올 필요가 없어집니다. 하지만 이 과정에 소모되는 시간은 문서를 해석하고 렌더링하는데 걸리는 시간에 비교한다면 무시할 수 있을 정도라고 생각합니다. 실질적으로 로딩 속도 향상을 가져오는 것은 페이지에서 갱신되어야 하는 부분이 상대적으로 적기 때문이리라 판단됩니다.

페이지 렌더링은 먼저 컴퓨터의 메모리(RAM)에서 이루어집니다. 메모리에서 화면에 출력될 부분이 그려진 다음 이 부분이 그래픽 카드(VGA) 메모리에 복사되고 최종적으로 모니터 화면에 출력되는 것이지요. 이 과정에서 이미지 크기에 따라 화면이 계속 늘어나므로 갱신될 부분이 많아지고, 필연적으로 많은 연산이 필요하게 됩니다. 따라서 img 태그에 width와 height 속성을 지정하면 페이지 로딩 속도를 향상시킬 수 있는 것이지요.

† 이 부분은 정확한 정보가 아닌 추측입니다. 정확한 정보를 아시는 분들은 꼭 알려주세요.

마치며

W3C의 규격을 완벽하다고 할 수는 없지만 그렇다고 해서 아무렇게나 만들어진 것은 아닙니다. 나름대로 충분한 합리성을 갖고 있지요. img 태그에 width와 height 속성을 반드시 지정해야 하는 이유도 이런 합리성에 기초합니다. 비록 문서의 표현을 담당하는 속성이지만 현실적으로 꼭 필요하기 때문에 남겨둔 것이지요. 그러니 조금 불편하더라도 꼭 지정해 주는 것이 좋습니다.

또한, 현실적인 기능을 고려하지 않고 표현에 관한 속성이라는 이유만으로 ‘의미 있는’ 마크업에 반한다고 생각해서 사용하지 않는 것은 ‘웹 표준’의 진정한 의미를 잘못 해석하는 것이라 생각합니다. 각각의 태그와 속성이 갖고 있는 의미와 용도를 올바르게 이해하고 사용하는 것이 무엇보다 중요하니까요. 문서의 구조와 표현을 분리하려는 목적은 이 과정에서 자연스럽게 얻어지는 것이 아닐까요?

다음 글에서는 CSS를 사용해서 이미지를 정렬하는 방법에 대해서 다루겠습니다.