이미지 최적화: Rendered Size, Intrinsic Size, 그리고 DPR 이해하기
이미지 최적화는 웹 성능을 높이는 데 있어 필수적인 작업입니다. 특히, 다양한 디바이스와 해상도에서 선명한 이미지를 제공하려면 Rendered Size(렌더링 크기), Intrinsic Size(내재 크기), 그리고 DPR(Device Pixel Ratio)의 개념을 이해하고 이를 활용해야 합니다. 이번 글에서는 이 세 가지 요소를 중심으로 이미지 최적화를 이해하고 실무에 적용하는 방법을 알아보겠습니다.
1. 이미지 사이즈의 기본: Rendered size vs Intrinsic size
1-1. Rendered Size란?
Rendered Size는 브라우저가 실제로 이미지를 화면에 표시하는 크기입니다. 이 크기는 HTML과 CSS에서 정의된 width와 height, 레이아웃 조건, 그리고 부모 요소의 크기에 따라 결정됩니다. 위 사진에서는 324px x 216px입니다.
1-2. Intrinsic Size란?
Intrinsic Size는 이미지 소스 자체에 저장된 원래 크기입니다. 예를 들어, 이미지가 1200px × 800px 크기로 저장되어 있다면, 이 크기가 해당 이미지의 Intrinsic Size입니다. 위사진에서는 600px x 337px 입니다.
2. 이것만으로는 부족한 현재 웹 생태계: DPR, logical pixel과 physical pixel
2-1. Nextjs의 이미지 컴포넌트
이미지 최적화에서 중요한 것은 Rendered Size를 기준으로, 해당 크기보다 큰 이미지 소스 중 가장 적합한 크기를 선택하는 것입니다. 그렇다면, Next.js의 Image 컴포넌트는 이러한 최적화를 제대로 수행하고 있을까요? 위 예시에서 Next.js는 Rendered Size보다 훨씬 큰 크기의 Intrinsic Size를 가진 이미지 소스를 사용하고 있습니다. 최적화에 실패한 것처럼 보일 수 있지만, 사실 이는 DPR(Device Pixel Ratio)을 고려한 결과입니다.
2-2. DPR(Device Pixel Ratio)이란?
기술이 발전하면서 현대의 디스플레이는 1 Logical Pixel에 2개 이상의 Physical Pixel을 배치해 더 선명한 화질을 제공합니다. 이 비율을 나타내는 지표가 바로 DPR입니다.
• DPR 1: 1 Logical Pixel = 1 Physical Pixel.
• DPR 2: 1 Logical Pixel = 2 Physical Pixels.
DPR은 브라우저에서 간단히 확인할 수 있습니다:
window.devicePixelRatio2-3. 화질 비교 사례
위는 Rendered Size가 200px인 이미지에 대해 다양한 Intrinsic Size를 사용한 사례입니다:
• 256w: Intrinsic Size가 Rendered Size보다 작아 화질이 흐림.
• 600w: Rendered Size와 가까워 선명한 화질 제공.
• 1280w(원본): 불필요하게 큰 크기로 데이터 낭비 가능.
결론적으로, DPR까지 고려하여 적절한 Intrinsic Size를 제공하지 못하면 화질이 저하되거나 데이터 낭비가 발생할 수 있습니다.
3. 최선의 이미지 소스 전략
현재 최신 디바이스에서는 DPR 1을 찾아보기 어렵습니다. 대부분의 모니터와 모바일 기기는 DPR 2~3을 기본으로 채택하고 있습니다. 따라서 Rendered Size를 기준으로, DPR 2와 3을 고려한 이미지 소스를 준비하는 것이 최적의 성능과 화질을 제공하는 방법입니다.
이를 통해 다양한 디바이스 환경에서도 선명한 이미지를 제공하며, 데이터 낭비를 최소화할 수 있습니다. 😊