<img>에 width, height 지정이 가능한 이유와 이를 미리 지정하면 좋은 이유

<img>는 inline요소인데 왜 width와 heigth 지정이 가능한지 문득 의문이 들었다. 이유는 <img>가 'replaced element'이기 때문이었다.

replaced element란, 일반 css 포맷 모델과는 독립적인 외부 객체로서 브라우저가 내용을 내부적으로 렌더링해서 보여주는 요소이다. 여기서 '브라우저가 내용을 내부적으로 렌더링해서 보여주는 요소'라는 말은, HTML파일 안에 직접 콘텐츠가 없는 대신 브라우저가 외부 자원이나 특별한 방식으로 그 내용을 채워서 보여주는 요소라는 뜻이다.

대표적인 replaced element로는 <img>, <video>, <iframe>, <input type='image'>가 있다. 이들은 inline 요소라고는 하지만 width, height 지정이 가능하므로 inline-block 요소로 간주하면 좋을 것 같다.

🔎 <img> 자체에 width, height를 지정하는 것이 좋은 이유

관련 자료를 서칭하던 중 <img> 자체에 width, height를 지정하는 것이 좋다는 것을 알았다.

이유는 우리가 어떤 웹사이트에 url을 사용하여 접속하게 되면 서버가 html파일을 브라우저에 보내주게 되는데,

<img> 태그 자체에 width와 height 값을 지정해주게 되면 브라우저가 미리 이미지의 크기에 해당하는 레이아웃을 구성하게 되고, 이후에 이미지 파일이 로딩될 때 불필요하게 다른 요소가 밀리는 현상을 방지하여 UX 관점에서 좋기 때문이다.