CSS없이 반응형 웹 이미지를 구현하는 <picture> 태그 기초

웹에서 이미지를 표현하는 기본 태그는 <img> 태그입니다.

<img> 태그는 반응형 이미지를 위한 속성을 일부 지원합니다. 다만, 완전하지는 않기 때문에 반응형 웹을 제대로 지원하기 위해서는 CSS와 미디어쿼리 지원이 필수적으로 필요합니다. 조금 더 고급스럽게 동적 이미지 제어를 하려면 자바스크립트의 도움이 일부 필요하기도 합니다.

<img> 태그 이후 새롭게 표준으로 정해진 이미지 태그인 <picture> 태그는 CSS나 자바스크립트 없이 HTML 태그만으로 반응형 반응형 웹 이미지를 표현할 수 있는 속성들을 온전히 지원합니다.

<picture> 태그에 대해 알기 전에 <img> 태그의 반응형 지원 속성들에 대해서 먼저 알아야 합니다.

<img> 태그의 반응형 속성을 사용하는 방법이 <picture> 태그의 속성들과 같거나 유사한 점들이 상당히 많고, 또 <img> 태그와의 차이점을 알아야 <picture> 태그를 올바르게 사용할 수 있습니다.

<img> 태그 기초

<img> 태그 구분

<img> 태그는 단독으로 사용하는 대표적인 이미지 표시용 태그이기도 하지만 <picture> 태그의 하위 태그로 사용해 기본이미지, 또는 폴백(Fallback-하위 호환성) 이미지를 표현하는 태그로 사용되기도 합니다.

<picture> 태그는 하위 태그인 <source>, <img> 태그를 감싸는 래퍼 역할만을 하며, 실제 모든 반응형 이미지 정보는 <picture> 태그의 하위 태그인 <source> 태그를 통해 표현합니다. <source> 태그의 속성들은 단독으로 사용하는 <img> 태그의 속성들을 대부분 그대로 가져와서 사용합니다.

<img> 태그 사용 위치에 따라 사용 가능한 속성과 기능이 다르므로 구분을 해야 합니다.

요약하면 우리가 지금까지 단독으로 사용해온 <img> 태그는 <picture> 태그의 하위태그인 <source>, <img> 태그로 도 똑같이 표현할 수 있습니다.

단독으로 사용하는 <img> 태그도 제한적으로 반응형 레이아웃을 지원합니다.

<img> 태그의 "srcset" 속성을 이용하면 웹 브라우저 너비 변경에 맞춰 적절한 이미지 파일이 로딩되어 가변 크기로 표시되도록 할 수 있습니다.

"sizes" 속성으로는 CSS의 미디어쿼리에 해당하는 이미지 표시 크기 설정을 할 수 있습니다.

반응형 이미지 지원을 위한 <img> 태그의 속성들을 하나씩 알아보겠습니다.

src속성

<img> 태그의 이미지 경로 URL을 표시하는 기본 이미지 표시 속성입니다.

"srcset" 속성을 지원하지 않는 웹 브라우저(인터넷 익스플로러)는 "src" 속성의 이미지 경로에서만 이미지를 가져와 표시합니다. 기본 표시 이미지에 해당합니다.

"srcset" 속성으로 반응형 이미지 정보를 표시하면 "src" 속성은 없어도 되지만, 구형 웹 브라우저에서는 "srcset" 속성만을 인식하지 못해 이미지가 없는 것으로 표시되기 때문이 호환성을 위해 필수로 사용해야 하는 속성입니다.

srcset 속성

"srcset" 속성은 이름처럼 "src" 여러 개를 하나로 모아놓은 속성입니다. 여러 개의 이미지 URL을 쉼표로 구분해 한꺼번에 문자열로 표시할 수 있으며, 추가로 각 이미지 파일 URL 뒤에는 공백으로 띄워서 해당 이미지 파일을 가져오는 웹 브라우저의 너비 범위를 표시합니다.

srcset="이미지URL1 너비1w, 이미지URL2 너비2w"

너비는 픽셀 단위 숫자가 되며 숫자 뒤에 "w"를 붙여서 너비 값임을 표시해야 합니다.

srcset="./images/small.jpg 360w, ./images/big.jpg 768w"

아래 예에서 "srcset" 속성 값 중 "./image-tiny.jpg" 이미지는 브라우저 너비가 ~ <= 360px 일 때 표시됩니다.

