& lt; picture & gt; 요소 및 SRCSET 속성?

<picture></picture> 및 srcset 으로 반응 형 이미지를 구현합니다

srcset 속성과 결합 된 <picture></picture> 요소는 반응 형 이미지를 구현할 수있는 강력하고 유연한 방법을 제공합니다. 다양한 화면 크기와 밀도에 최적화 된 다양한 이미지 버전을 제공 할 수 있습니다. 구현 방법은 다음과 같습니다.

<picture></picture> 요소는 컨테이너 역할을합니다. 내부에는 이미지 소스 세트와 해당 설명자를 정의하는 srcset 속성이있는 다른 <source></source> 요소를 지정합니다. 브라우저는 장치의 기능에 따라 가장 적합한 이미지를 선택합니다. 마지막으로, <picture></picture> 지원하지 않는 브라우저의 폴백으로 <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="& lt; picture & gt; 요소 및 SRCSET 속성?" > 요소를 포함시킵니다.

예를 들어:

 <code class="html"><picture> <source srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" media="(min-width: 1024px)"> <source srcset="image-medium-res.jpg 1.5x, image-low-res.jpg 1x" media="(min-width: 768px)"> <source srcset="image-low-res.jpg" media="(max-width: 767px)"> <img src="/static/imghwm/default1.png" data-src="image-low-res.jpg" class="lazy" alt="Description of image"> </source></source></source></picture></code>

이 예에서 :

• srcset="image-high-res.jpg 2x, image-low-res.jpg 1x" 2x 고해상도 이미지 (밀도의 두 배)를 나타내고 1x 는 표준 해상도 이미지입니다. 브라우저는 장치 픽셀 비율 (DPR)을 기준으로 가장 적합한 것을 선택합니다.
• 다른 화면 크기를 대상으로 한 다른 미디어 쿼리에 유사한 srcset 속성이 사용됩니다.
• <img alt="& lt; picture & gt; 요소 및 SRCSET 속성?" > 요소는 브라우저가 <picture></picture> 또는 <source></source> 지원하지 않으면 폴백을 제공합니다.

"image-high-res.jpg" "image-medium-res.jpg" "image-low-res.jpg" im alt 속성은 접근성에 중요합니다.

<picture></picture> 및 srcset 의 이점

<picture></picture> 및 srcset 사용하면 CSS max-width 사용하거나 이미지 편집 소프트웨어로 이미지를 간단히 크기로 만드는 것과 같은 다른 반응 형 이미지 기술에 비해 몇 가지 장점이 있습니다.

• 정확한 제어 : <picture></picture> 사용하면 다양한 요인 (화면 크기, 픽셀 밀도, 장치 기능)을 기반으로 어떤 이미지가 제공되는지에 대한 세분화 제어가 가능합니다. 이를 통해 모든 장치에서 최적의 이미지 품질과 성능을 보장합니다.
• 효율성 : 필요한 이미지 해상도 만 제공하면 대역폭 소비를 줄이고 페이지로드 시간을 향상시킵니다. 이것은 모바일 사용자에게 특히 중요합니다.
• 유연성 : <picture></picture> 요소 내에서 다양한 이미지 형식 (예 : 더 나은 압축을위한 웹)을 결합하여 각 장치에 가장 적합한 형식을 활용할 수 있습니다.
• 향후 방지 : <picture></picture> 요소 및 srcset 속성은 모든 주요 최신 브라우저에서 지원 되며이 방법은 많은 웹 성능 전문가가 권장합니다.

<picture></picture> 및 srcset 에 대한 이미지 최적화

<picture></picture> 및 srcset 사용할 때 빠른 로딩 시간에 이미지를 최적화하는 것이 중요합니다. 방법은 다음과 같습니다.

• 올바른 형식을 선택하십시오 : Webp, AVIF 또는 JPEG 2000과 같은 최신 형식을 사용하여 기존 JPEG 또는 PNG에 비해 우수한 압축을 제공하십시오. 화면 크기와 밀도에 대해 다른 형식을 사용하여 품질과 파일 크기 사이의 최상의 타협을 선택하십시오.
• 압축 : 이미지 최적화 도구 (예 : TinypNG, ImageOptim)를 사용하여 품질 상실없이 파일 크기를 줄입니다. 약간의 품질 감소가 허용되는 이미지의 손실 압축을 고려하십시오.
• 적절한 결의 : 필요한 결의 만 제공하십시오. 작은 화면의 경우 불필요하게 고해상도 인 지나치게 큰 이미지를 피하십시오.
• 반응 형 디자인 원칙 : CSS를 사용하여 레이아웃과 비례하여 이미지를 비례 적으로 척도에 맞추십시오. CSS를 사용하여 스케일링되는 큰 이미지를 사용하지 마십시오. 이것은 비효율적입니다.

브라우저 호환성

<picture></picture> 및 srcset 최신 브라우저에서 널리 지원됩니다. 그러나 이전 브라우저는 완전히 지원하지 않을 수 있습니다. 다음은 고려해야 할 사항입니다.

• 폴백 메커니즘 : 항상 <picture></picture> 또는 srcset 지원하지 않는 브라우저의 폴링으로 <picture></picture> 요소 내에 항상 <img alt="& lt; picture & gt; 요소 및 SRCSET 속성?" > 요소를 포함시킵니다. 이것은 이미지가 항상 표시되도록합니다.
• 진보적 인 향상 : <picture></picture> 및 srcset 은 점진적인 향상입니다. 그들은 브라우저를 지원하는 경험을 향상 시키지만 여전히 오래된 브라우저에 기능적 폴백을 제공합니다. 폴백 이미지는 이전 브라우저에서 사용됩니다.
• 테스트 : 다양한 브라우저 및 장치에서 구현을 철저히 테스트하여 일관된 렌더링 및 성능을 보장합니다. 브라우저 개발자 도구를 사용하여 어떤 이미지가로드 될지 확인하고 기대치와 일치하는지 확인하십시오. Lighthouse와 같은 도구는 이미지 최적화에 대한 귀중한 통찰력을 제공 할 수 있습니다.

위 내용은 & lt; picture & gt; 요소 및 SRCSET 속성?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!