반응형 이미지 기법들
반응형 이미지 (responsive image)는 반응형 웹 디자인의 큰 부분을 차지하는 개념 및 기법이라 생각됩니다.
반응형 웹 디자인과 마찬가지로, 모바일과 데스크탑의 스크린 크기에 어떻게 대응하는가 하는 것과
실제 전송되는 화일의 크기와 내용을 어떻게 달리 할까라는 보다 실용적인 문제 등이 있는것 같습니다.
아마 첫번째는 클라이언트쪽에서 처리를 하고, 두번째는 서버쪽에서 처리를 해야 하지 않을까 합니다.
이번에 제가 관심을 가졌던 분야는, 이미지 화일을 선택적으로 사용하도록 하는 기법들입니다.
즉, 데탑에서 사용하는 이미지화일과 모바일에서 사용하는 이미지화일들을 선택적으로 사용하는 방법이죠.
참고로 아직 테스트 해보지는 못했습니다. ^^;
1. 쿠키를 이용한 선택적 이미지 화일 제공 기법: http://blog.keithclark.co.uk/responsive-images-using-cookies/
= 아이디어: 이미지 폴더 (/image)에 쿠기값을 이용하여 이미지 화일을 선택하는 index.php 저장
= 사용방법
document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;
<img src="images/?test.png">
= index.php 에서는 쿠키값 ($_COOKIE['device_dimensions'])를 이용해서, 화면크기에 맞는 화일 전송
+ 장점: 다른 방법에 비해서, 한 이미지만 전송
- 단점: 쿠키가 허용된 도메인에, 화면크기에 따른 모든 이미지를 미리 생성해놔야.
2. 모바일 퍼스트 접근방법 1: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
= 아이디어: 기본적으로 모바일용 이미지를 다운받고, 데탑에서는 큰 이미지를 별도로 받도록 유도
= 사용방법
<img src="images/test.png?full=images/test-full.png">
= 적절한 .htaccess와 responsiveimgs.js 이용, 위 이미지 소스를 데탑에서는 큰 이미지로 바꿔짐
+ 장점: 대체 (큰) 이미지를 자유롭게 설정가능
- 단점: 작은 이미지화일은 항상 받음. IE8이하는 작동안함 (즉, 작은 그림만 보여줌), mod_rewrite 허용되어야 함
= 아이디어: js 없이, css3의 media-query와 data/attr 기능을 이용, 선택적 큰 이미지 선택
= 사용방법
<img src="image.png" data-src-600px="image-600px.png">
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
} + 장점: js 불필요
- 단점: 역시 작은 이미지는 항상 받음. css3 지원하지 않는 브라우져 지원 안함.
이밖에 Sench.io를 사용하는 방법도 있겠죠. 그리고 video인 경우 max-width:100%로 완전히 처리되지 않는 경우의 팁도 있네요. (링크)
그밖에 다른 방법을 알고 계시는 분들도 같이 나눠보아요. :)
* 위 내용은, 스매싱매거진 글에서 가져왔습니다. http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
반응형 이미지 이외에, 반응형 웹 디자인 관련 기법들도 많이 있네요..
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 8개
원글: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
제 블로그: http://blog.gnuboard.org/2012/04/media-query-image-downloads/
결론적으로, background-image 의 부모 태그에 display:none 을 적용하면, 거의 모든 (모바일) 웹 브라우져에서 해당 백그라운드 이미지를 다운로드 하지 않는다고 합니다. :)
야비군 와서리 ㅎㅎㅎ
전진님 계신 곳이 독일이신가요??
그나저나 user agent 이용하는 것에 대해서 많이들 꺼려하던데..
1번 방법에 ua 이용하는 식으로 접근할까 합니다. ^^
예, 독일입니다. ^^
프로토타입을 만들어보면서 생각을 정리해봐야 될 것 같아요.
감사합니다.
css3 나 jquery 등을 안쓰면서, 서버쪽에 특별한 설정을 하지 않는 방법이 있으면 좋겠는데 말이죠..
저는 일단, 위에서 말씀드린대로, 1번 방법 (image 폴더에 index.php가 알아서 선택해서 보내주는 방법) 에서 쿠키대신 user agent 로 판단하는 방법으로 한번 해볼까 합니다. 화일도 간단히 원본, 작은거 이렇게 만 가고요.. ^^;