핵심 웹 요소 <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;
}
'개발일지 > Web' 카테고리의 다른 글
이미지 최적화 Lazy Loading을 쉽게 구현하는 방법 (0) | 2023.11.17 |
---|---|
[레퍼런스] 스크롤 다운에 맞춰 카드가 겹쳐지는 인터랙션 (position: sticky) #애플뮤직 (0) | 2021.03.10 |
[Chrome 84] 스타일 창 업데이트 (css revert, bg-img preview, color space-separated) (0) | 2020.07.23 |
[HTML] download 특성으로 <canvas>를 PNG로 저장하기 (1) | 2020.07.20 |
[ie11] 스크롤 이벤트가 안 먹혀요 scrollY (X) → pageYOffset (O) (0) | 2020.07.09 |