응답 이미지 (그림, srcset, 원본 등) 의 전면적인 안내

응답 이미지의 규범은 수년간의 논쟁과 여러 차례의 교체를 거쳤고 이것은 상당히 광범위한 영역이기 때문에 문법이 좀 지나치다.본고에서, 나는 당신에게 응답 이미지를 만드는 모든 다른 방법을 전면적으로 이해하도록 시도할 것입니다.
나는 그것을 세 부분으로 나눌 것이다.

Why you should use responsive images

A syntax breakdown

My recommended setup for responsive images

왜?

에서 논의한 바와 같이, 큰 사진은 당신의 사이트를 매우 느리게 운행할 것이다.우리는 이미 이미지를 압축하여 파일 크기를 줄였지만, 휴대전화에서는 여전히 데스크톱과 같은 이미지 해상도를 얻을 수 있습니다.응답 이미지를 사용하면 화면 크기, 화면 해상도 또는 이미지 너비에 따라 다양한 해상도를 제공할 수 있습니다.

문법

이미지에 응답할 수 있는 여러 가지 방법이 있습니다. 어떻게 작동하는지 이해하기 위해서 우리는 새로운 문법을 분해해야 합니다.

src

srcset

picture

source

우리는 하나의 예시부터 모든 문법 단편의 작용을 이해합시다.

<img src="file-200px.jpg"
     alt="some file"
     srcset="file-200px.jpg 1x, 
             file-400px.jpg 2x, 
             file-600px.jpg 3x>

회사 명

src="file-200px.jpg"

이것은 이미지의 출처를 결정합니다.그것 또한 srcset을 지원하지 않는 모든 브라우저의 원본 코드로 사용됩니다.

srcset

     srcset="file-200px.jpg 1x, 
             file-400px.jpg 2x, 
             file-600px.jpg 3x

Srcset는 하나 이상의 이미지 후보로 구성됩니다.후보 객체는 쉼표로 구분되며 각 후보 객체에는 이미지 URL과 옵션 조건이 있습니다.조건이 충족되면 기본 원본이 아닌 후보 원본을 사용합니다.

조건

1x, 2x 등(디스플레이 밀도)
high density screens가 도입됨에 따라 CSS는 측정 단위의 픽셀과 화면의 실제 픽셀을 구분해야 고해상도 화면에 배치가 작아 보이지 않는다.
예를 들어, iPhone 11에서는 CSS 픽셀당 실제로 2개의 장치 픽셀이 큽니다.이것은 장치의 픽셀 비율이 2배라는 것을 의미한다.

     srcset="file-200px.jpg 1x, 
             file-400px.jpg 2x, 
             file-600px.jpg 3x"

따라서 고해상도를 충분히 활용할 수 있도록 고밀도 화면과 고해상도 이미지를 사용자에게 제공하는 것이 우리의 예이다.또한 화면 밀도가 낮은 사용자가 불필요한 데이터를 낭비하지 않도록 합니다.
상술한 문법적 뜻을 문자로 번역하다

사용자의 장치 픽셀 비율이 1x이면 서비스file-200px.jpg

사용자의 장치 픽셀 비율이 2x이면 서비스file-400px.jpg

등

200w, 400w 등(너비 설명자)

     srcset="file-200px.jpg 200w, 
             file-400px.jpg 400w, 
             file-600px.jpg 600w"

너비 설명자는 파일의 해상도를 설명합니다.따라서 사진 편집기에서 그림을 열 때 실제 너비는 픽셀 단위로 됩니다.브라우저는 이 너비를 사용하여 사용할 이미지 원본을 결정합니다.불행하게도 이미지 해상도만으로는 브라우저가 결정할 수 없다.
브라우저가 자산을 다운로드하기 시작할 때, 이미지 요소가 최종적으로 페이지에 채워질 슬롯의 폭을 알 수 없기 때문에, 너비 설명자를 사용하려면 브라우저 이미지의 크기를 알려야 합니다!sizes 속성이 없으면 너비 설명자를 사용할 수 없기 때문에 전체 문법은 실제로 다음과 같다.

     srcset="file-200px.jpg 200w, 
             file-400px.jpg 400w, 
             file-600px.jpg 600w"
     sizes="(min-width: 900px) 700px,
            (min-width: 400px) 80vw,
            100vw"

이 문법은 처음에는 매우 무서웠을 수도 있지만, 실제로는 상당히 직접적이다. 우리가 지정한 크기를 통해 하는 것은 브라우저에 알려주는 것뿐이다.

"화면 폭이 900px를 넘으면 그림에 채워진 슬롯 폭이 700px입니다.

