<img>에 loading 속성

<img>에 loading 속성

: loading 속성은 이미지의 로딩 동작을 제어

• loading = "auto"
  • 브라우저가 이미지를 일반적인 방식으로 로드
  • loading 속성을 따로 설정하지 않으면 기본값으로 적용
    
    
• loading = "lazy"
  • 이미지가 즉시 로드되지 않고, 사용자가 스크롤을 하거나 이미지가 화면에 나타날 때까지 로드를 지연
  • 페이지 초기 로딩 속도↑
    
    
• loading = "eager"
  • 이미지를 즉시 로드
  • 사용자가 스크롤하지 않아도 즉시 이미지가 표시됨
  • 페이지 초기 로딩 속도↓
    
    

loading 속성을 적절히 사용하면 페이지 성능을 최적화할 수 있고 사용자 경험을 향상시킬 수 있다.