반응형 이미지 실전 연습

👉 블로그로 돌아가기

뷰포트에 따른 반응형 이미지

<img srcset="./images/100x200.png 100w,
    ./images/200x200.png 200w,
    ./images/300x200.png 300w,
    ./images/400x200.png 400w,
    ./images/500x200.png 500w,
    ./images/600x200.png 600w,
    ./images/700x200.png 700w,
    ./images/800x200.png 800w,
    ./images/900x200.png 900w,
    ./images/1000x200.png 1000w,
    ./images/1100x200.png 1100w,
    ./images/1200x200.png 1200w,
    ./images/1300x200.png 1300w,
    ./images/1400x200.png 1400w,
    ./images/1500x200.png 1500w,
    ./images/1600x200.png 1600w,
    ./images/1700x200.png 1700w,
    ./images/1800x200.png 1800w,
    ./images/1900x200.png 1900w,
    ./images/2000x200.png 2000w,
    ./images/2100x200.png 2100w,
    ./images/2200x200.png 2200w,
    ./images/2300x200.png 2300w,
    ./images/2400x200.png 2400w,
    ./images/2500x200.png 2500w,
    ./images/2600x200.png 2600w,
    ./images/2700x200.png 2700w,
    ./images/2800x200.png 2800w,
    ./images/2900x200.png 2900w,
    ./images/3000x200.png 3000w,
    ./images/3100x200.png 3100w,
    ./images/3200x200.png 3200w,
    ./images/3300x200.png 3300w,
    ./images/3400x200.png 3400w,
    ./images/3500x200.png 3500w,
    ./images/3600x200.png 3600w,
    ./images/3700x200.png 3700w,
    ./images/3800x200.png 3800w,
    ./images/3900x200.png 3900w,
    ./images/4000x200.png 4000w,
    ./images/4100x200.png 4100w,
    ./images/4200x200.png 4200w,
    ./images/4300x200.png 4300w,
    ./images/4400x200.png 4400w,
    ./images/4500x200.png 4500w,
    ./images/4600x200.png 4600w,
    ./images/4700x200.png 4700w,
    ./images/4800x200.png 4800w,
    ./images/4900x200.png 4900w,
    ./images/5000x200.png 5000w"
sizes="100vw"
src="./images/100x200.png"
alt="placeholder image">

너비 100px에 대응, Pixel Ratio에 따른 반응형 이미지

<img srcset="./images/100x100.png 1x,
    ./images/150x150.png 1.5x,
    ./images/200x200.png 2x,
    ./images/250x250.png 2.5x,
    ./images/300x300.png 3x,
    ./images/350x350.png 3.5x,
    ./images/400x400.png 4x"
src="./images/100x100.png"
alt="placeholder image">

정리

• 위쪽의 반응형 이미지 사이즈는 뷰포트 100%에 해당하는 사이즈(100vw)로 통일해 뒀다.
• 아래쪽 반응형 이미지의 너비는 100px이다.
• Window Width: px
• Device Pixel Ratio:
• w값 계산식: ×=
• w값:
• 가까운 이미지 너비: px 혹은 px
• Device Pixel Ratio가 이기 때문에 sizes에서 구한 px에 를 곱한 값을 w에서 찾아야 한다.
• 즉, 현재 너비가 px이고 Device Pixel Ratio가 이기 때문에 위와 같이 계산해 w값을 구한다.
• 따라서 반응형 이미지는 px에서 제일 가까운 px 너비의 이미지나, px 이상이면서 가장 가까운 px 너비의 이미지를 가져오게 된다.
• 이미지는 via.placeholder.com에서 다운받았다.

👉 블로그로 돌아가기