• 이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되어 성능 뿐만 아니라 사용자 경험에도 좋지 않음

문제 분석

• width와 height를 생략하고, 대신 CSS를 사용하여 이미지 크기를 조정하는 경우, 이미지 다운로드를 시작하고 브라우저가 크기를 결정할 수 있을 때만 이미지에 대한 공간을 할당하게 됨.
• 이미지가 화면에 나타날 때 페이지가 재배치되면서 리플로우, 리페인트가 발생

해결책

• <img> 요소에 width , height 속성을 지정하면 웹브라우저가 이미지를 다운로드 하기 전에 이미지의 위치를 확보할 수 있어, CLS를 개선할 수 있음

• 또는 aspect-ratio를 설정하면, 이미지가 로드되기 전에 width 및 height 속성을 기준으로 종횡비를 계산하여 레이아웃 시프트를 예방함

  • width와 height 값은 그대로 적용되지 않아도 되며, 비율을 알려주는 용도로 사용됨

  img {
  	width: 100%; /* or max-width: 100%; */
  	height: auto; /* 이미지 높이가 고정된 값(inline으로 선언한 height값)이 되지 않도록 하기 위함 */
  	aspect-ratio: 16/9;
  }
  

  <img src="test.webg" width="800" height="450" />