HTML의 img, picture, source 태그 속성과 기능 정리

HTML의 img, picture, source 태그 속성과 기능 정리

---

1. <img> 태그

개요

<img> 태그는 HTML 문서에 이미지를 삽입하는 기본적인 태그이다. self-closing 태그이며, 콘텐츠를 포함하지 않는다.

기본 문법

<img src="image.jpg" alt="설명 텍스트">

주요 속성

속성 설명

src	이미지의 URL 또는 경로
alt	이미지가 표시되지 않을 경우 대체 텍스트
width	이미지의 너비(픽셀 또는 백분율)
height	이미지의 높이(픽셀 또는 백분율)
title	마우스를 올렸을 때 표시될 텍스트
loading	lazy(지연 로딩) 또는 eager(즉시 로딩) 지정
decoding	async, sync, auto(이미지 디코딩 방식)
crossorigin	anonymous, use-credentials(CORS 설정)
referrerpolicy	no-referrer, origin, strict-origin 등 (리퍼러 정책)

예제

<img src="photo.jpg" alt="풍경 사진" width="500" height="300" loading="lazy">

---

2. <picture> 태그

개요

<picture> 태그는 반응형 이미지를 제공하는 태그로, 다양한 화면 크기나 기기별로 적절한 이미지를 선택해 출력할 수 있다.

기본 문법

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="기본 이미지">
</picture>

주요 기능

• 다양한 해상도의 이미지 제공: srcset 속성을 통해 장치 해상도에 맞는 이미지 선택 가능
• 미디어 쿼리 적용 가능: media 속성을 활용하여 화면 크기에 따라 다른 이미지 출력
• 웹P 등의 차세대 이미지 포맷 제공 가능: 브라우저가 지원하는 포맷만 로드하도록 설정 가능

---

3. <source> 태그

개요

<source> 태그는 <picture> 태그와 함께 사용되며, 조건에 따라 다른 이미지를 불러올 수 있도록 한다.

주요 속성

속성 설명

srcset	사용할 이미지의 경로(여러 개 지정 가능)
media	미디어 쿼리를 이용하여 적용 조건 설정
type	이미지 형식 지정 (예: image/webp, image/jpeg)

예제

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="fallback.jpg" alt="기본 이미지">
</picture>

• 브라우저가 WebP를 지원하면 image.webp을 로드하고, 그렇지 않으면 image.jpg를 로드
• 만약 <source> 태그의 조건이 모두 충족되지 않으면 <img> 태그의 기본 이미지가 로드됨

---

4. <img> vs <picture> + <source> 비교

기능 <img> 태그 <picture> + <source> 태그

기본적인 이미지 삽입	✅ 가능	✅ 가능
반응형 이미지 지원	❌ 제한적	✅ 미디어 쿼리 지원
다른 포맷 지원 (WebP 등)	❌ 불가능	✅ 가능
브라우저별 최적화	❌ 불가능	✅ 가능

---

5. 브라우저 지원 여부

태그 지원 브라우저

<img>	모든 브라우저
<picture>	Edge, Chrome, Firefox, Safari, Opera
<source>	Edge, Chrome, Firefox, Safari, Opera

---

6. 결론

• 단순한 이미지 삽입: <img> 태그 사용
• 반응형 이미지 적용: <picture> 및 <source> 활용
• 브라우저 최적화 및 차세대 이미지 포맷 사용: <source>와 type 속성 활용

필요에 따라 적절한 태그를 선택하여 사용하면 웹 성능과 UX를 향상시킬 수 있다.