[HTML] <picture>, <source> 태그 사용 가이드

picture 소스 태그란?

picture 태그는 HTML5에서 도입된 요소로, 다양한 화면 크기와 해상도에 맞춰 최적의 이미지를 제공하기 위해 사용됩니다. 즉, 사용자의 기기 환경에 따라 가장 적합한 이미지를 자동으로 선택하여 보여주는 역할을 합니다.

왜 picture 태그를 사용해야 할까요?

• 반응형 웹 디자인: 다양한 기기에서 웹사이트를 최적화하기 위해 필수적인 요소입니다.
• 이미지 로딩 속도 향상: 불필요한 이미지를 로딩하지 않아 페이지 로딩 속도를 개선할 수 있습니다.
• 이미지 품질 유지: 각 기기에 맞는 최적의 이미지를 제공하여 이미지 품질을 유지할 수 있습니다.

picture 태그의 기본 구조

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="설명">
</picture>

• <picture>: picture 요소의 시작과 끝을 나타냅니다.
• <source>: 다양한 이미지 소스를 정의합니다.
• media: 해당 소스가 적용될 미디어 쿼리를 지정합니다.
• srcset: 해당 미디어 쿼리에 맞는 이미지 파일의 경로를 지정합니다.
• <img>: 모든 조건에 부합하지 않을 경우 표시될 기본 이미지를 지정합니다.

작동 원리

브라우저는 picture 요소를 만나면, 사용자의 화면 크기 등을 기반으로 media 쿼리를 평가하고, 가장 먼저 일치하는 source 요소의 이미지를 선택하여 표시합니다. 만약 어떤 source 요소에도 일치하는 미디어 쿼리가 없다면, 마지막에 있는 img 요소의 이미지를 사용합니다.

<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="반응형 이미지">
</picture>

위 예시에서는 화면 너비가 1024px 이상이면 desktop.jpg, 768px 이상이면 tablet.jpg, 그 외에는 mobile.jpg가 표시됩니다.

주의할 점

• srcset 속성: 이미지 파일의 크기와 해상도에 따라 적절한 srcset 값을 설정해야 합니다.
• 미디어 쿼리: 다양한 기기의 화면 크기를 고려하여 미디어 쿼리를 정확하게 작성해야 합니다.
• alt 속성: 이미지가 로드되지 않거나 시각 장애인을 위해 alt 속성을 반드시 작성해야 합니다.

picture 태그의 장점

• 유연성: 다양한 이미지 형식과 크기를 지원합니다.
• 효율성: 불필요한 이미지 로딩을 방지하여 웹사이트 성능을 향상시킵니다.
• 접근성: alt 속성을 통해 시각 장애인에게도 이미지 정보를 제공할 수 있습니다.

media 속성의 다양한 예시 및 활용법

HTML의 <source> 요소에서 사용되는 media 속성은 해당 소스가 적용될 미디어 조건을 지정하는 데 사용됩니다. 즉, 특정 화면 크기, 해상도, 장치, 방향 등의 조건에 따라 다른 콘텐츠를 표시할 수 있도록 합니다. 주로 picture 요소와 함께 사용되어 반응형 웹 디자인을 구현하는 데 활용됩니다.

media 속성의 문법

<source media="(조건)" srcset="이미지 파일">

• 조건: 미디어 쿼리(Media Query)를 사용하여 다양한 조건을 설정합니다.
• 이미지 파일: 조건에 맞는 이미지 파일의 경로를 지정합니다.

media 속성의 활용 예시

1. 화면 크기에 따른 이미지 변경

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="설명">
</picture>

• 화면 너비가 768px 이상이면 large.jpg를, 480px 이상이면 medium.jpg를, 그 외에는 small.jpg를 표시합니다.

2. 장치 종류에 따른 이미지 변경

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="default.jpg" alt="설명">
</picture>

• 화면 방향이 가로(landscape)이면 landscape.jpg를, 세로(portrait)이면 portrait.jpg를 표시합니다.

3. 해상도에 따른 이미지 변경

<picture>
  <source media="(min-resolution: 2dppx)" srcset="high-res.jpg">
  <img src="low-res.jpg" alt="설명">
</picture>

• 화면 해상도가 2dppx 이상이면 high-res.jpg를, 그 외에는 low-res.jpg를 표시합니다.

4. 색상 선호도에 따른 스타일 변경

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark-theme.css">
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="light-theme.css">

• 사용자가 어두운 테마를 선호하면 dark-theme.css를, 밝은 테마를 선호하면 light-theme.css를 적용합니다.

다양한 미디어 쿼리 예시

• 화면 크기: (min-width: 768px), (max-width: 480px)
• 장치 종류: (orientation: landscape), (orientation: portrait)
• 해상도: (min-resolution: 2dppx), (max-resolution: 1dppx)
• 화면 비율: (aspect-ratio: 16/9)
• 색상 선호도: (prefers-color-scheme: dark), (prefers-color-scheme: light)
• 화면 특징: (hover: hover) (마우스 호버 가능 여부), (pointer: fine) (정밀한 포인터 사용 가능 여부)