출처
https://blogpack.tistory.com/1000
https://velog.io/@fenjo/HTML-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%9C%84%ED%95%9C-srcset
https://codingcoding.tistory.com/386
img 태그
srcset, sizes 옵션을 이용하여 반응형 처리 가능
img 태그의 대부분을 picture, source 태그로 구현 가능
src
기본적으로 이미지를 표시하기 위해 사용
srcset을 지원하지 않는 브라우저가 있을수도 있으므로 필수로 사용해야하는 옵션
srcset
1개 이상의 src를 하나의 문자열로 사용
이미지의 웹 브라우저 너비에 맞는 가변적인 크기 지정 가능
w 키워드로 이미지 파일의 실제 너비를 브라우저에게 알려줌
<img srcset="./test.png 10w ./test2.png 20w"/>브라우저 너비가 width: 10px 보다 작거나 같을경우 test.png 파일이 보임
최초 브라우저 DOM트리를 그릴때 이미지가 정해지며
브라우저 마다 크기가 변할때마다 처리되는게 다 다름
그래서 <picture/> 태그를 사용함
고해상도 디스플레이에 픽셀 단위로 표현하기위해 x도 지원
<img srcset="./test.png 10x ./test2.png 20x"/>2023-02-10
srcSet에 추가된 10w 같은 크기는 픽셀단위로 브라우저가 판단
width 값으로 알고있지만 실제 브라우저가 판단은 다르게 하는듯
sizes
미디어 쿼리와 같이 반응형에 맞게 이미지의 사이즈 지정 가능
브라우저에 보여줄 이미지의 크기를 지정
<img sizes="(max-width:560px) 360px, (max-width: 780px) 550px"/>브라우저 크기가 560px 보다 작을경우 이미지는 360px로 보임
콤마로 여러개 입력 가능
px 단위로 작성해야함
2023-02-10
브라우저가 점점 커질떄는 동작하지만 반대일 경우는 동작하지않음
큰 이미지를 가져오면 다시 작은 이미지를 가져올 필요성이 없다고 브라우저가 판단
picture
단순 wrapper 태그
특별한 옵션은 없음
하위로 <source> 및 <img> 태그를 가짐
picture 태그를 사용함으로 추가적인 css 없이 동적 이미지 처리가 가능
주의
큰사이즈 이미지를 불러올경우 브라우저가 뷰포트가 작아져도
작은 이미지를 들고올 필요를 느끼지못해 안불러올수있음
srcset에 큰 이미지 순으로 등록해야 동작함
그런데 srcset, picture, source 태그 만을 이용하여 반응형 이미지를 처리하는게 아닌
CSS 미디어쿼리와 함께 작업되어야한다
