HTML SRCSET 및 크기 속성으로 반응 형 이미지 구현

SRCSET 및 크기는 반응 형 이미지의 HTML 구현을위한 핵심 속성입니다. SRCSET은 여러 이미지 소스와 400W 및 800W와 같은 폭 또는 픽셀 밀도를 제공하며 브라우저는 그에 따라 적절한 이미지를 선택합니다. 크기는 (max-width : 600px) 100VW, 50VW와 같은 다른 화면 너비에서 이미지의 디스플레이 너비를 정의하여 브라우저가 이미지 크기와 더 정확하게 일치 할 수 있도록합니다. 실제로 사용하려면 미디어 쿼리에 따라 명확하게 명명, 디자인 레이아웃을 준비하고 장비의 성능을 테스트하여 크기 또는 장치 오류를 무시하지 않으므로 대역폭을 절약하고 성능을 향상시켜야합니다.

웹 페이지가로드되면 이미지는 종종 최대 대역폭을 차지합니다. 다른 장치가 올바른 크기의 이미지를 효율적으로로드 할 수 있도록하기 위해 HTML은 반응 형 이미지를 구현하기 위해 srcset 및 sizes 특성을 제공합니다.

srcset 란 무엇입니까?

srcset 사용하면 브라우저에 여러 이미지 소스를 제공하고 해당 이미지의 너비 또는 픽셀 밀도를 알 수 있습니다. 이러한 방식으로 브라우저는 현재 장치의 화면 크기 및 해상도에 따라로드 할 가장 적합한 그림을 선택할 수 있습니다.

예를 들어:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225052011544.jpeg"  class="lazy"  src = "image-400w.jpg" 
     srcset = "image-400w.jpg 400w, im
     alt = "예제 그림">

위의 코드에서 브라우저는 사용 가능한 공간 및 장치 픽셀 비율에 따라 srcset 목록에서 적절한 이미지 파일을 선택합니다.

핵심 사항 :

• 각 이미지 다음에는 400w 와 같은 너비 ( w 로 끝)가 이어집니다.
• 브라우저는 뷰포트 크기, 스케일링 비율 및 기타 요인에 따라 판단을합니다.

sizes 의 기능은 무엇입니까?

srcset 여러 이미지를 제공하지만 브라우저는 이미지가 페이지에 얼마나 큰지 알지 못합니다. 현재 브라우저를 알리기 위해 sizes 필요합니다. "이 이미지가 다른 화면 너비 아래에 얼마나 넓어 야합니까?"

예를 들어:

 <img src = "image-400w.jpg" 
     srcset = "image-400w.jpg 400w, im
     크기 = "(최대 폭 : 600px) 100VW, 50VW"
     alt = "예제 그림">

이 라인 sizes 의 의미는 다음과 같습니다.

• 화면 너비가 600px보다 작거나 같으면 이미지가 전체 뷰포트 너비 (100VW)를 채 웁니다.
• 그렇지 않으면 이미지가 뷰포트 너비의 절반을 차지합니다 (50VW)

srcset 과 함께 사용하는 이점 :

• 브라우저는 "오른쪽"이미지 크기를보다 정확하게 선택할 수 있습니다.
• 너무 크거나 작은 이미지의로드를 피하고 대역폭을 절약하고 성능 향상

실제로 사용되는 제안

이 두 가지 속성을 더 잘 활용하려면 다음의 실질적인 제안을 따를 수 있습니다.

• 여러 크기의 사진 준비 : 3 ~ 4 버전의 공통 너비 (예 : 400px, 800px, 1200px)를 생성하는 것이 좋습니다.
• 지우기 명명 : 예를 들어 -400w.jpg 및 -800w.jpg 사용하여 이미지 너비를 표시하십시오.
• 미디어 쿼리와 함께 디자인 레이아웃 : sizes 의 중단 점이 CSS 미디어 쿼리와 일치하는지 확인
• 다른 장치의 성능 테스트 : Chrome DevTools는 다른 장치를 시뮬레이션하여 어떤 사진을로드했는지 확인할 수 있습니다.

CMS 또는 정적 웹 사이트 생성기를 사용하는 경우 많은 사람들이 자동으로 srcset 및 다양한 크기의 사진을 자동으로 생성하여 수동 처리의 번거 로움을 절약 할 수 있습니다.

작은 세부 사항을 무시하지 마십시오

일부 개발자는 srcset 만 작성하지만 sizes 무시하므로 브라우저는 뷰포트 너비에 따라 이미지 크기를 대략 판단 할 수 있으므로 이미지 선택이 잘못 될 수 있습니다. 특히 사진이 전체 화면 너비가 아닌 경우 sizes 추가하면 반응이 좋은 이점을 제공 할 수 있습니다.

실수를 저지르기위한 또 다른 쉬운 곳은 w 가 px 로 쓰기 또는 w 누락과 같이 유닛이 잘못 쓰여서 브라우저가 올바르게 구문 분석하지 못하게한다는 것입니다.

기본적으로 그게 다야. srcset 및 sizes 의 합리적인 사용은 로딩 속도를 향상시킬뿐만 아니라 모바일 사용자의 탐색 경험을 향상시킬 수 있습니다.

위 내용은 HTML SRCSET 및 크기 속성으로 반응 형 이미지 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!