<div id="readability-page-1" class="page"><div>
            <p>이미지 최적화 Lazy Loading을 쉽게 구현하는 방법</p>
          </div></div>

zineeworld

자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다.
 
<img> lazy attribute

<img src="..." loading="eager" />
<img src="..." loading="lazy" />
 
loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.
eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)
lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.
 
찾아본 글 중에 제일 좋았던 글
번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com)
원문 : Lazy Loading Images – The Complete Guide (imagekit.io)
 
참고글
HTMLImageElement: loading property - Web APIs | MDN (mozilla.org)

이미지 최적화 Lazy Loading을 쉽게 구현하는 방법

댓글