이미지는 처음 태그가 DOM에 생성될 때 웹 브라우저 너비에 따라 해당되는 이미지가 자동으로 선택되어 로딩됩니다.

"./image-middle.jpg" 이미지 파일은 웹 브라우저가 769px ~ 1024px 사이의 너비일 때 이미지가 로딩됩니다.

<img 
    src="./image-small.jpg" 
    srcset="./image-tiny.jpg 480w, 
    ./image-small.jpg 1024w, 
    ./image-middle.jpg 1260w, 
    ./image-large.jpg 1920w" 
    alt="Responsive Image"
>

단, "srcset"의 너비 속성 값은 웹 브라우저 너비에 따라 대응되는 이미지 파일을 가져오는 역할만 표준으로 정해졌으며, 웹 브라우저의 너비가 동적으로 변하는 데 따라 해당되는 적절한 이미지 파일을 재 로딩할지는 명시가 되어있지 않습니다.

반응형으로 이미지 파일을 웹 브라우저 너비 변화에 따라 자동으로 재 로딩할지는 전적으로 웹 브라우저의 구현에 달려 있으며, 웹 브라우저 별로 지원하는 동적 이미지 파일 재 로딩 지원 정도는 다음과 같습니다.

"srcset" 속성에 따라 동적인 이미지 파일 재 로딩이 제대로 동작하는 웹 브라우저는 파이어폭스뿐입니다. 구글 크롬, 마이크로소프트 신형 에지는 웹브라우저 너비에 맞는 이미지를 표시하려면 화면을 갱신해야 합니다.

웹 표준 태그에 대한 구현에 일관성이 없던 시절에 구현을 하다 보니 웹 브라우저별로 동적 이미지 파일 로딩에 대한 지원이 제멋대로입니다.

그래서 <picture> 태그가 나오게 되었고, <picture> 태그에서 부터는 동적 이미지 파일 재 로딩이 대부분의 모던 웹 브라우저들에서 지원이 됩니다.

"srcset" 속성으로 너비 범위와 함께 여러 개의 이미지를 표현하는 방법은 중요한 특징이 있습니다.

표시되는 이미지는 URL 뒤에 표시한 웹 브라우저 최대 너비 값과 이미지 실제 너비의 비율에 맞춰 웹 브라우저 너비가 변하는 데 따라 자동으로 이미지 너비도 변경됩니다.

동적으로 이미지 파일을 재 로딩하는 것과는 별개로 표시된 이미지는 정해진 비율에 따라 웹 브라우저의 너비에 맞춰 크기가 조절됩니다.

앞의 예에서 481px ~ 1024px 사이의 웹 브라우저 너비에 사용하는 "image-small.jpg" 이미지는 실제 너비가 768px입니다. 이 이미지 표시를 위한 최대 너비가 1024px이고 이미지의 비율은 768/1024 = 0.75가 됩니다. 웹 브라우저 너비가 1024px 미만으로 계속 줄어들면 이미지도 웹 브라우저 너비의 0.75배로 함께 줄어듭니다.

그리고, 고해상도 디스플레이(또는 레티나 디스플레이)를 위해서 픽셀 밀도를 기준으로 "srcset" 속성의 이미지 파일이 선택되도록 설정할 수도 있습니다. 픽셀 밀도를 표시하는 기호는 "x"이며 다음과 같이 표기합니다.

<img 
    src="./image600.jpg" 
    srcset="./image300.jpg, ./image450.jpg 1.5x, ./image600.jpg 2x" 
    alt="Responsive Image"
>

이미지 너비가 동적으로 웹 브라우저 너비를 따라 계속 변하면 웹 페이지 레이아웃을 구성하기가 어려워집니다.

그래서 웹브라우저 너비 구간에 따라 고정된 이미지 크기를 가질 수 있도록 CSS의 미디어쿼리 속성을 태그 속성에 사용할 수 있도록 하는 "sizes" 속성이 <img> 태그에 지원됩니다.

sizes속성

<img 
    src="./image-small.jpg" 
    srcset="./image-tiny.jpg 360w, ./image-small.jpg 768w, ./image-middle.jpg 1024w, ./image-large.jpg 1260w" 
    sizes="(max-width: 560px) 360px, (max-width: 1023px) 700px, (max-width: 1260px) 1024px, (min-width: 1261px) 1260px"
    alt="Responsive Image"
