HTML에서 SRCSET 속성으로 반응 형 이미지를 제공하는 방법

SRCSET 속성을 사용하여 반응 형 이미지를 효과적으로 제공하여 페이지 로딩 속도 및 사용자 경험을 향상시킵니다. 1. SRCSET 속성을 사용하면 여러 이미지 소스와 너비 또는 픽셀 밀도 프롬프트를 정의하여 브라우저가 가장 적합한 이미지를 선택할 수 있습니다. 2. 크기 속성을 결합하면 다른 화면 너비에서 뷰포트를 차지하는 이미지의 백분율과 같은 레이아웃 변경에 따라보다 정확한 이미지 선택을 제공 할 수 있습니다. 3. 픽셀 밀도 설명자 (예 : 1x, 2x)는 고화질 이미지에 사용될 수 있습니다. 4. 항상 구형 브라우저의 폴백 옵션으로 SRC를 유지합니다. 5. 이미지가 뷰포트로 스케일링되고 고정 크기 이미지의 밀도 설명자 (x)가 스케일링되면 너비 설명자 (w)를 사용하십시오. 6. 모든 이미지 버전은 대역폭을 저장하기 위해 최적화되어야합니다. 7. 장치 테스트 또는 개발자 도구를 통해 다른 화면에서 성능을 확인하십시오. JavaScript 또는 CSS 기술없이 SRCSet을 올바르게 사용하십시오. 기본 HTML에 의존하면 효율적이고 적응 형 이미지 로딩을 달성 할 수 있으며, 브라우저는 최상의 이미지 리소스를 자동으로 선택하여 렌더링을 완료합니다.

HTML에서 srcset 속성을 사용하여 반응 형 이미지를 제공하는 것은 사용자의 장치 및 화면 해상도를 기반으로 올바른 이미지 크기를 제공하는 현명한 방법입니다. 이는 페이지로드 시간을 향상시키고 특히 모바일 장치에서 사용자 경험을 향상시킵니다. 효과적으로 사용하는 방법은 다음과 같습니다.

srcset 속성 이해

srcset 속성을 사용하면 브라우저가 가장 적합한 브라우저를 선택할 수 있도록 힌트 (너비 또는 픽셀 밀도)와 함께 여러 이미지 소스를 정의 할 수 있습니다. img 태그와 함께 작동하며 종종 더 많은 제어를 위해 sizes 속성과 함께 사용됩니다.

기본 구문 :

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175424532752033.jpeg"  class="lazy"  src = "image-small.jpg"
     srcset = "image-small.jpg 480w,
             Image-Medium.jpg 800W,
             image-large.jpg 1200w "
     alt = "응답 형 이미지">

이 예에서 :

• 각 이미지 다음에는 너비 디스크립터 (예 : 480w 는 480 픽셀을 의미합니다).
• 브라우저는이 정보와 뷰포트 크기 및 장치 픽셀 비율을 사용하여 최상의 이미지를 선택합니다.

레이아웃 기반 선택에 sizes 사용

화면 너비에 따라 이미지 크기가 변경되면 (예 : 모바일의 전체 너비, 데스크탑의 반 폭) sizes 속성을 사용하여 브라우저 힌트를 제공하십시오.

예:

 <img src = "image-small.jpg"
     srcset = "image-480.jpg 480w,
             이미지 -800.jpg 800W,
             Image-1200.JPG 1200W "
     크기 = "(최대 폭 : 480px) 100VW,
            (Max-Width : 800px) 50VW,
            33VW "
     alt = "크기의 반응 형 이미지">

sizes 의미하는 바는 다음과 같습니다.

• 480px 이하의 화면에서 이미지는 100vw (전체 너비)를 차지합니다.
• 481px와 800px 사이에서 50vw (반 폭)를 사용합니다.
• 더 큰 화면 에서는 33vw 사용합니다.

브라우저는이 레이아웃 정보 srcset 옵션을 사용하여 최상의 이미지 파일을 선택합니다.

High-DPI (Retina) 스크린을 지원합니다

픽셀 밀도 설명기 ( 1x , 2x 등)를 사용하여 픽셀 밀도가 높은 장치의 고해상도 이미지를 제공 할 수도 있습니다.

예:

 <img src = "image.jpg"
     srcset = "image.jpg 1x,
             image-2x.jpg 2x,
             image-3x.jpg 3x "
     Alt = "High-DPI 응답 형 이미지">

이것은 너비 설명기를 사용하는 것보다 간단하지만 덜 유연합니다. 이미지 크기가 장치에서 크게 변하지 않는 것이 가장 좋습니다.

모범 사례 및 팁

• 항상 src 폴백을 포함하십시오 : srcset 지원되지 않은 경우 (매우 오래된 브라우저) 사용됩니다.
• 이미지 치수가 반응이 적은 경우 srcset sizes 와 결합하십시오.
• 이미지가 뷰포트로 스케일 일 때 너비 설명자 ( w )를 사용합니다. 고정 크기 이미지 (아이콘과 같은)에는 밀도 설명자 ( x )를 사용하십시오.
• 모든 이미지 버전을 최적화하고 압축하여 대역폭을 저장하십시오.
• 다양한 장치에서 테스트하거나 브라우저 개발 도구를 사용하여 다양한 화면 크기를 시뮬레이션하십시오.

srcset 사용하려면 JavaScript 또는 CSS Tricks가 필요하지 않습니다. 최신 브라우저가 잘 지원하는 기본 HTML입니다. 사이트를보다 빠르고 적응력있게 만들 수있는 간단한 방법입니다.

기본적으로 여러 이미지 옵션을 제공하고 브라우저가 나머지 작업을 수행하도록하십시오.

위 내용은 HTML에서 SRCSET 속성으로 반응 형 이미지를 제공하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!