picture 태그, 반응형 이미지를 구현하는 두 가지 방법

 

반응형 웹을 구현할 때, 이미지를 다양한 기기 환경에 맞춰~

자유롭게 조절할 수 있는 <picture> 태그는 크게 두 가지 방식으로 사용할 수 있다.

 

 

[ 방식 01 - 'sizes + w 단위(srcset)' 방식 ]

<picture>
  <source sizes="50vw" srcset="/src/assets/logo/netflix@1x.webp 420w, /src/assets/logo/netflix@2x.webp 656w" />
  <img src="/src/assets/logo/netflix@1x.png" alt="NETFLIX" />
</picture>

 

 

폭(Width) 기반 반응형 이미지 방식

• sizes="50vw" >> 이 이미지는 뷰포트의 절반 크기로 보일 예정!
• 브라우저는 실제 렌더링 크기(50vw 계산값)를 보고! 420w 또는 656w 중 적절한 해상도를 선택함.

 

 

브라우저가 선택 기준으로 삼는 것?? 

  >> 화면에서 이미지가 어느 정도 폭(width)으로 보일지!

 

언제 사용??

• 로고처럼 화면 크기에 따라 보이는 크기가 달라지는 이미지
• 반응형 레이아웃에서 width가 유동적인 이미지

 

 

 

[ 방식 02 -  '픽셀 밀도(1x, 2x, 3x) 선택' 방식 ]

<picture>
  <source srcset="/src/assets/rwd/image-1x.png 1x, /src/assets/rwd/image-2x.png 2x, /src/assets/rwd/image-3x.png 3x" />
  <img src="/src/assets//rwd/image-src.png" alt="" />
</picture>

 

해상도(DPR) 기반 고해상도 이미지 방식

• 1x, 2x, 3x는 기기의 픽셀 밀도(DPR)
• 일반 모니터 = 1x
• 맥북·아이폰 Retina = 2x ~ 3x

화면 크기와는 상관없이, 기기가 얼마나 선명한지에 따라 이미지 선택

 

브라우저가 선택 기준으로 삼는 것?? 

  >> 기기의 해상도(DPR)

 

언제 사용??

• 아이콘, 특별히 선명해야 하는 이미지(logo, profile)
• 기기 해상도 차이 때문에 이미지가 깨지거나 픽셀이 네모네모하게 보이는 상태로 보일 수 있는 이미지에서 사용

 

[ 두 방식의 차이 ]

구분	'sizes + w 단위(srcset)' 방식	'픽셀 밀도(1x, 2x, 3x) 선택' 방식
선택 기준	이미지가 실제로 보일 폭(width)	기기 해상도(DPR 1x/2x/3x)
sizes 필요?	필수(왜냐면 width 기반 선택)	필요 없음
사용하는 단위	w (width 단위)	x (픽셀 밀도 단위)
예시 상황	반응형 로고, 배너	선명한 아이콘, retina 이미지
예시 상황	있음 (뷰포트 width 변경)	없음 (기기 해상도만 영향)

 

 

쉽게 말해서!!

 

'sizes + w 단위(srcset)' 방식은 이미지가 화면에 얼마나 큰 공간을 차지하느냐에 따라~

작은 버전, 큰 버전 고르는 방식이다 >> 크기 판단을 기반

 

예)

• 화면이 작으면: 420w
• 화면이 크면: 656w

'픽셀 밀도(1x, 2x, 3x) 선택' 방식은 기기가 선명하냐~ 선명하지 않냐에 따라~

고해상도 버전을 고르는 방식 >> 해상도 판단 기반

 

예)

• 일반 노트북 → 1x
• 아이폰 Retina → 2x
• 고해상도 기기 → 3x

 

<picture> 태그는 단일 이미지를 보여주는 <img>태그와 달리!!

다양한 환경(해상도·기기·화면 크기)에 맞춘 여러 버전의 이미지를 선택적으로 보여줄 수 있는 강력한 태그다.