이미지 최적화 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 Images – The Complete Guide (imagekit.io)

Lazy Loading Images – The Complete Guide

 

참고글

HTMLImageElement: loading property - Web APIs | MDN (mozilla.org)

HTMLImageElement: loading property - Web APIs | MDN