>

"sizes" 속성은 CSS 미디어쿼리와 사용 방법이 같습니다.

미디어쿼리로 웹 브라우저 너비 범위에 따라 표시 이미지 너비를 설정해 반응형인 이미지 너비를 구현할 수 있으며, "sizes" 속성 값은 여러 개의 미디어쿼리를 쉼표로 구분해서 나열할 수도 있습니다.

미디어쿼리 너비 범위와 이미지 너비 값은 반드시 "px" 단위를 명시해야 합니다.

"srcset" 속성과 "sizes" 속성은 개수가 서로 일치할 필요가 없습니다. 웹 브라우저 너비나 디바이스에 따라 적절한 이미지 파일이 선택되도록 "srcset" 속성을 구성하면 되며, 표시되는 이미지 너비 또한 실제 이미지 너비와는 무관하게 적용할 레이아웃에 맞춰 표시하는 이미지 너비를 "size" 속성에 미디어쿼리로 각각 정해주면 됩니다.

<picture> 태그 기초

<picture> 태그는 단순 래퍼 역할을 하는 태그이기 때문에 태그 자체에 별도의 속성이 없습니다. 

<picture> 태그로 이미지를 표시하려면 하위 태그인 <source> 태그를 사용해 이미지 파일 경로와 미디어쿼리 등의 정보를 표시해야 합니다.

그리고 <picture> 태그에는 태그의 하위 호환성과 기본 상태일 때 이미지 표시를 위해 우리가 그동안 사용해왔던 <img> 태그를 하위 태그로 함께 사용합니다.

<picture>
    <source srcset="/image/logo180.jpg" media="(max-width: 768px)">
    <img src="/image/logo360.jpg" alt="logo" />
</picture>

이 예에서 <picture> 태그는 기본 이미지로 하위 태그인 <img> 태그의 "logo360.jpg" 이미지를 표시하지만, <source> 태그의 미디어쿼리 설정에 따라 웹브라우저 너비가 768px 이하(max-width: 768px)가 되면, "logo360.jpg" 이미지를 대신해 "logo180.jpg" 이미지를 새로 가져와서 화면에 표시합니다.

트래픽과 속도가 중요한 모바일 기기에서 적절한 이미지를 실시간으로 다시 가져올 수 있는 것은 매우 중요합니다.

예를 들어 모바일 기기의 가로보기와 세로보기 모드 변경에 따라 적절하게 맞는 이미지가 표시되도록 실시간으로 바꿔주는 기능을 HTML 태그만으로 구현할 수 있습니다.

CSS 미디어 쿼리 추가 작성이나 자바스크립트의 이미지 이벤트 처리는 필요 없습니다.

<picture> 태그는 

단독으로 사용하는 <img> 태그와 같거나 유사한 반응형 이미지 구현을 위한 속성들을 제공합니다.

두 태그는 많은 점에서 유사한 특징이 있지만, 최신의 태그인 <picture> 태그는 <img> 태그와 달리 실시간으로 반응하는 동적인 이미지 재 로딩 기능을 모든 모던 웹 브라우저에서 제공합니다.

이미지 태그를 픽쳐 태그로 변경하기

<picture> 태그는 인터넷 익스플로러 11 이후에 표준으로 정해진 이미지 태그여서 인터넷 익스플로러는 지원을 하지 못합니다.

인터넷 익스플로러는 <picture> 태그 안에 표시하는 하위 태그인 <img> 태그만을 인식하며, <img> 태그의 "src" 속성에 표시한 기본 이미지만을 표시할 수 있습니다.

단독으로 사용하는 <img> 태그가 "srcset" 속성에 이미지 경로 정보가 명시되어 있으면 "src" 속성이 없어도 되는 것과 마찬가지로, <picture> 태그 또한 하위 태그 <source>에 "srcset" 속성으로 이미지 URL 등의 이미지 정보가 명시되어 있으면 하위 태그 <img>는 없어도 됩니다.

단, 이렇게 <picture> 태그를 사용하면 인터넷 익스플로러에서는 이미지가 표시되지 않습니다. <picture> 태그의 하위태그 <img> 는 구버전 웹 브라우저 호환성을 위해서 필수로 함께 사용해야 합니다.

