이미지를 삽입
→ src : (필수) 이미지 URL
→ alt : (필수) 이미지의 대체텍스트
→ width : 이미지의 가로 너비
→ height : 이미지의 세로 너비
→ srcset : 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의 (w, x)
→ sizes : 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의
<img
srcset="images/heropy_small.png 400w, /* A */
images/heropy_medium.png 700w, /* B */
images/heropy_large.png 1000w" /* C */
width="500"
sizes="(max-width: 500px) 444px, /* 1 */
(max-width: 800px) 777px, /* 2 */
1222px" /* 3 */
src="images/heropy.png" /* 필수 */
alt="HEROPY" /> /* 필수 */
srcset 속성은 쉼표(,)로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,
sizes 속성은 쉼표(,)로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 츨력될 이미지 크기를 지정합니다.
[ srcset 만 선언된 경우 ]
A : 이미지의 경로와 뷰포트 너비가 400px 이하일 때 출력된다.
B : 이미지의 경로와 뷰포트 너비가 401 ~ 700px 일 때 출력된다.
C : 이미지의 경로와 뷰포트 너비가 701 이상일 때 출력된다.
[ srcset 와 width 만 선언된 경우 ]
결과는 위와 동일 하지만 크기는 고정된 width=500 의 크기를 유지합니다.
[ srcset 와 sizes 만 선언된 경우 ]
max-width : X 는 뷰포트 너비가 X 이하인 조건을 의미하고,
min-width : X 는 뷰포트 너비가 X 이상의 조건을 의미합니다.
1 : 뷰포트 너비가 500이하 이면 444px 의 이미지 크기를 지정하고 444px크기에 최적화된 이미지인 B를 출력한다.
2 : 뷰포트 너비가 800이하 이면 777px 의 이미지 크기를 지정하고 777px크기에 최적화된 이미지인 C를 출력한다.
3 : 뷰포트 너비가 801이상 이면 1222px 의 이미지 크기를 지정하고 1222px크기에 최적화된 이미지인 C를 출력한다.