이미지 최적화: srcset과 DPR, sizes 및 Lazy Loading 가이드

1일 전

17회 • 0개

이미지 최적화는 현대 웹사이트에서 성능 향상을 위한 필수 기술입니다. 특히, 클라이언트 사이드에서 할 수 있는 가장 중요한 작업은 DRP을 고려한 srcset, sizes, 그리고 Lazy Loading을 설정해 다양한 디바이스와 해상도에 최적화된 이미지를 제공하는 것입니다. 이번 글에서는 이 기술들을 활용해 웹사이트 성능을 높이는 방법을 알아보겠습니다.

1. srcset과 sizes: 반응형 이미지의 핵심

1-1. srcset이란?

<img
  ... 
  srcset="
    image-600.jpg 600w,
    image-1200.jpg 1200w,
    image-1800.jpg 1800w"
  ...
>

srcset은 브라우저에게 다양한 크기의 이미지 소스를 제공하는 속성입니다. 각 이미지 뒤에 오는 숫자와 단위(예: 600w, 1200w, 1800w)는 이미지의 너비(Width)를 나타냅니다. 이를 통해 브라우저는 디바이스와 뷰포트 크기에 따라 가장 적합한 이미지를 자동으로 선택할 수 있습니다.

브라우저는 srcset에 정의된 이미지 목록을 기반으로, sizes 속성이나 기본값을 참고하여 화면에 표시될 이미지의 크기를 계산합니다. 그런 다음, 계산된 크기 이상 중에서 가장 작은 이미지를 로드합니다. 이 과정은 사용자 개입 없이 브라우저가 자동으로 처리하기 때문에, 최적화된 이미지 로딩을 보장합니다.이때 DPR(Device Pixel Ratio)을 고려해 srcset을 준비해야 합니다. 일반적인 CSS상의 픽셀과 달리, 실제 기기의 물리적 픽셀은 더 많을 수 있습니다. CSS 픽셀과 물리적 픽셀의 비율을 나타내는 값이 DPR입니다. 고성능 모니터와 최신 모바일 기기는 보통 DPR이 2~3에 이르기 때문에, 이를 고려한 고해상도 이미지를 제공해야 최적의 화질을 보장할 수 있습니다.

1-2. sizes란?

<img 
  ...
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  ...  
>

sizes 속성은 브라우저가 이미지가 화면에서 차지할 예상 크기를 계산할 수 있도록 정보를 제공합니다. 브라우저는 sizes 값을 기반으로 이미지를 렌더링할 크기를 예측하고, srcset에서 해당 크기에 적합한 이미지를 선택합니다. 이는 반응형 디자인에서 다양한 디바이스와 해상도를 지원하는 데 중요한 역할을 합니다.

sizes는 하나 이상의 조건과 값으로 이루어져 있으며, 조건은 CSS의 미디어 쿼리를 기반으로 합니다. sizes 속성에서 사용하는 단위는 이미지 크기를 정의하는 데 중요한 역할을 합니다. 대표적으로 vw, px, x가 있습니다.

vw는 뷰포트 너비(Viewport Width)를 기준으로 비율을 나타내는 단위입니다. 여기서 1vw는 뷰포트 너비의 1%를 의미합니다. 예를 들어, 디바이스의 뷰포트 너비가 1000px라면, 50vw는 500px에 해당합니다. 이러한 방식은 화면 크기에 따라 이미지를 유연하게 조정할 수 있어 반응형 디자인에서 매우 유용합니다. 뷰포트 크기가 변화할 때 이미지 크기를 자동으로 조정할 수 있기 때문에, 반응형 웹사이트 구현에 필수적인 단위입니다. 위의 코드는 그리드 레이아웃에서 자주 쓰입니다. 600이하의 화면에서는 100%, 1200이하의 화면에서는 50%, 그외에는 33%를 예상합니다.

px는 고정 크기를 나타내는 절대 단위입니다. 이 단위는 특정 크기를 명확하게 지정할 수 있기 때문에, 반응형이 필요 없는 고정 크기의 이미지를 사용할 때 적합합니다. 예를 들어, sizes="300px"로 설정하면 이미지의 렌더링 크기는 항상 300px로 고정됩니다. 화면 크기나 디바이스 종류에 관계없이 동일한 크기로 이미지를 표시해야 할 때, px 단위는 간단하고 직관적인 선택입니다.

x 단위는 디바이스의 Device Pixel Ratio(DPR)를 고려한 단위로, 고해상도 디바이스에서 선명한 이미지를 제공하기 위해 사용됩니다. DPR은 디바이스의 물리적 픽셀과 CSS 픽셀 간의 비율을 나타내며, 최신 디바이스에서는 보통 2x 또는 3x와 같은 높은 DPR 값을 가집니다.

그렇다면 DPR을 고려할 때 vw와 px 단위를 따로 조정해야 할까요? 사실 아무것도 하실 필요 없습니다. x단위를 사용하지 않으신다면, 브라우저가 자동으로 DPR을 고려해 srcset에서 가장 적합한 이미지를 선택하므로, 추가적인 설정 없이도 최적의 이미지를 로드할 수 있습니다.

2. Lazy Loading

<img src="example.jpg" alt="Lazy Loaded Image" loading="lazy">

Lazy Loading은 웹페이지 로딩 속도를 최적화하기 위한 기술로, 브라우저가 이미지를 즉시 로드하지 않고, 이미지의 렌더링 프레임이 사용자 화면(viewport)에 들어올 때 로드하도록 설정합니다. 즉, 사용자가 스크롤하여 이미지를 볼 필요가 있을 때만 리소스를 로드하므로 초기 페이지 로딩 속도를 크게 개선할 수 있습니다.

HTML5의 loading="lazy" 속성을 활용하면 추가 스크립트 없이도 이 기능을 활성화할 수 있습니다. 이를 통해 초기 로딩 속도를 개선하고, 데이터 사용량을 줄이며, SEO 성능 지표(Core Web Vitals)에도 긍정적인 영향을 줄 수 있습니다.

3. 결론

이미지 최적화에서 loading="lazy"는 기본 설정으로 가져가는 것이 권장됩니다. 이를 통해 초기 로딩 속도를 효율적으로 개선할 수 있으며, 데이터 사용량도 줄일 수 있습니다.

사이트 내의 이미지 레이아웃 유형(예: 그리드, 풀 화면, 캐러셀 등)을 분석하고, 그에 맞는 srcset과 sizes를 적절히 설정해야 최적의 결과를 얻을 수 있습니다. 이러한 전략적 접근은 다양한 디바이스와 해상도에서 최상의 사용자 경험을 보장할 것입니다. 😊