반응형 웹의 핵심: <picture>와 srcset으로 기기별 최적화 이미지 보여주기

 

웹사이트 성능 최적화에서 가장 큰 비중을 차지하는 요소는 보통 '이미지'입니다. 고해상도 모니터에서는 선명한 이미지가 필요하지만, 작은 모바일 화면에서 똑같이 거대한 파일을 불러오는 것은 데이터 낭비이자 로딩 속도 저하의 주범이 됩니다.

오늘은 HTML5의 srcset 속성과 <picture> 엘리먼트를 활용해, 기기 환경에 딱 맞는 이미지를 스마트하게 서빙하는 방법을 알아보겠습니다.

1. 해상도 전환(Resolution Switching): srcset 속성

단순히 화면 크기에 따라 같은 이미지의 '다른 해상도' 버전을 제공하고 싶을 때 사용합니다. 브라우저가 현재 기기의 화면 너비와 DPI(화소 밀도)를 계산해 가장 적합한 파일을 스스로 선택합니다.

예제 1: 너비 서술자(Width descriptors) 사용하기

브라우저에게 이미지의 실제 가로 너비(w)를 알려주고 선택권을 넘기는 방식입니다.

<img src="fallback-image.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            800px"
     alt="반응형 풍경 이미지">

• srcset: 이미지 경로와 해당 이미지의 실제 가로 크기(px 대신 w 사용)를 나열합니다.
• sizes: 미디어 조건에 따라 이미지가 화면에서 차지할 예상 크기를 정의합니다. 위 예시는 "뷰포트가 600px 이하일 때는 480px 정도로 보여줄 거고, 그 외엔 800px 정도로 보여줄 거야"라는 뜻입니다.
• src: srcset을 지원하지 않는 구형 브라우저를 위한 대비책(Fallback)입니다.

예제 2: 화소 밀도(Pixel density descriptors) 사용하기

이미지의 크기는 고정되어 있지만, 레티나 디스플레이처럼 밀도가 높은 화면에 대응할 때 유용합니다.

<img src="logo.png"
     srcset="logo.png 1x,
             logo@2x.png 2x,
             logo@3x.png 3x"
     alt="브랜드 로고">

• 1x, 2x 등은 기기의 장치 화소비를 의미합니다.

2. 아트 디렉션(Art Direction): <picture> 태그

단순히 크기만 조절하는 게 아니라, 화면 크기에 따라 아예 이미지의 구성(구도)을 바꾸거나 특정 포맷을 우선적으로 지원하고 싶을 때 사용합니다.

예제 3: 기기별 맞춤 이미지 제공 (모바일/데스크톱 구분)

데스크톱에서는 가로가 긴 풍경 사진을, 모바일에서는 중요한 피사체만 강조된 세로형 사진을 보여주고 싶을 때 유용합니다.

<picture>
  <!-- 1024px 이상의 넓은 화면용 -->
  <source media="(min-width: 1024px)" srcset="desktop-hero.jpg">
  
  <!-- 768px 이상의 태블릿용 -->
  <source media="(min-width: 768px)" srcset="tablet-hero.jpg">
  
  <!-- 기본값 (모바일 우선 권장) -->
  <img src="mobile-hero.jpg" alt="메인 홍보 이미지">
</picture>

예제 4: 차세대 이미지 포맷(WebP, AVIF) 대응

최신 포맷인 WebP나 AVIF는 용량이 매우 작지만 모든 브라우저가 지원하지는 않습니다. <picture>를 사용하면 지원하는 브라우저에서만 최신 포맷을 사용하게 할 수 있습니다.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="차세대 포맷 대응 이미지">
</picture>

• 브라우저는 위에서부터 차례대로 확인하며, 자신이 해석할 수 있는 첫 번째 <source>를 선택합니다. 모두 지원하지 않는다면 마지막 <img>를 출력합니다.

3. 실무 적용 팁

1. 모바일 우선(Mobile First): <img> 태그의 src에는 가장 기본이 되는(보통 가장 작은) 이미지를 넣는 것이 로딩 성능에 유리합니다.
2. Alt 속성 필수: alt 속성은 접근성을 위해 반드시 <img> 태그에만 작성합니다. <picture> 내부의 <source>에는 작성하지 않습니다.
3. Lazy Loading 결합: loading="lazy" 속성을 함께 사용하면 화면에 보이지 않는 영역의 이미지 로딩을 지연시켜 초기 속도를 더욱 높일 수 있습니다.

<img src="photo.jpg" 
     srcset="photo-small.jpg 400w, photo-large.jpg 1200w" 
     sizes="100vw" 
     loading="lazy" 
     alt="설명">

요약

기능태그/속성주요 용도

해상도 전환	srcset, sizes	같은 그림을 크기별로 다르게 제공할 때 (성능 최적화)
아트 디렉션	<picture>, <source>	화면 크기에 따라 구도를 바꾸거나 파일 포맷을 변경할 때

사용자의 환경은 점점 다양해지고 있습니다. srcset과 <picture>는 이제 선택이 아닌 필수입니다. 작은 코드 한 줄로 사용자의 데이터는 아끼고, 사이트의 가독성은 높여보세요.