반응형 이미지, responsive-images

 

view demo    download

 

 

반응형 이미지를 만드는데 우선적으로 적용하는 것이 CSS에서의

 img {max-width: 100%;}
입니다.


브라우져를 줄여보면 창의 크기에 따라 이미지가 알아서 줄어드는걸 보게 될 겁니다. 하지만 저대로 적용을 한다면 데스크탑에서뿐만 아니라 모든 모바일과 스마트 기기에도 같은 이미지 파일을 불러들이게 되죠. 기본 이미지 사이즈가 크고 화소수가 높은만큼 이미지 파일의 용량도 클 수 밖에 없습니다. 큰 용량의 이미지를 모바일 기기에서 불러들인다는건 굉장히 무겁고 버거운 일입니다.

 

 

다음 방법은 'CSS 미디어 쿼리'를 추가하는 겁니다. 기본 형식은

 
@media only screen and (min-width: 450px) {
  #background {	
	  background: url(img/small.jpg) no-repeat;
  }    
} 

@media only screen and (min-width: 780px) and (max-width: 1024px) {
  #background {	
	  background: url(img/mid.jpg) no-repeat;
  }    
}
입니다.

 

스크린 가로크기가 최하 450px부터 779px까지 'small.jpg'를, 최하 780px부터 1024px까지는 'mid.jpg'를 사용하게 됩니다. 하지만 저 방식은 이미지가 고정되는거라 각각의 이미지 크기에서 줄어들거나 커지지 않는 단점이 있습니다.

 

 

다음으로 보완해 갈 방법은 display를 이용하는 겁니다. 예를 들어 HTML에

 
<div id="background">
    <div class="big"><img src="img/big.jpg"></div>
    <div class="mid" style="display:none;"><img src="img/mid.jpg"></div>
    <div class="small" style="display:none;"><img src="img/small.jpg"></div>
</div>
그리고 CSS 미디어 쿼리에는
@media only screen and (min-width: 450px) {
  #background .small {	
	  display: block;
  }   
  #background .big {	
	  display: none;
  }  
} 

@media only screen and (min-width: 780px) and (max-width: 1024px) {
  #background .mid {	
	  display: block;
  }  
  #background .big {	
	  display: none;
  }     
}
이렇게 각각 입력합니다.


기본 스크린 상에서는 'big.jpg'가 사용되겠지만, 스크린이 1024px 이하 780px 이상일 때에는 'mid.jpg'가 사용되고 'big.jpg'는 display:none으로 숨겨지게 됩니다. 마찬가지로 780px 미만 450px 이상일 때에는 'small.jpg'가 사용되고 'big.jpg'는 숨겨집니다.


하지만 여기서도 문제점이 발견되는데, dispaly:none으로 사용하여 스크린 상에는 비록 보이지 않더라도 로딩을 시킨다는 문제점이 있습니다.

 

 

그렇다면 반응형 이미지를 다루는 최적의 방법은 무엇일까요. 고정되지 않는 이미지로 스크린 사이즈에 따라 유동적으로 크기가 변해야하고, 모든 이미지가 로딩되는 것이 아닌 각각의 스크린 사이즈별로 하나의 이미지만 로딩이 되어야 할 것입니다. 다음 이미지를 한번 보죠.

 

 

가로 스크린이 1440px일때 사용되는 이미지의 크기는 무려 442kb 입니다. 그리고 순차적으로 작은 이미지를 로딩시켜서 결국 480px 이하에서는 70kb 크기의 이미지를 로딩하게 됩니다. 442kb에서 70kb는 엄청난 감소이며 모바일 기기에 줄 부담을 최대한 줄인 결과라 할 수 있습니다. 그렇다면 이제 picturefill.js를 이용하여 위의 예와 같은 최적의 반응형 이미지를 만들어 보겠습니다.

 

The HTML

 

먼저 상단 head 안에 자바스크립트 파일 링크를 줍니다.

<script src="picturefill.js"></script>
<script src="matchmedia.js"></script>

 

본격적인 반응형 이미지를 만듭니다. data 속성을 사용하는데요, data-picture로 감싸고 data-src로 각각의 스크린에 보여줄 이미지 파일을 선택하구요, data-media는 @media only screen과 같은 방식으로 이미지를 불러들일 스크린의 크기를 지정합니다.

<span data-picture data-alt="Responsive Images with Picturefill">
      <span data-src="img/small.jpg"></span>
      <span data-src="img/mid.jpg"  data-media="(min-width: 481px)"></span>
      <span data-src="img/big.jpg"  data-media="(min-width: 769px)"></span>
      <span data-src="img/wide.jpg"  data-media="(min-width: 1025px)"></span>

 

바로 이어서 폴백 이미지를 지정해 줍니다. 자바스크립트를 지원하지 않는 브라우져에 대비해 사용될 이미지를 지정하는 것입니다.

      <noscript>
         <img src="img/fallback.jpg" alt="Responsive Images with Picturefill">
      </noscript>
</span>