같은 이미지를 모든 화면에 쓰면 낭비다. 작은 화면에는 작은 이미지, 큰 화면에는 큰 이미지를 보내자.
srcset 속성
img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" 이렇게 쓰면 브라우저가 화면 크기에 맞는 이미지를 선택한다.
sizes 속성
sizes="(max-width: 600px) 100vw, 50vw"는 600px 이하에서는 전체 너비, 그 이상에서는 절반 너비로 표시한다는 뜻. 화면 크기 확인기로 확인하면서 설정하자.
성능 향상
적절한 이미지를 로드하면 대역폭을 절약하고 로딩 속도가 빨라진다. 확인기로 다양한 화면에서 테스트해보자.
다양한 환경에서의 테스트
개발 중에는 크롬 개발자 도구의 디바이스 모드를 많이 쓰지만, 실제 기기에서의 테스트도 중요하다. 시뮬레이션과 실제 기기는 미묘한 차이가 있을 수 있다. 화면 크기 확인기를 실제 스마트폰, 태블릿에서 열어보면 정확한 뷰포트 크기를 알 수 있다.
성능과 화면 크기
큰 화면에 무거운 이미지를 로드하고 작은 화면에는 가벼운 이미지를 로드하면 성능을 최적화할 수 있다. srcset과 sizes 속성을 활용하자. 화면 크기에 따른 리소스 최적화는 사용자 경험과 비용 모두에 영향을 준다.
반응형 디자인의 미래
Container Queries, 새로운 뷰포트 단위(dvh, svh, lvh) 등 CSS도 계속 발전하고 있다. 이런 새로운 기능들을 활용하면 더 정교한 반응형 디자인이 가능하다. 확인기와 함께 새로운 기술을 익혀나가자.
화면 크기 확인기를 자주 활용하면서 다양한 화면 환경에 대응하는 습관을 들이자.