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

요약 : 이미지 태그의 스타일에 width, height 둘 중에 하나만 지정하여 default ‘auto’ 값을 사용하지 마라. 그 값에 ‘auto’ 를 넣더라도 항상 width, height 둘 다 CSS 에서 명시해주는 것이 좋다. 그렇게 하면 아래의 문제들을 피할 수 있다.

<img src="url of an image of 1000x500 size" style="width: 500px;">

위와 같이 style.width 만 정해도 대체로 문제가 없다. width, height style의 기본 값이 ‘auto’ 이기 때문이다. style.width 만 지정하면, 이미지가 로드 된 이후 원본의 비율에 맞게 height 영역이 250px로 계산되어 보여진다. 그래서 가끔 이미지의 CSS 에서 width, height style 중에 하나만 지정하는 경우를 볼 수 있다.

하지만 img 태그에 width, height 속성이 지정된 경우, 문제가 생긴다.

우선 width, height 속성과 width, height style을 구분할 필요가 있다. 속성은 HTMLImageElement의 속성으로 원본 이미지의 크기를 값으로 가지는 것을 권장한다. Style은 화면에 표시될 영역의 크기를 나타낸다.

<img src="https://ncc-phinf.pstatic.net/20141022_178/1413936226036VMWBA_JPEG/1.jpg?type=w646" width="646" height="431" style="width: 150px">

img[Attribute Style] {
   width: 646px;
   height: 431px;
}

위의 이미지에서 style.width만 지정하니 이미지 비율이 깨진 결과를 확인할 수 있다. 이는 Attribute Style이 적용되어 style.height의 기본 값 ‘auto’를 431px로 덮어쓰기 때문이다.

img 태그에 속성 값이 이미지의 원본 크기 값으로 지정되는 경우는 2 가지이다.

A. 이미지가 로드되기 전에, 브라우저가 이미지의 영역을 계산할 수 있도록 img 태그의 width, height 속성에 원본 이미지의 크기를 지정할 때,

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

B. IE10 이하의 브라우저에서 createElement(‘img’) 를 사용하여 동적으로 ImageElement 를 DOM에 추가할 때, 본래 이미지 크기가 그 img 태그의 width, height 속성에 자동으로 설정된다.

> 왜 IE10 에서는 이미지 태그의 width, height 속성으로 원본 이미지의 크기가 자동으로 들어가는가?

결론적으로, 이미지 태그의 스타일에 width, height 둘 중에 하나만 지정하여 default ‘auto’ 값을 사용하지 마라. 그 값에 ‘auto’ 를 넣더라도 항상 width, height 둘 다 CSS 에서 명시해주는 것 좋다.

<img src="/files/16864/clock-demo-400px.png" width="400" height="400" style="width: 100%; height: auto;">

그리고 브라우저가 지원한다면 HTMLImageElement.srcset, sizes 를 이용하는 것이 더 낫다.

<img src="/files/16864/clock-demo-200px.png"
      alt="Clock"
      srcset="/files/16864/clock-demo-200px.png 200w,
          /files/16797/clock-demo-400px.png 400w"
      sizes="(max-width: 400px) 200px, 400px">