이미지 다루기

이미지는 포맷과 크기를 상황에 맞게 다룹니다.
포맷 선택과 반응형 제공은 서로 다른 문제가 아니라,
이미지의 역할과 표시 크기를 기준으로 함께 결정하는 설계 요소입니다.

이미지 역할은 이미지 역할에서 정의합니다.

포맷 선택의 기본 원칙

이미지 포맷은 다음 기준을 우선으로 선택합니다.

이미지의 역할이 무엇인가
투명도가 필요한가
디테일 유지가 중요한가
성능 최적화가 우선인가

하나의 포맷이 모든 상황에 적합하지는 않습니다.

포맷별 사용 기준

JPG / JPEG

사진, 배경 이미지 등 실사 이미지에 사용합니다.
색상 변화가 많고 디테일이 중요한 경우 적합합니다.
용량과 품질의 균형이 필요할 때 사용합니다.

PNG

투명도가 필요한 이미지에 사용합니다.
아이콘, UI 그래픽에 적합합니다.
용량이 커질 수 있으므로 제한적으로 사용합니다.

WebP

대부분의 UI 이미지에 우선 고려합니다.
JPG, PNG 대비 용량이 작습니다.
투명도와 애니메이션을 모두 지원합니다.

WebP는
범용적인 기본 포맷으로 권장됩니다.

<picture>로 WebP를 우선 제공하고, 미지원 브라우저를 위한 대체 포맷을 <img>에 둡니다.

<picture>
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="봄 신상품 컬렉션 대표 이미지" width="1200" height="800">
</picture>

AVIF

고압축이 필요한 경우 사용합니다.
성능 최적화가 중요한 이미지에 적합합니다.
브라우저 지원 여부를 반드시 고려합니다.

AVIF는
조건부 사용을 전제로 합니다.

역할 기반 포맷 선택

이미지 역할에 따라 포맷을 선택합니다.

정보 전달 이미지 → 품질 우선
기능 이미지 → 명확성 우선
장식 이미지 → 용량 최소화 우선

포맷 선택은
역할 정의 이후에 결정되어야 합니다.

반응형 이미지 설계 기준

반응형 이미지는 다음 기준에 따라 설계합니다.

이미지의 실제 표시 크기를 기준으로 제공합니다.
디바이스 해상도에 맞는 리소스를 제공합니다.
레이아웃 변경에 따라 이미지 크기가 달라지는 경우를 고려합니다.

반응형 이미지는
디자인이 아닌 구조 기준으로 설계해야 합니다.

srcset으로 후보 이미지를, sizes로 표시 폭을 알려 브라우저가 리소스를 선택하게 합니다. 레이아웃 밀림을 막기 위해 width/height는 항상 명시합니다.

<img src="/img/card.jpg" srcset="/img/card-480.jpg 480w, /img/card-960.jpg 960w" sizes="(max-width: 600px) 100vw, 480px" alt="상품 카드 썸네일" width="480" height="320">

해상도 대응 기준

고해상도 디바이스 대응은 다음 기준을 따릅니다.

기본 해상도 이미지를 우선 제공합니다.
고해상도 이미지는 선택적으로 제공합니다.
과도한 고해상도 이미지는 지양합니다.

해상도 대응은
품질과 성능의 균형이 중요합니다.

반응형 처리 시 주의 사항

반응형 이미지를 사용할 때는 다음을 주의합니다.

필요 이상의 이미지 크기를 제공하지 않습니다.
모든 이미지를 반응형으로 처리하지 않습니다.
장식 이미지는 단순한 처리 방식을 우선합니다.

모든 이미지가
동일한 전략을 가질 필요는 없습니다.