이미지를 효과적으로 사용하는 방법

이미지를 로딩하면서 가져올 때 하나의 큰 이미지를 각각 뿌려주는 방법으로 이미지를 처리하곤 했는데요, 이렇게 되면 리소스적인 낭비가 있을 수 있습니다. 

 

1. 각 해상도별 이미지 출력

그래서 이런 부분을 개선하고자 img 태그에서는 아래와 같은 방법으로 보여줄 수 있습니다. 

<img 
   srcset="abbo-image-small.jpg 400w,
           abbo-image-medium.jpg 800w,
           abbo-image-large.jpg 1200w"
   src="abbo-image.jpg"   />

 

2. Lazy Loading

그리고 이미지를 각 브라우저에 맞게 스크린에서 보여주는 방법이 있습니다. 이미지가 한 화면에서 100개정도 로드를 해야 하는 경우 모든 리소스를 브라우저에서 호출하기 때문에 다운로드를 진행하는 동안 다른 이미지가 보이지 않는 문제가 발생하는데 이런 경우에는 지금 보고 있는 화면에서 불러오는 이미지만 표시하는 방법도 있습니다. 

<img src="abbo-1.jpg" loading="lazy" />
<div style="height: 2000px; color:red;"></div>
<img src="abbo-2.jpg" loading="lazy" />
<div style="height: 2000px; color:red;"></div>
<img src="abbo-3.jpg" loading="lazy" />
<div style="height: 2000px; color:red;"></div>
<img src="abbo-4.jpg" loading="lazy" />

 

이렇게 loading="lazy" 옵션을 적용하게 되면 abbo-1 이미지가 호출된 다음 abbo-2 가 보이기 까지 2000px이 내려가는 경우 호출되게 되고, abbo-3, abbo-4 이미지는 4000px, 6000px 이 내려가는 경우 브라우저 내에 다운로드 되기 때문에 리소스 걱정을 할 문제가 줄게 됩니다. 

 

3. Sizes

이미지를 해상도별로 사이즈를 다르게 보여주고 싶을 때가 있습니다. img 태그 안에서는 이런 것도 효율적으로 보여줄 수 있도록 지원하는데 아래에 소스에 적어둔 방법으로 sizes property를 사용하면 됩니다.

<img 
   srcset="abbo-image-small.jpg 400w,
           abbo-image-medium.jpg 800w,
           abbo-image-large.jpg 1200w"
           
   sizes="(max-width: 500px) 400px, (max-width: 1000px) 900px, 1200px"
   src="abbo-image.jpg"   />

 

이제 이렇게 적용하는 경우 기본 500px 이하인 경우 400px의 이미지로 표시가 됩니다. 501px 이상 1000px 이하에서는 max-width: 900px 옵션이 적용됩니다. 1000px 보다 큰 해상도인 경우 1200px 의 이미지를 표시하게 됩니다.

 

4. 대체 이미지 picture

이미지가 서버에서 없어진 경우 대체 이미지를 보여주어야 하는 경우가 있습니다. 이런 경우에는 picture 라는 태그로 감싸주어 source 태그를 붙여서 아래와 같이 표현합니다.

<picture> 
  <source srcset="abbo.jxl" type="image/xml">
  <source srcset="abbo.webp" type="image/webp">
  <source srcset="abbo.avif" type="image/avif">
  <img src="abbo.jpg">
</picture>

동작 방식은 abbo.jxl 이미지를 먼저 서버에서 로딩합니다. 해당 이미지가 존재하지 않으면 abbo.webp 이미지를 2번째로 호출하게 되며, abbo.avif 이미지가 3번째로 호출되게 됩니다.

3개의 이미지가 모두 존재하지 않을 때, abbo.jpg 의 이미지로 보여주도록 처리합니다. 

 

보다 더 상세한 설명은 '노마드 코더'님의 유투브 영상에 보다 자세히 나와있습니다. 

https://www.youtube.com/watch?v=8EWwyAcqR6o