HTML <source> srcset 속성

HTML <source> 태그

정의와 사용법

srcset 속성은 다양한 상황에서 사용할 이미지의 URL을 정의합니다.

<source>를 사용할 때 <picture> 이 때는 이 속성이 필수적입니다.

예제

두 개의 원본 파일과 대체 이미지를 포함한 <picture> 요소:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

직접 테스트해 보세요

문법

<source srcset="URL">

속성 값

값 설명
URL

이미지의 URL을 정의합니다.

가능한 값:

  • 절대적 URL - 다른 사이트를 지정합니다 (예: href="http://www.example.com/flower.jpg")
  • 상대적 URL - 사이트 내 파일을 지정합니다 (예: href="flower.jpg")

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
38.0 13.0 38.0 9.1 25.0

HTML <source> 태그