이미지 태그의 width, height 속성을 올바르게 사용하기

HTMLImageElement는 width, height 속성을 가지고 있다. 예전에 두 속성은 이미지가 화면에 노출되는 영역을 표현하기 위해 사용되었지만, 이제 그 역할은 CSS가 전담하는 것이 권장사항이다. 그러면 이제 그 속성은 Deprecated 되었는가? 그렇지 않다. 요즘에 그 속성은 반응형 이미지의 영역 선점을 위해 원본 이미지의 크기를 할당하도록 권장한다.

<img src="url of an image of 1000x500 size" style="width: 100%; height: auto">

위의 이미지는 부모의 영역의 width가 800px이면 800x400 크기로 노출되고500px이면 500x250 크기로 노출된다. 즉, 노출되는 기기에 따라 이미지의 높이가 가변적이다. 그 가변적 높이는 브라우저가 계산하지만 이 계산은 이미지가 로드 된 이후에나 가능하다. 그래서 이미지가 늦게 로드 될 수록 사용자는 영역이 움직이는 불편한 경험을 목격하게 된다.

하지만 width, height 속성에 원본 크기의 값을 넣어준다면

<img src="URL of 1000x500 size image" style="width: 100%; height: auto" width="1000" height="500">

브라우저는 이미지가 로드되기 전 태그 파싱 단계에서 영역의 높이를 지정해줄 수 있다.

displayHeight = displayWidth / intrinsicWidth * intrinsicHeight;

이미지에 width, height 속성 값으로 원본 사이즈를 넣어서 최적화할 때, 반드시 CSS에서 노출 영역의 크기를 width, height 둘 다 정의해주어야 한다. 그 이유는 이미지 태그의 width, height 스타일이 모두 명시되어야 하는 이유에서 설명한다.