원글 페이지 : 바로가기
img 에 직접 width, height 속성을 넣어주거나, div 등의 wrap 을 사용해서 크기를 미리 지정하는 것이 좋다 렌더링 시 브라우저가 이미지가 들어갈 자리를 미리 계산할 수 있기 도와준다 layout shifting 으로 인한 사용자 경험이 나빠지는 것을 방지한다 https://junglast.com/blog/img-width-height-attribute ![]()
의 width/height 속성과 페이지 렌더링의 상관관계 이미지에 의한 레이아웃 reflow를 막는 방법 junglast.com 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 문제 해결하기 회사 홈페이지를 개발하던 중, 레이아웃 시프트 문제를 겪게 되었다.레이아웃 시프트란 늦게 로드되는 컨텐츠들로 인해, 먼저 로딩된 컨텐츠가 밀려나는 현상을 의미한다.만약 이미지 뒤에 테 velog.io 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 브라우저에 따른 최적화된 이미지를 보여주기 위한 노력, srcset velog.io