앞서 사용했던 단독 사용 <img> 태그 예는 <picture> 태그로 동일한 동작을 하도록 재작성할 수 있습니다.

단독 사용 <img> 태그의 "srcset", "sizes" 속성은 <pitcure> 태그의 하위 태그인 <source> 태그의 속성으로 그대로 이동하며, "sizes" 속성은 "media" 속성으로 이름이 바뀝니다. "sizes" 속성과 "media" 속성의 사용 방법이 조금 다르기 때문에 <picture> 태그에 미디어쿼리 정보를 적용할 때는 달라진 사용법에 주의해야 합니다.

단독으로 사용하는 <img> 태그에서는 웹 브라우저 너비에 대한 이미지 파일이나 미디어쿼리 구분을 하나의 속성 값에 쉼표로 구분해서 문자열로 표현했지만, <picture> 태그에서는 각각의 웹브라우저 너비에 대한 미디어쿼리 설정을 여러 개의 <source> 태그로 나누어서 표현합니다.

<picture> 태그 안에는 여러 개의 <source> 태그가 올 수 있으며, <source> 태그 1개는 미디어쿼리 1개에 대한 이미지 정보를 다음과 같이 표현합니다.

<picture>
    <source srcset="./image-tiny.jpg" media="(max-width: 560px)">
    <source srcset="./image-small.jpg" media="(max-width: 1023px)">
    <source srcset="./image-middle.jpg" media="(max-width: 1260px)">
    <source srcset="./image-large.jpg" media="(min-width: 1261px)">
    <img src="./image-large.jpg" alt="Responsive Image">
</picture>

예를 든 <picture> 이미지는 마지막 <source> 태그의 미디어 쿼리가 "min-width: 1261px" 이기 때문에 1260px 보다 큰 웹 브라우저 너비 전체에 대응이 되지만 "max-width: 1920px"와 같이 작성한 경우 1920px 보다 큰 웹 브라우저 너비에는 <img> 태그의 "src"에 표시한 기본 이미지가 사용됩니다.

때문에 하위 태그 <img>에 표시하는 기본 이미지는 미디어쿼리로 커버하는 웹 브라우저 너비 기준에 맞춰 주의 깊게 정해야 합니다.

기본적으로는 <source> 태그의 미디어쿼리를 작성할 때 대응이 되지 않는 빈 구간이 생기지 않는 것이 좋겠지만, 미디어쿼리를 작성할 때 중간에 빈 구간이 생길 경우, 기본 표시되는 이미지가 적절한 이미지가 아니면 갑자기 엉뚱한 크기의 이미지가 표시될 수 있습니다.

앞의 <picture> 이미지 태그는 다음과 같이 만들어서 1920px보다 큰 웹 브라우저 너비는 하위 태그 <img>의 기본 이미지가 표시되도록 구성할 수도 있습니다.

이때 미디어쿼리를 기준으로 한 웹브라우저 너비에 맞춰 새로 로딩된 이미지는 실제 이미지 너비로 표시됩니다.

<picture>
    <source srcset="./image-tiny.jpg" media="(max-width: 560px)">
    <source srcset="./image-small.jpg" media="(max-width: 1023px)">
    <source srcset="./image-middle.jpg" media="(max-width: 1260px)">
    <source srcset="./image-large.jpg" media="(max-width: 1920px)">
    <img src="./image-large.jpg" alt="Responsive Image">
</picture>

미디어 쿼리를 세분할 필요가 없는 경우, 단독으로 사용하는 <img> 태그의 "srcset" 속성처럼 하나의 <source> 태그 "srcset" 속성에 여러 개의 이미지를 나열해서 표현할 수 있습니다.

<picture>
    <source srcset="./image-tiny.jpg 768w, ./image-small.jpg 1023w" media="(max-width: 1023px)">
    <source srcset="./image-middle.jpg 1260w, ./image-large.jpg 1920w" media="(max-width: 1919px)">
    <img src="./image-large.jpg" alt="Responsive Image">
</picture>

하나의 "srcset"에 여러 개의 이미지 URL을 나열하려면 어떤 이미지를 로딩할지를 구분하는 너비 구분점이 있어야 합니다. 그래서 단독으로 사용하는 <img> 태그처럼 이미지 URL 뒤에 너비 값("768w")을 공백을 띄워서 추가로 표시해야 합니다.

