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

아래 img 태그의 이미지는 부모의 영역의 width가 800px 이면 800x400 크기로 출력되고 500px이면 500x250 크기로 출력됩니다. 즉, 출력되는 기기에 따라 이미지의 높이가 가변적이게 됩니다. 그 가변적 높이는 브라우저가 계산하지만 이 계산은 이미지가 로드된 이후에나 가능합니다.

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

하지만 width, heoght 속성에 원본 크기의 값을 넣어준다면 브라우저는 이미지가 로드되기 전 태그 파싱 단계에서 영역의 높이를 지정해줄 수 있습니다.

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

<aside> 💡 displayHeight = displayWidth / intrinsicWidth * intrinsicHeight;

</aside>

이미지에 width, height 속성 값으로 원본 사이즈를 넣어서 최적화할 때, 반드시 CSS에서 style 영역의 크기를 width, height 둘 다 정의해주어야 합니다.

→ 이유 이미지 태그의 width, height 스타일이 모두 명시되어야 하는 이유