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

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


---

1. <img> 태그

개요

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

기본 문법

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

주요 속성

예제

<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> 태그와 함께 사용되며, 조건에 따라 다른 이미지를 불러올 수 있도록 한다.

주요 속성

예제

<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> 비교


---

5. 브라우저 지원 여부


---

6. 결론

단순한 이미지 삽입: <img> 태그 사용

반응형 이미지 적용: <picture> 및 <source> 활용

브라우저 최적화 및 차세대 이미지 포맷 사용: <source>와 type 속성 활용


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