순서와 미디어쿼리 값을 조금 변경해서 다음처럼 <picture> 태그를 작성할 수 있습니다.

<picture>
    <source srcset="./image-small.jpg 1023w, ./image-tiny.jpg 768w" media="(max-width: 1160px)">
    <img src="./image-large.jpg" alt="Responsive Image">
</picture>

이 이미지는 웹 브라우저 너비가 1160px 보다 크면 <img> 태그의 기본 이미지가 표시됩니다.

웹 브라우저 너비가 1160px보다 작아지면 "srcset"의 이미지 파일들 중 너비 값이 가장 크게 설정된 이미지 파일인 "image-small.jpg" 를 로딩합니다. 실제 이미지의 너비와는 무관하며 URL 뒤에 표시한 너비값을 기준으로 판단합니다.

웹 브라우저 너비가 더 줄어들어서 768px 이하가 되면 "image-tiny.jpg" 파일이 로딩됩니다.

<picture> 태그는 "srcset" 속성의 이미지 URL 뒤에 너비값이 설정되면, 웹 브라우저 너비 변경에 따라 이미지 너비도 함께 같은 비율로 줄어듭니다.

단독으로 사용하는 <img> 태그와는 다른 중요한 차이이므로 꼭 숙지해두어야 합니다.

픽셀 밀도가 높은 디스플레이 지원

픽셀 밀도가 높은 고해상도 디스플레이(레티나 디스플레이)를 배율 설정을 해서 사용하는 경우 거기에 맞춘 고해상도 이미지를 표시하는 것이 웹 페이지의 품질을 높이는 방법입니다.

고해상도로 텍스트 내용이 표시되는데 이미지만 픽셀이 눈에 띌 정도로 저해상도로 표시되면 어딘가 어색해 보이게 됩니다.

<img> 태그와 마찬가지로 "srcset" 속성에 표시하는 이미지 경로 뒤에 공백으로 띄워서 픽셀 밀도값(1.5x)을 표기하면 픽셀 밀도에 따라 맞는 고해상도 이미지가 표시됩니다.

<picture>
    <source
        media="(min-width: 972px)"
        srcset="image300.jpg, image450.jpg 1.5x, image600.jpg 2x">
    <source
        media="(max-width: 767px)"
        srcset="image300-portrait.jpg, image450-portrait.jpg 1.5x, image600-portrait.jpg 2x">
    <img src="image300.jpg" alt="모바일 기본 이미지">
</picture>

<picture> 태그는 동적 태그다.

<picture> 태그는 단독 사용 <img> 태그와 달리 모든 모던 웹 브라우저에서 제대로 된 반응형 지원이 됩니다.

<picture> 태그로 생성한 반응형 이미지는 웹 브라우저 너비가 변하는 데 따라 적절한 "srcset"의 이미지 파일이 재 로딩됩니다. 이점이 <img> 태그와의 가장 크게 다른 점으로 웹 브라우저 너비에 맞춰, 또는 다양한 모바일 기기에 맞춰 최적인 크기의 이미지 파일을 표시할 수 있습니다.

특히 모바일 기기에서는 모바일 트래픽이 중요하기 때문에 적절한 크기를 가진 이미지 파일이 표시되는 것이 필수이며, 가로/세로 모드 변경에 따른 레이아웃의 실시간 변화가 크기 때문에 적절한 이미지를 표시하는 문제가 특히 중요합니다.

모바일 기기 지원 확장하기

<source> 태그의 "media" 속성은 CSS 미디어쿼리와 같은 값을 사용할 수 있습니다.

모바일 기기의 가로보기와 세로보기를 구분하는 미디어쿼리 속성인 "orientation"을 <picture> 이미지에도 동일하게 사용할 수 있습니다.

"orientation" 속성을 사용해 모바일 기기의 가로보기와 세로보기 모드일 때 로딩하는 이미지를 다르게 할 수 있습니다.

<picture>
    <source media="(orientation: landscape)"
        srcset="image320.jpg 320w,
                image768.jpg 768w,
                image1024.jpg 1024w"
    <source media="(orientation: portrait)"
        srcset="image160-portrait.jpg 160w,
                image384-portrait.jpg 384w,
                image512-portrait.jpg 512w"
    <img src="image320.jpg" alt="Mobile Image">
</picture>

표시할 이미지 포맷을 제한하는 type 속성

