이미지 최적화

이미지 최적화는 포맷 선택·규격 정의·로딩 전략 세 축으로 웹 서비스의 초기 로딩 성능을 개선하는 기법이다. pxd UX Engineer seonju.lee는 NFT 서비스 NILE에서 상품 이미지 하나당 용량이 1~4MB에 달하고 메인 페이지 요청 이미지 수가 300개를 넘어 초기 로딩이 상당히 지연됐던 문제를 한 달간의 개선 작업으로 해소한 사례를 소개한다.

첫 번째 축은 이미지 포맷 전략이다. 투명 배경 여부에 따라 흔히 선택하는 jpg(손실 압축)·png(무손실 압축) 대신, 대량의 이미지 트래픽에 대응하기 위해 등장한 차세대 포맷을 활용할 수 있다. 2010년 구글이 만든 webp는 jpg 대비 25~34%, png 대비 26% 적은 용량으로 동일 화질을 구현하며, 2019년 Alliance for Open Media가 만든 avif는 손실 압축 기준 jpg 대비 50%, webp 대비 20% 더 적은 용량을 달성하지만 무손실 압축 효율은 webp·png보다 낮을 수 있다. 두 포맷 모두 OS 버전별로 브라우저 지원 범위가 다르므로 사전 확인이 필요하며, Next.js에서는 `next.config.js`의 `images.formats` 설정만으로 자동 적용할 수 있다.

두 번째 축은 이미지 규격 정의다. NILE의 경우 서버에 저장된 원본이 1280×1280px이었지만 실제 브라우저에 노출되는 크기는 240~420px에 불과해, 디자인팀에 원본 자체의 규격과 용량을 줄이도록 요청했다. 여기에 `next/image`의 `deviceSizes` 설정으로 디바이스별 반응형 이미지를 자동 제공하도록 구성했다.

세 번째 축은 레이지 로딩이다. 뷰포트에 도달했을 때만 리소스를 요청하는 `loading="lazy"`는 페이지 로드 시점에 이미지를 모두 요청하는 `loading="eager"`에 비해 초기 요청 수를 크게 줄인다(예: 초기 요청 265건 → 81건). 또한 `` 태그 대신 CSS `background` 속성으로 이미지를 처리하면 브라우저의 이미지 최적화 대상에서 제외되어 SEO와 성능 모두에 불리하므로, 의미 있는 이미지는 `next/image`의 `objectFit="cover"`와 `alt` 속성을 갖춘 컴포넌트로 처리하는 것이 권장된다.

핵심 내용

• webp/avif: jpg·png보다 압축 효율이 높은 차세대 이미지 포맷, OS·브라우저별 지원 범위 사전 확인 필요
• 이미지 규격은 서버 원본이 아닌 실제 화면 노출 크기 기준으로 정의하고 디바이스별 반응형 이미지로 제공
• `loading="lazy"`(레이지 로딩)로 초기 이미지 요청 수와 로딩 시간을 크게 감소
• CSS `background` 대신 ``/`next/image` 컴포넌트 사용이 SEO·성능에 유리
• `next.config.js`의 `images.formats`, `deviceSizes` 설정으로 포맷·반응형 규격을 코드 레벨에서 일괄 관리 가능

관련 개념

• 성능 최적화와 기획 디자인 협업 — 이미지 사양이 기획·디자인 단계에서부터 성능의 상한선을 정한다는 상위 원칙
• React 컴포넌트 성능 최적화 — 같은 Next.js 환경에서 렌더링·번들 축을 다루는 다른 성능 최적화 기법
• 코어 웹 바이탈과 SEO — 이미지 최적화가 LCP 등 핵심 웹 바이탈 지표에 직접 영향을 주는 영역
• UX 엔지니어 직무와 XE 그룹 — 저자가 속한 pxd XE Group의 실무 사례

출처

• 이미지 성능 최적화 — 2023-08-07, seonju.lee