웹사이트 로딩이 더 빨라지는 매직? │노마드 코더

img 태그

 

<img src="cat.jpg" loading="lazy"/>

 

이렇게 하면 유저가 실제로 이미지를 볼 때, 로딩함.

물론 이렇게 한다고, 무조건적으로 로딩 속도가 빨라지지는 않음.

그래서 srcset 및 size 속성을 사용한다.

 

srcset은 디바이스(장치)마다 출력 이미지를 다르게 설정할 수 있음.

스마트폰이나 모바일 장치에서는 저해상도의 이미지를 로드할 수 있다는 것.

 

<img

      srcset="cat-small.jpg 500w,

                  cat-medium.jpg 1000w, 

                  cat-large.jpg 2000w"

     src="cat-small.jpg" />

 

이렇게 3가지 사이즈의 이미지(cat)가 준비되어 있다는 걸 알리면,

셋 중에 어느 사진을 출력할지는 브라우저가 결정한다. 

srcset 속성은 현재 시점 브라우저의 97프로가 지원하기 때문에 작동 안 할 리는 없는데,

그래도 혹시 모르니 기본적인 소스(src)도 적어둔다.

 

브라우저가 어떤 이미지를 출력할지 결정을 돕기 위해, 'size 속성'을 적어둘 수 있다.

 

<img

      srcset="cat-small.jpg 500w,

                  cat-medium.jpg 1000w, 

                  cat-large.jpg 2000w"

      sizes="(max-width: 600px) 400px,

                 (max-width: 1200px) 800px,

                1400px"

     src="cat-small.jpg" />

 

뷰포트 너비가 600픽셀 이하인 경우, 이미지가 400px 너비로 표시되도록

뷰포트 너비가 601px~1200px 이하면, 이미지를 800px 너비로 표시되도록 하고 있다.

이런 정보는 제공된 srcset 정보와 함께 가장 알맞은 사진을 선택해서 출력하게 만든다.

---

picture

 

이미지 로드의 결정권은 브라우저에 있지만,

개발자가 그 결정권을 가지고 싶다면 'picture' 태그를 사용하면 된다.

 

<picture>

       <source srcset="/cat-vertical.jpg"

                      media="(orientation: portrait)">

      <source srcset="/cat-horicontal.jpg"

                    media="(orientation: landscape)">

       <img src="/cat-default.jpg">

</picture>

 

  

기타 내용은 영상으로 확인 고고