HTML5 <picture>태그는 화면 너비에 따라 올바른 이미지 소스를 해결하는 데 도움이됩니다.

분명히 브라우저 동작은 지난 5 년 동안 크게 변하지 않았으며 많은 display: none속성이 설정되어 있어도 숨겨진 이미지를 다운로드 할 것입니다.

미디어 쿼리 해결 방법 이 있지만 이미지가 CSS에서 배경으로 설정된 경우에만 유용 할 수 있습니다.

문제에 대한 JS 솔루션 ( 지연로드 , 그림 채우기 등) 이 있다고 생각하는 동안 HTML5와 함께 제공되는 멋진 순수한 HTML 솔루션이있는 것으로 나타났습니다.

그리고 이것이 <picture>태그입니다.

MDN이이를 설명 하는 방법은 다음과 같습니다 .

HTML의 <picture>요소는 복수 지정하기 위해 사용되는 컨테이너 <source>의 특정 요소 <img>안에 포함한다. 브라우저는 페이지의 현재 레이아웃 (이미지가 표시되는 상자의 제약 조건) 및 표시 될 장치 (예 : 일반 또는 hiDPI 장치)에 따라 가장 적합한 소스를 선택합니다.

사용 방법은 다음과 같습니다.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

뒤에 논리

img미디어 규칙이 적용되지 않는 경우에만 브라우저가 태그 소스를로드합니다 . <picture>브라우저 에서 요소를 지원하지 않으면 img태그 를 다시 표시합니다 .

일반적으로 가장 작은 이미지를 소스로 사용하여 <img>더 큰 화면에 무거운 이미지를로드하지 않습니다. 반대로 미디어 규칙이 적용되는 경우 소스 <img>가 다운로드되지 않고 대신 해당 <source>태그 의 URL 내용을 다운로드합니다 .

여기서 함정은 브라우저에서 요소를 지원하지 않으면 작은 이미지 만로드한다는 것입니다. 한편 2017 년에는 모바일 우선 접근 방식 으로 사고하고 코딩해야합니다 .

그리고 누군가 너무 빠져 나오기 전에 다음에 대한 현재 브라우저 지원이 있습니다 <picture>.

데스크탑 브라우저

모바일 브라우저

더 많은 브라우저에 대해 당신이에서 찾을 수있는 지원 할 수 있습니까 사용 .

좋은 점은 html5please 의 문장이 폴 백과 함께 사용한다는 것입니다 . 저는 개인적으로 조언을 구하려고합니다.

태그에 대한 자세한 내용은 W3C 사양을 참조하십시오 . 거기에 면책 조항이 있습니다.

picture요소는 유사한 보이는 다소 다르다 video및 audio요소. 모든 source요소에 요소가 포함되어 있지만 src요소가 요소 내에 중첩되어 있고 picture자원 선택 알고리즘이 다른 경우 소스 요소의 속성은 의미가 없습니다 . 또한 picture요소 자체에는 아무것도 표시되지 않습니다. 포함 된 img요소에 대한 컨텍스트 만 제공하여 여러 URL 중에서 선택할 수 있습니다.

따라서 이미지에 컨텍스트를 제공하여 이미지를로드 할 때 성능을 향상시키는 데 도움이됩니다.

작은 장치에서 이미지를 숨기려면 CSS 매직을 계속 사용할 수 있습니다.

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

따라서 브라우저는 실제 이미지를 표시하지 않고1x1 픽셀 이미지 만 다운로드합니다 (이 이미지는 두 번 이상 사용하면 캐시 될 수 있음). 그러나 <picture>브라우저 에서 태그를 지원하지 않는 경우 데스크톱 화면에서도 실제 이미지 가 표시 되지 않으므로 폴리 필 백업이 반드시 필요합니다.

답변

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}