"화면 폭이 400px를 초과하면 이미지에 채워진 슬롯 폭은 80vw입니다.

"미디어 조건이 충족되지 않으면 이미지에 채워진 슬롯 너비가 100vw"

You can use absolute units (like px or em) or a length relative to the viewport (vw) but not percentages.

브라우저에서는 다음과 같은 치수를 사용합니다.

장치 너비 보기

크기 목록의 첫 번째 미디어 조건이 진짜인지 확인

해당 미디어 질의에 할당된 슬롯 크기 보기

선택한 슬롯 크기와 가장 일치하는 srcset 목록에 인용된 이미지 불러오기

그림 태그

만약 형식이 정확하지 않다면, 위의 문법은 추적하기 어려울 뿐만 아니라, 여전히 약간 제한되어 있다.다행히도 또 하나의 선택이 있다.

<picture>
    <source srcset="example-200px.jpg" media="(min-width: 800px)">
    <source srcset="example.webp" type="image/webp">
    <img src="example.jpg" />
</picture>

그림 라벨은 img 요소와 0 개 이상의 source 라벨을 포함합니다.이 문제를 고려하는 좋은 방법은 picture원소가 다른 img원소로 그 중의 sources원소를 증압하는 것이다.picture 또는 source 태그가 지원되지 않는 브라우저는 이를 무시하고 요소img만 표시합니다.

소스 태그

video 태그의 소스 태그를 보았을 수 있습니다.picture 레이블에서 다음을 수행할 수 있습니다.

현대 이미지 형식 사용
위의 예에서 우리는 사용한다<source srcset="example.webp" type="image/webp">.Webp는 내가 the first part of this series 에서 언급한 현대적인 이미지 형식이다.브라우저의 지원이 여전히 불안정하기 때문에, 우리는 웹을 이미지의 유일한 src로 사용할 수 없지만, source 표시를 통해 우리는 webp 원본을 지정할 수 있으며, 모든 웹을 지원하는 브라우저는 그것을 사용할 것입니다.브라우저가 읽을 수 있도록 type 을 image/webp 로 지정해야 합니다.

뷰포트 크기에 따라 src 변경

<picture>
  <source media="(max-width: 800px)" srcset="example-small.jpg">
  <source media="(max-width: 1200px)" srcset="example-large.jpg">
  <img src="example-default.jpg">
</picture>

뷰포트 크기가 800px보다 작을 때, 이 문법은 매우 간단하며, 비교적 작은 버전의 이미지를 표시합니다.낮은 해상도의 이미지를 제공하는 것 외에 작은 화면에서도 완전히 다른 이미지를 제공할 수 있습니다.예를 들어, 상세하지 않거나 확대된 이미지를 작은 화면에 표시하려면 유용합니다.

srcset 및size 사용

  <source srcset="file-200px.jpg 200w, 
             file-400px.jpg 400w, 
             file-600px.jpg 600w">

원본 코드는 일반적인 img 표시와 같이 srcset과size 표시도 지원할 수 있습니다.

어떻게

당신의 방법은 반드시 시종 당신의 용례에 달려 있어야 합니다.웹 페이지를 사용할 수 있고 가장 유연하기 때문에 그림 탭을 계속 사용할 것입니다.vue,react,svelte 등 프레임워크를 사용할 때, 백엔드 설정과 통합할 수 있는 구성 요소를 만드는 것을 권장합니다.예를 들어 react에서는 다음과 같이 할 수 있습니다.

<MyPictureComponent
     sizes={{
         default: allSources.medium,
         mobile: allSources.small,
         desktop: allSources.large
     }} 
/>

이것은 이런 일을 초래할 수 있다.

<picture>
  <source media="(max-width: 800px)" srcset={sizes.small.webp} type="image/webp" />
  <source media="(max-width: 1200px)" srcset={sizes.large.webp} type="image/webp" />
  <source media="(max-width: 800px)" srcset={sizes.small.jpg} />
  <source media="(max-width: 1200px)" srcset={sizes.large.jpg} />
  <img src={sizes.default.jpg} />
</picture>

이렇게 하면 기본적으로 웹을 처리합니다. 전체 과정은 그리 지루하지 않습니다.
당신은 매우 좋은 반응 이미지가 추상적입니까?알려줘.👇

총결산

srcset 속성은img 태그에 대체 원본과 조건을 제공하는 목록을 통해 그것을 강화할 수 있습니다.

조건은 화면 밀도와 이미지 크기를 기준으로 합니다.

이미지 레이블을 사용하면 이미지 세트의 소스를 지정하여 화면 크기에 따라 다른 이미지를 지정하고 반환 기능이 있는 현대 이미지 형식을 사용할 수 있습니다.