srcset 속성 정보

TL;DR

참고 자료

srcset 소개

사용자 에이전트에서 사용할 수 있는 원본 이미지의 그룹 목록을 표시합니다.힌트 리스트는 힌트일 뿐입니다.정말 어떤 그림을 선택하시겠습니까? 사용자 에이전트가 상당히 큰 재단을 해 주었습니다p>

조건이 아무리 넉넉해도 설명할 수 있습니다.판매는 지정 누락과 오류의 모호성을 허용하는 것이다.(Media Query는 절대적이어서 예상보다 약함)

확인 방법

Chrome DevTools의 경우 "Network"탭에서 개체 파일을 선택하면 Preview를 통해 확인 가능p>

• 페이지를 다시 읽으면 확인(일치하는 리소스만 읽음)
• Chrome 테스트 시 캐시 이미지가 우선하므로 [Disable cache]
미리 켜짐

w 설명자의 경우 지정

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">

• srcset에 이미지 표시 후보 지정
• w 설명자는 이미지의 실제 크기입니다. (표시 사이즈라면 해상도에 영향을 받습니다. Command+i를 통해 알 수 있듯이 Mac)
• sizes에서 미디어 조건 및 간격 너비(표시 영역) 지정
• 미디어 조건이 진짜일 때 시간 간격에 가장 가까운 그림을 읽는다
• sizes의 판정은 설명 순서대로

화면폭 320px 이하 상황에서 280px의 영역으로 깊이 들어가기br/>
브라우저는 srcset에서 보이는 후보에서 틈새 폭에 맞는 그림을 선택해서 표시합니다.화면 해상도도 증가

x 설명자가 지정된 경우

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="妖精の衣装を着たエルバ">

• 
  크기 필요 없음(혼합 위험)
• 브라우저는 화면 해상도를 간단하게 검사하고 가장 적합한 이미지 (srcset에서 나온 후보) 를 제공합니다.
• 1x는 은식이므로 포함할 필요가 없음

주의점

• 너비 묘사자w와 픽셀 밀도 묘사자x를 같은 srcset 속성에 혼합하면 너비 묘사자
가 무효입니다.
• 중복된 설명자도 유효하지 않습니다(예: 두 개2x가 있는 경우).
• sizes의 판정에서 최초 일치된 조건 이후 모두 무시됨(설명 순서 주의)
• <meta name="viewport" content="width=device-width"> 설정

자바스크립트 쓰면 안 돼요?

CSS의 경우

Media Query에서 구현br/>
대응하는 자원만 읽는 것 같습니다.(이전에 다 읽은 것 같아)

See the Pen Media Query를 사용하여 이미지를 개별적으로 읽습니까? by Yasuo Fukuda ( @sigwyg ) on CodePen .

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="4つの正三角形から構築された通常のピラミッド">
</picture>