이미지 다중 해상도 대응으로 렌더링 최적화

🚨 문제 상황 분석

1. 사내 내부 종속성 문제로 next.js 기반의 최적화된 <Image> 컴포넌트 사용불가.
2. 프로젝트는 모바일, 데스크톱 모두 지원하고있지만 모바일의 사용율이 90%, 데스크톱은 10%에 반해 서버에 저장되어있는 이미지는 모바일 사이즈 기준 3배수의 이미지가 저장되어있어. 호출시 렌더링 지연 및 비용문제에 직면
3. 모든 이미지가 즉시 로드되어 초기 로딩 속도 저하

🎯 설계 목표

• 다중 해상도 지원: 1x, 2x, 3x density별 최적화된 이미지 제공
• 최신 포맷 활용: WebP/AVIF 우선, fallback으로 원본 제공
• 지연 로딩: 뷰포트 진입 시점에 로딩
• 타입 안전성: TypeScript로 props 검증

🔍 동작 원리:

• 다중 해상도 대응 (srcset)
• 포맷 최적화 (Picture 태그)
• 브라우저가 디바이스에 맞는 최적 이미지 자동 선택
• 쿼리 파라미터 처리

📈 성능 지표

...
// 다중 해상도 대응
const getDensity1to3Srcset = ({ src, height, width, format, objectFit, ...rest }) => {
    return [1, 2, 3]
        .map((density) => ({
            url: getImageSrc({ src, density, height, width, format, objectFit, ...rest }),
            density,
        }))
        .map(({ url, density }) => `${url} ${density}x`)
        .join(',')
}

...
// 포맷 최적화
<picture>
    <source srcSet={webpSrc} type="image/webp" />  {/* WebP 우선 */}
    <img src={src} loading="lazy" alt={alt} />      {/* 원본 fallback */}
</picture>