[html] <img> 태그 이미지 로딩 지연 시키기

1. 지연로딩을 시키는 이유

 

1. 1. 많은 이미지, 용량이 큰 이미지 로딩
2. 2. 이미지 로딩중 - [웹 페이지 로딩 상태, 유저 인터렉션 X]
3. 3. 유저 이탈 확률 증가 

 

우선 화면을 그리는데 집중하고 나중에 이미지를 로딩 시키자 라는 방법론

---

2. HTML 이미지 태그 속성 으로 지연 시키기

 

<img 
    src="apple.webp" 
    alt="apple" 
    loading="lazy"    //이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다.
    decoding="async"> //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.

---

<img> - loading="option"

브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.

 

• eager(기본값) : 뷰포트  안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다.
• lazy : 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다.
  스크롤링을 하다가 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 이미지를 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.

 

<img> - decoding="option"

이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다.

 

• sync : 다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.
• async : 다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.
• auto(기본값) : 선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다. 

 

3. 브라우저 호환성

 

loading - decoding 브라우저 호환성 출처:mdn

 

4. 실험적 기능 (이미지 다운로드 우선순위 조절 옵션)

다운로드 중요도를 조절하는 옵션도 있지만 아직은 실험적인 기능.

 

<img> - importance="option"

리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.

• auto : 설정 안함. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.
• high : 이미지가 높은 우선순위를 지님.
• low : 이미지가 낮은 우선순위를 지님.

 

5. 출처

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN