<picture></picture> 요소는 HTML에서 다양한 시나리오, 특히 반응 형 웹 디자인에 대한 여러 버전의 이미지를 제공하는 데 사용됩니다. 이 요소를 통해 개발자는 화면 크기, 해상도 및 장치 기능과 같은 요소를 기반으로 브라우저가 선택할 수있는 다양한 이미지 소스를 지정할 수 있습니다. 다음은 <picture></picture> 요소를 사용하는 방법은 다음과 같습니다.
<picture></picture> 요소는 <source></source> 요소와 폴백 <img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="& lt; picture & gt; 반응 형 이미지의 요소?" > 요소를 감싸고 있습니다. <source></source> 요소는 다른 이미지 소스를 지정하는 데 사용되며 <img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="& lt; picture & gt; 반응 형 이미지의 요소?" > 요소는 소스가 적합하지 않은 경우 폴백 역할을합니다. <source></source> 요소 사용 : 각 <source></source> 요소는 media , srcset 및 type 속성을 포함 할 수 있습니다.
media : 소스에 대한 미디어 쿼리를 지정합니다.srcset : 옵션 너비 디스크립터와 함께 이미지의 URL을 제공합니다.type : 자원의 마임 유형을 나타냅니다.<picture></picture> 요소를 사용하는 방법의 예는 다음과 같습니다.<code class="html"><picture> <source media="(min-width: 800px)" srcset="large-image.jpg" type="image/jpeg"> <source media="(min-width: 600px)" srcset="medium-image.jpg" type="image/jpeg"> <img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="Descriptive text for image" type="image/jpeg"> </source></source></picture></code>
이 예에서 브라우저는 최소 폭이 800px, 최소 폭이 600px 인 스크린의 medium-image.jpg 및 작은 화면의 폴백으로 스크린에 large-image.jpg small-image.jpg 를 표시합니다.
<picture></picture> 요소를 사용하면 다른 장치에서 반응 형 이미지를 전달하는 데 몇 가지 이점이 있습니다.
<picture></picture> 요소를 사용하면 지원되는 브라우저 용 Webp와 같은 최신 이미지 형식을 사용할 수 있으며 다른 브라우저를위한 붕괴가 가능합니다. 이로 인해 파일 크기가 작고 페이지로드가 더 빨라질 수 있습니다.<picture></picture> 요소를 통해 전달되는 반응 형 이미지는로드 시간을 줄이고 모든 장치에서 이미지가 날카 롭고 명확하게 보이도록하여 사용자 경험을 향상시킬 수 있습니다.<picture></picture> 요소는 장치의 화면 크기 또는 방향에 따라 이미지의 다른 작물이나 구성을 표시 할 수있는 예술 방향을 가능하게합니다.<img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="& lt; picture & gt; 반응 형 이미지의 요소?" > 요소를 적절한 alt 텍스트의 폴백으로 사용하면 모든 사용자가 컨텐츠에 액세스 할 수 있으며 SEO도 도움이됩니다. 다양한 화면 크기에 대해 <picture></picture> 요소 내에서 다른 이미지 소스를 구현하려면 다음을 수행하십시오.
<source></source> 요소 정의 : <picture></picture> 요소 내부에 여러 <source></source> 요소를 사용하십시오. 각각은 특정 화면 크기에 미디어 쿼리를 지정하는 media 속성이 있습니다.<source></source> 요소의 srcset 속성에서 화면 크기에 적합한 이미지의 URL을 지정하십시오.<picture></picture> 요소 내의 마지막 자식으로 폴백 <img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="& lt; picture & gt; 반응 형 이미지의 요소?" > 요소를 포함시킵니다. 이 이미지는 <source></source> 요소 중 어느 것도 현재 조건과 일치하지 않으면로드됩니다.다음은 이것을 설정하는 방법의 예입니다.
<code class="html"><picture> <source media="(min-width: 1200px)" srcset="extra-large-image.jpg" type="image/jpeg"> <source media="(min-width: 800px)" srcset="large-image.jpg" type="image/jpeg"> <source media="(min-width: 600px)" srcset="medium-image.jpg" type="image/jpeg"> <img src="/static/imghw/default1.png" data-src="small-image.jpg" class="lazy" alt="A descriptive text for the image" type="image/jpeg"> </source></source></source></picture></code>
이 설정에서 브라우저는 현재 뷰포트 폭에 따라 가장 적절한 이미지를 선택하여 사용자가 장치에 가장 적합한 경험을 얻을 수 있도록합니다.
<picture></picture> 요소는 여러 가지 방법으로 반응 형 이미지로 페이지로드 시간과 사용자 경험을 향상시킵니다.
전반적으로, <picture></picture> 요소는 웹에서 반응적이고 효율적이며 사용자 친화적 인 이미지를 제공하기위한 강력한 도구입니다.
위 내용은 & lt; picture & gt; 반응 형 이미지의 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
