IMG 태그의 srcset 속성은 무엇이며 어떻게 사용합니까?

Question

내 모바일 앱에서 srcset img 속성을 사용하여 어떻게 시작할 수 있는지 알고 싶습니다. 또는 이미지 해상도 문제를 해결하는 데 도움이되는 다른 jQuery 플러그인이 있습니까? srcset 속성과 사용 방법에

<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" /> 

Answer 1

Here is a good article. srcet을 사용하면 일련의 이미지를 다른 뷰포트 크기로 표시되도록 선언 할 수 있습니다. 예를 들어 다른 해상도로 저장하고 이미지를 저장하면됩니다. banner-phone-HD.jpeg가 가장 높은 해상도입니다.

Exmaple :

<img alt="my awesome image" 
src="banner.jpeg" 
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x"> 

위 아래 640 뷰포트 폭 기기 배너-phone.jpeg를 제공 할 배너 전화-HD.jpeg 작은 화면 높은 DPI 장치에 배너로 - HD.jpeg 화면이 640px 이상인 높은 DPI 장치 및 banner.jpeg를 다른 모든 장치에 연결할 수 있습니다.

동일한 효과를 내기 위해 사용할 수있는 CSS 미디어 쿼리와 같은 다른 방법도 있습니다.

나는 이것에 도움이되는 JQuery 플러그인을 모르고있다.

Answer 2

요약하면 Srcset은 다양한 화면 크기/방향/디스플레이 유형에 대해 서로 다른 종류의 이미지를 지정할 수있는 새로운 특성입니다. 사용법은 정말 간단합니다. 다음과 같은 쉼표로 여러 이미지를 구분하면됩니다. <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

---

이것은 자세한 내용은 사물을 설명하는 긴 답변입니다 예를 들면 다음과 같습니다.

srcset와 그림의 차이점은입니다. srcset과 picture은 거의 동일하지만 거의 차이가 없습니다. picture은 브라우저에서 사용할 이미지를 지정하지만 srcset은 브라우저에 선택 항목을 제공합니다. 뷰포트 크기, 사용자 환경 설정, 네트워크 상태 등과 같은 많은 선택 항목을 선택할 수 있습니다. srcset에 대한 지원은 꽤 좋으며 almost all current browsers 더 많거나 적게 지원합니다. picture 요소가있는 상황은 little bit worse입니다.

설명자은 리소스 뒤에 어떤 이미지가 숨겨져 있는지 보여주는 방법 일뿐입니다.

• 밀도 설명 : 기술자의 다양한 종류가 있습니다. srcset="image.jpg, image-2X.jpg 2x" 디스플레이 밀도 값 (1x, 2x 등)은 디스플레이 밀도 설명자라고합니다. 디스플레이 밀도 디스크립터가 제공되지 않으면, 1x로 가정된다. 망막 디스플레이를 목표로하는 좋은 변형.
• 너비 설명자. srcset="image-240.jpg 240w, image-640.jpg 640w". 나는 이것이 자명하다는 것을 확신한다. 유일한 문제는 너비 설명자가 실제로 도움이되지 않는다는 것입니다. 당신이 폭 기술자를 사용하는 경우에만 의미가 있습니다 Why? read here
• 크기 설명. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">.브라우저에 대한 지침은 다음과 같습니다. (max-width: 480px) 100vw - 뷰포트의 너비가 480 픽셀 이하인 경우 이미지는 뷰포트 너비의 100 %가됩니다. (max-width: 900px) 33vw - 뷰포트의 너비가 480 픽셀 이하인 경우 이전 미디어 상태로 인해이 규칙에 도달하지 않습니다. 그리고 254px는 미디어 조건이 나열되어 있지 않을 때 길이가 다른 미디어 조건이 충족되지 않을 때 사용되는 기본값으로 간주됩니다.

완성도는 CSS에서 배경 이미지와 here