picture 태그, 반응형 이미지를 만들 수 있는 태그 사용 방법

 

<picture> 태그란?

하나의 이미지 자리에 여러 버전의 이미지를 준비해 두고,

브라우저의 화면 크기, 지원 포맷에 맞춰 가장 적절할 이미지를 선택해서 보여주는 태그!

 

즉! 화면의 크기나 기기의 환경에 따라~

알맞은 이미지를 자동으로 골라 보여주는 태그 이다!!

 

 

[예시]

<picture>
  <source srcset="/src/assets/rwd/small-550.jpg 550w" media="(max-width: 500px)" />
  <!-- small-550.jpg라는 이미지는 너비(width)가 550픽셀입니다. -->
  <source srcset="/src/assets/rwd/medium-1024.jpg 1024w" media="(max-width: 768px)" />
  <source srcset="/src/assets/rwd/large-1600.jpg 1600w" media="(max-width: 1280px)" />
  <img src="/src/assets/rwd/normal-1920.jpg" alt="" />
</picture>

 

브라우저가 화면의 크기를 확인하면서

 

• 500px 이하의 핸드폰 화면 → small-550.jpg 사용
• 768px 이하의 태블릿 화면 → medium-1024.jpg 사용
• 1280px 이하의 작은 노트북 화면 → large-1600.jpg 사용
• 그보다 크면 기본 <img>의 이미지(normal-1920.jpg) 사용

즉, 각 디바이스에 딱 맞는 이미지를 자동으로 선택해주는 구조

 

 

<picture>태그는 상황별 이미지 스위치라고 생각하면 됨!

 

<source>태그는 "조건/규칙"만 알려주는 태그이고!

<img>태그가 실제로 브라우저에 그려짐!

그래서 <source>태그의 이미지 설명은 <img> 태그의 alt값을 따라감!

 

브라우저의 너비에 따라~ 조건에 맞는 <source>태그가 있으면 그걸 사용!

조건에 안맞으면 <img>태그가 기본 이미지로 출력 됨!

 

기억 해야할 건!!!!

항상 최종적으로 화면에 그려지는것은 img 태그!!

 

이렇게 사용하는 이유??

 

1. 디바이스(모바일/태블릿/PC)에 최적화된 이미지 사용 > 불필요한 큰 이미지를 다운로드 하지 않음
2. 용량 절약으로 로딩 속도 개선 > 이미지가 웹에서 가장 무거운 자원이기 때문에~ 속도 향상 효과 큼
3. 고해상도(Retina) 기기에서 선명한 이미지 출력 가능 > 필요한 해상도에 맞춰 이미지 선택
4. 반응형 웹 디자인의 필수 요소  > 다양한 해상도·기기에서 UI가 깨지지 않음

---

 

<picture>태그의 또다른 사용방법!!

 

picture태그는 지원하는 브라우저에 맞춰!  이미지 노출을 설정 할 수 있음.

 

이미지의 2가지 종류가 있다.

• 전통적인 이미지 포맷: JPG, PNG
• 최신 이미지 포맷: WebP, AVIF

 

전통적인 이미지는 용량이 크고, 최신이미지 포맷은 용량이 훨씬 작고 화질이 좋다!

단 모든 브라우저가 100%로 지원하는 건 아님 (옛날 사파리, 옛날 IE 등)

 

[예시]

<picture>
  <source srcset="banner.webp" type="image/webp" />
  <img src="banner.jpg" alt="광고 배너 이미지" />
</picture>

 

 

<picture>태그는 지원되면 가벼운 .webp 이미지 파일로 노출!

지원되지 않으면 .jpg 대체 이미지를 사용해라!

 

picture 태그는

조건에 맞지 않는 경우, 대비해둔 기본 이미지로 자동으로 내려가는 것!!

---

 

사실 난 그동안 회사에서 picture태그를 사용 해본적도~! 사용된걸 본적도 없다!!!

 

정말이지 picture태그에 대해 배우면서 폭풍 서치를 했다!

 

물론 내가 처음 공부를 할때는! 분명 배우고 알고 있었던 정보였을거다!

근데.. 실무에서 사용해 본 적이!! 사용하는 걸 본 적이!! 한번도 없었으니... 희미해지는 나의 머릿속.. 

 

이게 도대체 무슨 태그이며??

어디서 어제 뭐할때 쓰는 태그인지... 당황스러웠다

 

보통 picture태그는 이미지가 중요한!! 이미지가 생명인!!! 사이트

OTT사이트(넷플릭스 등) 또는 이커머스(쇼핑몰) 등에서 사용을 많이 한다고 한다!

 

공부를 하면서 좋은 태그를 알았으니!!

나도 포폴을 만들거나~ 실무를 들어가게 되면 적용해봐야겠다.