이미지 최적화 Lazy Loading을 쉽게 구현하는 방법
자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다.
<img> lazy attribute
<!-- https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#loading -->
<img src="..." loading="eager" />
<img src="..." loading="lazy" />
loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.
- eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)
- lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.
찾아본 글 중에 제일 좋았던 글
번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com)
웹 성능 최적화를 위한 Image Lazy Loading 기법
현재 화면에 보여지지 않는 lazy loading된 이미지들은 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상시킵니다. 이 글은 lazy loading 처리 기법과 관련된 모든 것들을 깊게 다루게 됩니다. 해
helloinyong.tistory.com
원문 : Lazy Loading Images – The Complete Guide (imagekit.io)
Lazy Loading Images – The Complete Guide
Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images including native lazy loading methods.
imagekit.io
참고글
HTMLImageElement: loading property - Web APIs | MDN (mozilla.org)
HTMLImageElement: loading property - Web APIs | MDN
The HTMLImageElement property loading is a string whose value provides a hint to the user agent on how to handle the loading of the image which is currently outside the window's visual viewport.
developer.mozilla.org