[HTML5] <img>와 <picture> 차이, srcset과 sizes 활용법

💡창모드 화면 크기 조정을 통해 이미지가 아래와 같이
나타나고 크기가 알맞게 적용되는지 살펴보자!
- 티스토리내 코드펜 사용 시 제대로 확인할 수 없기에 코드펜으로 옮겨가 확인하는걸 추천😉

조건	나타날 이미지	sizes (크기 조정)
화면 너비 1400px 이상	방일러스트	(max-width: 700px) → 100vw (max-width: 1200px) → 50vw 그 외 → 33vw
화면 너비 768px 이상 1400px 이하	사람, 강아지 일러스트	(max-width: 700px) → 100vw (max-width: 1200px) → 50vw 그 외 → 33vw
기본 이미지 (화면 크기 조건 미충족 시) - 화면 너비 768px 이하	짱구 만화	(max-width: 700px) → 100vw (max-width: 1200px) → 50vw 그 외 → 33vw

🚨 만약 <source> 요소에서 srcset, media, sizes 속성을 모두 사용할 경우
위의 코드처럼 역할이 겹치지 않도록 하는 것이 필요(위의 예시는 극단적 예시)

💡실제로는 방법1 < 방법2 로 권장

  

    
    
    
    
  
<!--방법 1-->
<source 
  srcset="https://i.pinimg.com/1200x/06/2e/9c/062e9cd81a427b9ab175aaecdd838587.jpg 1400w"
  media="(min-width: 1400px)"
  sizes="(max-width: 700px) 100vw, (max-width: 1200px) 50vw, 33vw">

  

    
    
    
    
  
<!--방법 2-->
<source 
  srcset="https://i.pinimg.com/1200x/06/2e/9c/062e9cd81a427b9ab175aaecdd838587.jpg 1400w"
  media="(min-width: 1400px)"
  sizes="33vw">

---

1️⃣ 태그와 속성들, 왜 신경 써야 할까?

• 웹 환경에서는 다양한 디바이스와 화면 크기, 해상도를 지원하는 것이 필수
• ✅ 이미지 최적화를 하지 않으면?
  • 고해상도 이미지를 작은 화면에서도 그대로 로드 → 데이터 낭비 & 페이지 로딩 속도 저하
  • 저해상도 이미지를 큰 화면에서 로드 → 픽셀 깨짐 현상 ⚠️

2️⃣ <img>태그와 <picture>태그

1. <img> 태그
   • 이미지를 하나만 표시할 때 주로 사용
   • srcset과 sizes를 활용 시 다양한 화면 크기나 해상도에 맞게 이미지를 최적화

속성	설명	사용예시
src	기본이미지(srcset에서 적합한 이미지가 없을 때 사용)	<img src="default.jpg" alt="image">
srcset	여러 해상도의 이미지를 제공하고, 브라우저는 최적의 이미지를 선택	srcset="image.webp 1024w, image.jpg 1920w"
sizes	화면 크기나 조건에 맞는 이미지의 표시크기	sizes="(max-width: 600px) 100vw,50wv)"

  

    
    
    
    
  
<img 
  src="default.jpg" 
  srcset="image.webp 1024w, image.jpg 1920w" 
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
  alt="Responsive Image">

• src : 기본 이미지 default.jpg 제공
• srcset : image.webp와 image.jpg를 다양한 해상도로 제공하며, 브라우저는 조건에 맞는 이미지를 자동으로 선택
• sizes : 화면 크기 조건에 맞춰 이미지 크기 설정
  • 화면 너비가 600px 이하일 때는 100% 너비로,
    1200px 이하일 때는 50% 너비로, 그 이상일 때는 33% 너비로 표시
• 🚨srcset에서 해상도별 이미지를 선택할 순 있지만, 브라우저가 WebP를 지원하는지 확인해서 WebP를 선택하는 기능은 없음

---

2. <picture> 태그

• 여러 조건에 맞춰 서로 다른 이미지 포맷이나 크기를 제공할 때 사용
• <source> 태그와 미디어 쿼리를 활용하여 다양한 조건을 설정 가능

