<picture> 요소는 다양한 이미지 형식을 지원하는 웹 페이지에서 사용되는 HTML 태그입니다. 이 요소를 사용하면 웹 페이지에서 다양한 미디어 쿼리를 사용하여 브라우저에서 지원하는 이미지 형식을 감지하고, 해당 이미지 형식으로 최적화된 이미지를 제공할 수 있습니다.
<picture> 요소는 <img> 요소와 유사하지만, 이미지 파일의 경로를 직접 지정하는 대신, <source> 요소를 사용하여 이미지 파일의 경로와 해당 이미지 형식을 지정합니다.
예를 들어, 다음과 같은 <picture> 요소는 WebP와 JPEG 이미지를 모두 지원하는 웹 페이지에서 사용할 수 있습니다.
<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/avif" srcset="image.avif">
<source type="image/jpeg" srcset="image.jpg">
<img src="image.jpg" alt="An example image">
</picture>위의 코드에서, <source> 요소에서 type 속성을 사용하여 이미지 형식을 지정하고, srcset 속성을 사용하여 해당 이미지 형식의 최적화된 이미지 파일 경로를 지정합니다. <img> 요소에서는 src 속성을 사용하여 모든 브라우저에서 지원하는 이미지 형식의 이미지 파일 경로를 지정합니다.
이미지 형식에 따라 <source> 요소를 추가로 작성하여 지원되는 모든 이미지 형식에 대한 최적화된 이미지를 제공할 수 있습니다. 이를 통해 웹 페이지의 성능을 최적화하고, 이미지의 품질과 로딩 속도를 개선할 수 있습니다.
media 속성 이용
<picture> 요소 내부에는 <source> 요소가 있으며, media 속성을 사용하여 미디어 쿼리를 지정할 수 있습니다. 미디어 쿼리를 사용하면 화면 크기, 픽셀 밀도, 색상 등의 브라우저 특성을 기반으로 이미지를 선택할 수 있습니다.
예를 들어, 다음과 같은 <picture> 요소는 화면 폭이 768px보다 작은 경우에는 작은 이미지를, 그렇지 않은 경우에는 큰 이미지를 제공합니다.
<picture>
<source media="(max-width: 767px)" srcset="small-image.jpg">
<source media="(min-width: 768px)" srcset="large-image.jpg">
<img src="large-image.jpg" alt="An example image">
</picture>위의 코드에서, <source> 요소에서 media 속성을 사용하여 미디어 쿼리를 지정하고, 해당 쿼리가 참인 경우에는 srcset 속성을 사용하여 해당 이미지 파일 경로를 지정합니다. <img> 요소에서는 src 속성을 사용하여 모든 브라우저에서 지원하는 이미지 형식의 이미지 파일 경로를 지정합니다.
미디어 쿼리에는 다양한 속성을 사용할 수 있으며, 브라우저 특성에 따라 이미지 크기, 색상, 방향 등을 기반으로 다른 이미지를 선택할 수 있습니다. 예를 들어, 다음과 같은 <picture> 요소는 브라우저가 다크 모드를 지원하는 경우 다크 모드 이미지를, 그렇지 않은 경우에는 일반 이미지를 제공합니다.
<picture>
<source media="(prefers-color-scheme: dark)" srcset="dark-image.jpg">
<img src="image.jpg" alt="An example image">
</picture>위의 코드에서, media 속성에 prefers-color-scheme 미디어 쿼리를 사용하여 다크 모드를 지원하는 경우 dark-image.jpg 파일 경로를 지정하고, 그렇지 않은 경우에는 image.jpg 파일 경로를 지정합니다.
미디어 쿼리를 사용하여 이미지를 선택하면, 브라우저의 특성에 따라 최적화된 이미지를 제공할 수 있으며, 로딩 속도와 성능을 개선할 수 있습니다.
물론 css에서 media query를 직접 사용 할 수 있겠지만 SEO 관점에서는 <picture> 요소의 media 속성을 사용하는 것이 이미지 최적화 및 로딩 속도 개선에 유리합니다.
srcset 속성의 해상도와 size속성 이용
srcset 속성은 이미지의 경로와 해상도를 정의하는데 사용됩니다. 예를 들어, 다음과 같은 코드를 사용하여 다양한 해상도의 이미지를 제공할 수 있습니다.
<picture>
<source srcset="example-640w.jpg 640w, example-1024w.jpg 1024w" media="(min-width: 768px)">
<source srcset="example-320w.jpg 320w, example-640w.jpg 640w" media="(min-width: 320px)">
<img src="example-320w.jpg" alt="Example image">
</picture>위의 코드에서, srcset 속성에는 이미지의 경로와 각 이미지의 해상도가 정의됩니다. 각 이미지의 해상도는 w 단위로 표시되며, min-width 미디어 쿼리를 사용하여 뷰포트의 크기에 따라 적절한 이미지가 선택됩니다. 예를 들어, 뷰포트의 너비가 768px 이상인 경우에는 example-640w.jpg 또는 example-1024w.jpg 중 하나가 선택되고, 뷰포트의 너비가 320px 이상인 경우에는 example-320w.jpg 또는 example-640w.jpg 중 하나가 선택됩니다. 뷰포트의 크기에 따라 적절한 이미지가 선택되므로, 페이지 로드 속도가 더 빨라지고, 대역폭 사용량이 줄어듭니다.
또한, img 요소의 sizes 속성과 srcset 속성을 결합하여 resolution 속성을 사용할 수 있습니다. resolution 속성은 CSS의 dpi 단위를 사용하여 이미지의 해상도를 정의합니다. 예를 들어, 다음과 같은 코드를 사용하여 resolution 속성을 사용할 수 있습니다.
<picture>
<source srcset="example-2x.jpg 2x, example-3x.jpg 3x" media="(min-width: 768px)" sizes="(max-width: 767px) 100vw, 50vw" />
<img src="example-1x.jpg" alt="Example image" />
</picture>위의 코드에서, srcset 속성에는 이미지의 경로와 각 이미지의 해상도가 정의됩니다. sizes 속성은 이미지의 크기를 정의하며, max-width 미디어 쿼리를 사용하여 뷰포트의 크기에 따라 이미지의 크기가 자동으로 조정됩니다. resolution 속성은 2x와 3x로 정의되어 있으므로, 뷰포트의 픽셀 밀도에 따라 자동으로 적절한 이미지가 선택됩니다.
예를 들어, 뷰포트의 너비가 768px 이상인 경우에는 example-2x.jpg 또는 example-3x.jpg 중 하나가 선택되고, 뷰포트의 너비가 767px 이하인 경우에는 example-2x.jpg가 선택됩니다. sizes 속성은 뷰포트의 크기에 따라 이미지의 크기를 조정하므로, 이미지의 해상도와 크기가 적절하게 조정됩니다.
SEO 관점에서는, 이미지의 크기와 해상도가 적절하게 조정되어야 하며, 이미지가 빠르게 로드되어야 합니다. <picture> 요소와 srcset 속성을 사용하면, 다양한 해상도의 이미지를 제공하고 뷰포트의 크기에 따라 적절한 이미지가 선택되므로, 페이지의 로드 속도가 개선되고 대역폭 사용량이 줄어듭니다. 또한, 이미지의 alt 속성을 제대로 설정하면, 검색 엔진에서 이미지를 인식하고 검색 결과에 노출될 가능성이 높아집니다.
아래는 제가 사용하는 <picture>태그 형식입니다.
<!-- 이미지 최적화 -->
<picture>
<!-- AVIF,WEBP && SMALL SCREEN -->
<source srcset="/images/main-hero-img-small.avif, /images/main-hero-img-small.webp" type="image/avif, image/webp" media="(max-width:767px)">
<!-- AVIF,WEBP && LARGE SCREEN -->
<source srcset="/images/main-hero-img.avif, /images/main-hero-img.webp" type="image/avif, image/webp">
<!-- FALLBACK -->
<img src="/images/main-hero-img.png" class="hero-img" width="1920" height="500" loading="lazy" decoding="async" alt="이미지 설명">
</picture>