가변 이미지를 지정하는 기본 방법
img {
max-width: 100%;
height: auto; /*너빗값에 따라 높이도 자동 조절되도록 설정*/
}브라우저에서는 일단 사이트에서 사용할 이미지를 '미리 로딩(Preload)'한다. 그 후에 데스크톱에서는 모바일 이미지를 감추고 모바일에서는 데스크톱 이미지를 감추는 방법을 사용한다. 결국 모바일 기기 입장에서는 레티나 이미지 파일까지 로딩하게 된다. 또 다른 문제는 모바일 기기를 가로로 보거나 세로로 볼 때 이미지가 다르게 표시된다는 점이다. 결국은 가변 이미지로 만들기보다는 세로용 이미지를 따로 만드는 것이 낫다.
방법 1. <img>태그의 srcset 속성
기본으로 사용할 이미지 파일 경로를 지정하고, px 너비나 px 밀도에 맞는 여러 이미지를 함께 지정한다.
<img src="기본 이미지" srcset="파일1[,파일2,파일3,...]"
- 픽셀 너비 서술자 함께 사용하기
화면 너비에 따라 이미지 파일을 다르게 지정할 때 '파일 이름, 너비w'형식을 사용한다. 'large.png, 1000w'는 화면 너비가 1000px 이상일 경우 large.png파일을 표시한다는 의미이다.
<img src="sky.png" srcset="sky-large.png 1024w, sky-medium.png 640w, sky-small.png 320w"> - 픽셀 밀도 서술자 함께 사용하기
화면에 표시되는 객체의 크기는 px 밀도가 증가할수록 더 작아진다. 그래서 기본 px 밀도의 이미지를 1x로 한다면 px밀도 2x일 때는 이미지를 2배 크게 만든다든지 해서 px 밀도에 따라 이미지를 따로 지정할 수 있다.
<img src="sky.png" srcset="sky-large.png 3x, sky-medium.png 2x, sky-small.png">
