[HTML] 핵심 웹 요소 <img> 어디까지 알고 있나?

 

 

핵심 웹 요소 <img> 
https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

 

위 문서에서 찾은 키워드와 연관된 링크들입니다.

 

- 이미지와 동영상 요소에 항상 너비 및 높이 크기 속성을 포함하는 것이 좋다.
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

 

- window.devicePixelRatio
https://developer.mozilla.org/ko/docs/Web/API/Window/devicePixelRatio

 

- 트위터도 2x 이미지 제한을 검
https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html

 

- <img loading="lazy">
https://web.dev/browser-level-image-lazy-loading/
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
https://helloinyong.tistory.com/297 (번역본) / (원문)


- 히어로 이미지에 한해 미리 로드하는 방법
https://developer.mozilla.org/ko/docs/Web/HTML/Preloading_content

<link rel="preload" as="image" href="donut.jpg">

 

- CSS 콘텐츠 가시성 (크로미움 브라우저 한정)

section {
  content-visibility: auto;
  contain-intrinsic-size: 700px; 
}