SRCSET을 사용하여 반응 형 이미지를 구축하는 방법

Microsoft의 웹 개발 시리즈의 일부인이 기사는 다양한 장치에서 완벽하게 작동하는 웹 사이트를 만드는 데 중요한 측면 인 응답 형 이미지를 탐색합니다. 더 이상 선택 사항이 아닙니다. 그것은 우리의 다기구 세계에서 필수입니다.

키 테이크 아웃 :

다른 장치 픽셀 비율에 최적화 된 다양한 이미지 소스를 제공하려면 속성을 ​​사용하십시오.

를 속성과 결합하여 뷰포트와 관련하여 이미지 디스플레이 크기를 지정하고 브라우저를 최상의 이미지를 선택하도록 안내합니다. 는

요소를 향상된 유연성을 위해
• 요소를 활용하여 미디어 조건 (예 : CSS 미디어 쿼리)을 기반으로 이미지 선택을 가능하게하고 속성을 ​​통해 다양한 이미지 형식을 지원합니다. 는 항상 지지대가없는 브라우저의 흑백 속성을 사용하여 기본 이미지를 포함합니다. 호환성 점검 및 웹 경험 최적화를 위해 Microsoft가 제공하는 도구를 사용하여 다양한 장치 및 브라우저에서 응답 성과 성능을 철저히 테스트합니다. srcset
반응 형 이미지 이해 :
• 반응 형 이미지는 프레젠테이션을보기 장치에 적용합니다. "가장 좋은 형태"는 다른 것을 의미합니다 srcset 화면 크기에 따라 다른 이미지 자산 표시 (예 : 13.5 인치 노트북 대 5 인치 전화의 다른 이미지). 장치 해상도 (또는 장치 픽셀 비율-장치 픽셀 대 CSS 픽셀의 비율)를 기반으로 다른 이미지 사용. 브라우저에서 지원하는 경우 이미지 형식 (예 : JPEG XR)을 선택하면 잠재적으로 더 나은 압축을 위해. sizes 반응 형 이미지 활성화 :
이전 스크립팅 방법이 존재하지만 여러 다운로드 또는 누락 된 이미지가있는 잠재적 인 문제로 인해 권장되지 않습니다. 선호되는 접근법은 다음을 사용합니다
• <picture></picture> 속성 type 속성
요소 src srcset 속성 :
사용으로 다이빙하기 전에 정의하자 :

장치 픽셀 비율 :

이것은 CSS 픽셀 당 장치 픽셀의 수입니다. 장치 픽셀 밀도 (인치당 물리 픽셀) : 고해상도 장치는 밀도가 높고 동일한 줌 레벨에서 더 높은 장치 픽셀 비율을 갖습니다. 브라우저 줌 레벨 : 줌 레벨이 높을수록 주어진 장치의 장치 픽셀 비율이 증가합니다. Basic

구현은 장치 픽셀 비율의

디스크립터를 사용합니다.

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg" class="lazy" alt="How to Build Responsive Images with srcset "></code>

1x :
• 장치 픽셀 비율 1. 2의 장치 픽셀 비율의 경우 2x : space-needle.jpg 장치 픽셀 비율이 3.
• space-needle-2x.jpg
속성은 지원없이 브라우저의 폴백 역할을합니다.
• 디스크립터는 이미지 너비를 지정합니다 space-needle-hd.jpg

속성 :

뷰포트 크기에 따라 이미지 크기를 제어하려면 디스크립터와 함께 src 속성을 ​​사용하십시오. srcset 예제 1 (반 뷰포트 너비의 이미지) : w

예제 2 (뷰포트 너비에 따른 응답 크기) :

<code class="language-html"><img  src="/static/imghwm/default1.png" data-src="images/space-needle.jpg" class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="SRCSET을 사용하여 반응 형 이미지를 구축하는 방법" ></code>

요소 : sizes

요소는 렌더링 된 크기 및 브라우저 기능을 기반으로 이미지 선택을 허용합니다. 여기에는 ,

, sizes 및 속성이있는 w 요소가 포함되어 있습니다. AN srcset (참고 : 이미지 소스와 크기가 예시되어 있습니다.)

결론 :

<code class="language-html"><img  src="/static/imghwm/default1.png" data-src="images/space-needle.jpg" class="lazy" sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="SRCSET을 사용하여 반응 형 이미지를 구축하는 방법" ></code>

반응 형 이미지는 장치 간의 사용자 경험을 향상시킵니다. 최적의 웹 사이트 성능을 위해 구현하십시오. Microsoft의 추가 리소스 및 도구는 크로스 브라우저 테스트 및 웹 개발 모범 사례에 사용할 수 있습니다. 자세한 FAQ 섹션은

구현에 대한 일반적인 질문을 해결합니다.

위 내용은 SRCSET을 사용하여 반응 형 이미지를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!