<img> 이미지가 들어갈 크기를 미리 지정해주기 /srcset 이란?

img 에 직접 width, height 속성을 넣어주거나, div 등의 wrap 을 사용해서 크기를 미리 지정하는 것이 좋다

 

렌더링 시 브라우저가 이미지가 들어갈 자리를 미리 계산할 수 있기 도와준다

layout shifting 으로 인한 사용자 경험이 나빠지는 것을 방지한다 

 

https://junglast.com/blog/img-width-height-attribute

<img>의 width/height 속성과 페이지 렌더링의 상관관계

 

https://velog.io/@jellyjw/%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%B4-%EB%B0%80%EB%A0%A4%EB%82%98%EB%8A%94-layout-shift-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

레이아웃이 밀려나는 layout shift 문제 해결하기

https://velog.io/@fenjo/HTML-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-srcset

[HTML] 반응형 이미지를 위한 srcset