속성	설명	사용예시
<source srcset="">	여러 이미지 파일을 제공하고, 브라우저는 최적의 이미지를 선택함	srcset="mobile-480w.jpg 480w, mobile-1024w.jpg 1024w"
<source sizes="">	화면 크기나 조건에 맞는 이미지의 표시 크기	sizes="(max-width: 600px) 100vw"
<source media="">	미디어 쿼리로, 화면 크기나 조건에 맞는 이미지를 선택	media="(max-width: 600px)"
<source media="">	모든 조건에 맞지 않을 때 기본 이미지를 제공	<img src="default.jpg" alt="Responsive image">

  

    
    
    
    
  
<picture>
  <!-- 화면 크기가 1200px 이상일 때 WebP 이미지 사용 -->
  <source 
    srcset="image.webp 1024w, image.jpg 1920w" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
    type="image/webp" 
    media="(min-width: 1200px)">
  
  <!-- WebP를 지원하지 않거나 화면 크기가 작은 경우 JPEG 사용 -->
  <source 
    srcset="image.jpg 1024w, image.jpg 1920w" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" 
    type="image/jpeg">
  
  <!-- 조건에 맞는 이미지가 없으면 기본 이미지 사용 -->
  <img 
    src="default.jpg" 
    alt="Responsive Image" 
    srcset="default.jpg 1024w" 
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw">
</picture>

• 첫 번째 <source>
  • media="(min-width: 1200px)" 이 조건을 만족하는 화면 크기에서 WebP 이미지를 제공.
    • srcset="image.webp 1024w, image.jpg 1920w"
      => WebP 이미지와 JPEG 이미지를 동시에 제공하지만 type값에 따른 WebP 이미지를 선택
    • 🚨만약 브라우저가 WebP를 지원하지 않으면, 이 <source>는 무시되고, 다음 <source>로 넘어감
• 두 번째 <source>
  • media="(min-width: 500px) and (max-width: 1200px)" 이 조건을 만족하는 화면 크기에서 JPEG 이미지를 제공
  • 화면 크기가 500px 이상 1200px 이하일 때 image.jpg가 선택
• 세 번째 <img>
  • <img>의 src 속성에 설정된 default.jpg는 화면 크기가 500px 미만일 때 자동으로 사용

화면 크기	sizes	srcset 선택 이미지	설명
500px 이하	100vw	default.jpg (기본 이미지)	<source> 태그의 조건에 맞는 이미지가 없으면 <img src="dafult.jpg">가 기본 이미지로 로드
500px ~ 600px	100vw	image.jpg 1024w 또는 image.jpg 1920w	00% 화면 크기에 맞는 적절한 이미지 선택 화면 너비가 600px 이하일 때 1024px 이미지가 적합할 수 있음.
601px ~ 1200px	50vw	image.jpg 1024w 또는 image.jpg 1920w	50% 화면 크기에 맞는 적절한 이미지 선택 (예: 화면 너비가 1000px이면 50vw는 500px, 1024px 이미지가 적합하지만, 1920px도 선택될 수 있음)
1200px 이상	33vw	image.jpg 1024w 또는 image.jpg 1920w	33% 화면 크기에 맞는 적절한 이미지 선택 (예: 화면 너비가 1600px이면 33vw는 528px로 1024px 이미지가 적합하지만, 1920px도 선택될 수 있음.

3️⃣ <img> 태그와 <picture> 태그 사용 예시

• 언제 <picture>를 사용하는가?
  • 다양한 이미지 포맷을 제공해야 할 때 (예: WebP와 JPEG).
  • 화면 크기, 해상도, 그리고 이미지 포맷에 따라 더 복잡한 조건을 설정해야 할 때.
  • 같은 이미지를 여러 해상도와 포맷으로 제공하면서 브라우저가 최적의 이미지를 선택하도록 하고 싶을 때.
• 언제 <img>를 사용하는가?
  • 단일 이미지만 필요하거나, 이미지 포맷은 크게 구분하지 않고 화면 크기만에 맞춰 최적화된 이미지를 제공할 때.
  • srcset과 sizes 속성을 통해 조건에 맞는 이미지를 선택

특성	<img>	<picture>
용도	단일 이미지를 제공하며, srcset과 sizes를 활용해 다양한 화면 크기에 맞춰 이미지 최적화	여러 조건에 맞는 이미지(포맷, 크기 등)를 제공하며, 브라우저가 해당 조건에 맞는 이미지를 선택
속성	src, srcset, sizes	<source>의 srcset, sizes, media와 <img>의 src
기본 이미지	src 속성으로 기본 이미지를 설정	<img> 태그에서 기본 이미지를 설정 (<source>에 조건에 맞는 이미지가 없으면 사용)
미디어 쿼리	❌ (화면 크기에 따른 이미지 조정은 sizes로만)	✅(각 <source> 태그에 media를 사용하여 조건을 설정)