기본적인 반응형 웹 사이트는 화면 크기별로 페이지 무게가 달라지지 않는다. 통상적으로 모바일 환경이 데스크톱 환경에 비해 열악한 편인데, 이런 느린 환경에서 데스크톱과 동일한 무게의 페이지를 로딩하고 동작시키게 되면서 모바일 환경에서의 사용자 경험의 질은 낮아질 수 밖에 없다.
원인은 사용자의 웹 환경에 맞추어 이미지의 크기(무게)가 변하지 않기 때문이다. 따라서 화면이 작음에도 불구하고 큰 화면에서나 쓸 법한 무거운 이미지들을 가져와 사용하다 보니, 모바일 환경과 같은 느린 조건에서 긴 로딩 시간을 낭비하게 되는 것이다.
화면이 작아졌는데도 필요 이상의 웹 리소스들을 과하게 내려받는 현상을 Over Downloading이라 하고, 이에 대한 세 가지 예시를 살펴보도록 하자.
일반적인 웹 페이지에서는 다음과 같이 <img> 태그에 width와 height를 지정하여 사용한다.
<img src="images/image01.png" alt="Example Img" width="500px" height="100px" />
하지만 반응형 웹 페이지에서는 화면의 크기에 따라 이미지의 크기 역시 달라져야 하기 때문에 고정된 값을 사용할 수가 없다.
width와 height를 지정해주지 않으면 이를 브라우저에서 직접 계산하여 표시해주어야 하는데, 이는 브라우저 성능 저하로 이어지게 된다.
반응형 웹에서 이미지의 크기를 다룰 때 유동형 이미지를 주로 사용하게 된다.
유동형 이미지
유동형 이미지란 전체 화면 대비 이미지의 크기를 비율로써 나타낸 것을 말한다.
https://codepen.io/dkkim0122/pen/LYBZeEQ
위의 코드가 유동형 이미지의 예시이다. 화면의 크기가 변하면 이미지의 크기 역시 맞추어 변화한다.
그러나 예상할 수 있듯이, 화면이 작아진다고 이미지의 무게 역시 줄어드는 것이 아니다. 작은 화면에서도 큰 화면과 동일한 크기의 이미지를 사용하게 되고, 이는 성능 저하로 이어진다.
이 때 브라우저에서 이미지의 너비와 높이를 스스로 계산하여 크기를 정하게 되는데, 이 계산에 소요되는 시간까지 고려하면 사용자 경험에 꽤 큰 악영향을 미치게 된다.
같은 페이지라 하더라도, 데스크톱과 모바일 환경에서 각각 보여지는 화면이 완전히 동일하지 않은 경우가 많다. 미디어 쿼리를 사용하여 만약 화면의 크기가 모바일 환경이라면, 일부 이미지들을 display: none으로 숨기는 경우가 있다.