<source> 태그에 "type' 속성을 사용하면 사용하는 이미지 타입을 강제로 정해줄 수 있습니다.

다만 표준을 만들 당시의 의도와는 달리 "type" 속성으로 이미지 포맷을 강제해도 "srcset"에 다른 이미지 포맷을 사용하는데 제약이 없습니다.

웹 브라우저가 인식하는 이미지 포맷은 "type" 속성의 이미지 포맷 정보와 "srcset"에 실제 사용한 이미지가 달라도 웹브라우저가 알아서 처리를 해줍니다.

다음의 예와 같은 용도를 위해서 타입을 구분한 것인데 모던 웹 브라우저에서는 사실상 무쓸모입니다.

SVG 이미지는 벡터 파일 포맷이기 때문에 더 작은 파일 크기로 고해상도의 고품질 이미지, 디자인을 웹에 표현할 수 있습니다.

그리고, 웹 브라우저가 <picture> 태그를 지원하지 않거나 "SVG" 이미지 포맷을 지원하지 않는 경우를 위해 폴백(하위 호환성 지원)용으로 <img> 태그와 함께 JPG, PNG 이미지를 꼭 표시해야 합니다.

<picture>
    <source type="image/svg+xml" srcset="companylogo.svg">
    <img src="./companylogo.png" alt="Company Logo">
</picture>

최소, 최대 크기가 고정된 반응형 이미지 표시

<picture>는 최신 반응형 웹 이미지 표현에 최적화된 태그입니다.

<picture> 태그의 속성 값들을 잘 활용하면 웹 브라우저 너비가 일정 크기 이하이거나, 일정 크기 이상이면 이미지 원래 크기로 표시되도록 하고, 그 사이 너비에서는 웹 브라우저 너비에 맞춰 가변 되도록 만들 수 있습니다.

<picture>
    <source srcset="./image-tiny.jpg" media="(max-width: 560px)">
    <source srcset="./image-small.jpg 768w" media="(max-width: 1023px)">
    <source srcset="./image-middle.jpg 1023w" media="(max-width: 1259px)">
    <source srcset="./image-large.jpg" media="(min-width: 1260px)">
    <img src="./image-large.jpg" alt="Responsive Image">
</picture>

• 웹 브라우저 너비 560px 이하에서는 "image-tiny.jpg" 이미지가 원래 너비인 360px 크기로 고정되어 보입니다.
• 웹 브라우저 너비 1260px 이상에서는 "image-large.jpg" 이미지가  원래 너비인 1260px 크기로 고정되어 보입니다.
• 560px ~ 1023px 사이인 웹 브라우저 너비에서 로딩되는 "image-small.jpg" 이미지는 실제 크기가 768px이며 이미지 영역 너비를 768w로 정했기 때문에 웹 브라우저 전체 너비(100%)로 이미지가 채워져서 표시됩니다. 웹 브라우저 너비가 미디어쿼리 범위 안에서 변경되면 이미지 너비도 웹 브라우저 너비 100%를 채운 이미지 크기로 변경됩니다.

<picture> 태그를 써야 하는 이유

• HTML 태그 구현만으로 반응형 이미지 파일이 로딩되며, 웹 브라우저 너비 변화에 맞춰 동적으로 이미지 너비 또한 변경됩니다.
• 이미지를 위한 CSS 미디어쿼리를 추가로 작성해서 반응형 웹을 관리할 필요가 없습니다.
• CSS 미디어쿼리로 이미지를 관리하는 것보다 간결하며 이미지 로딩 속도가 더 빠릅니다. 당연하지만 자바스크립트로 비동기 이미지를 관리하는 것보다 훨씬 더 빠릅니다.
• <picture> 태그를 지원하지 않는 인터넷 익스플로러와 같은 구형 웹 브라우저에 대해서도 하위 태그인 <img> 태그를 통해 폴백(Fallback)을 지원하기 때문에 호환성 문제에 대한 해결 방법도 제공됩니다.

이런 많은 장점에도 불구하고 실제로 웹 페이지 레이아웃을 작성할 때는 CSS와 미디어쿼리를 함께 사용해야 합니다.

태그의 속성만으로는 웹 레이아웃에 적절하게 배치되는 이미지를 표현하는 데는 한계가 있기 때문에 <picture> 태그만으로 모든 반응현 이미지 구현을 할 수 있다고 생각해서는 안됩니다.