이전
목록
다음
전

반응형 이미지 기법들

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-09-06 (목) 21:44:27 · 3768
(HTMLn/CSSn 게시판이 사라질 예정이어서, 여기로 옮깁니다. 12-09-06)

  • 원글정보: 작성일시 2012.04.24 00:42:20
  • 조회 471
  • 댓글 7


반응형 이미지 (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'])를 이용해서, 화면크기에 맞는 화일 전송

  + 장점: 다른 방법에 비해서, 한 이미지만 전송
  - 단점: 쿠키가 허용된 도메인에, 화면크기에 따른 모든 이미지를 미리 생성해놔야.


  = 아이디어: 기본적으로 모바일용 이미지를 다운받고, 데탑에서는 큰 이미지를 별도로 받도록 유도
  = 사용방법
     <img src="images/test.png?full=images/test-full.png"> 
  = 적절한 .htaccess와 responsiveimgs.js 이용, 위 이미지 소스를 데탑에서는 큰 이미지로 바꿔짐

  + 장점: 대체 (큰) 이미지를 자유롭게 설정가능
  - 단점: 작은 이미지화일은 항상 받음. IE8이하는 작동안함 (즉, 작은 그림만 보여줌), mod_rewrite 허용되어야 함

3. 모바일 퍼스트 접근방법 2: http://nicolasgallagher.com/responsive-images-using-css3/

  = 아이디어: 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%로 완전히 처리되지 않는 경우의 팁도 있네요. (링크)

그밖에 다른 방법을 알고 계시는 분들도 같이 나눠보아요. :)


반응형 이미지 이외에, 반응형 웹 디자인 관련 기법들도 많이 있네요..

   

댓글보기        

            전진 2012.04.24 08:20:05       

                                    display:none 으로 이미지를 선택적으로 다운로딩 할 수 있는지 실험해본 결과가 꽤 유용해 보입니다.
원글: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
제 블로그: http://blog.gnuboard.org/2012/04/media-query-image-downloads/

결론적으로, background-image 의 부모 태그에 display:none 을 적용하면, 거의 모든 (모바일) 웹 브라우져에서 해당 백그라운드 이미지를 다운로드 하지 않는다고 합니다. :)                   

        
            지운아빠 2012.04.24 09:16:21       

                                    오 집에 가면 뜯어봐야겠네요
야비군 와서리 ㅎㅎㅎ
전진님 계신 곳이 독일이신가요??                   

        
            지운아빠 2012.04.24 11:10:47       

                                    모두 일장일단이 있는데 단점들이 그러려니 하기엔 간단치가 않네요. ㅠ                   

        
            전진 2012.04.24 15:19:49       

                                    그렇죠? ^^;
그나저나 user agent 이용하는 것에 대해서 많이들 꺼려하던데..
1번 방법에 ua 이용하는 식으로 접근할까 합니다. ^^

예, 독일입니다. ^^                   

        
            지운아빠 2012.04.24 22:36:19       

                                    네. 깊이 있게 살펴보고 얻은 생각은 아니고 수박 겉핥기 식으로 아 이러면 이런게 불편하지 않을까 라는 지레짐작으로 얻은 생각이에요.
프로토타입을 만들어보면서 생각을 정리해봐야 될 것 같아요.
감사합니다.                   

        
            전진 2012.04.25 02:17:44       

                                    아.. 저도 지운아빠님과 동감한다는 뜻이었습니다. ^^
css3 나 jquery 등을 안쓰면서, 서버쪽에 특별한 설정을 하지 않는 방법이 있으면 좋겠는데 말이죠..

저는 일단, 위에서 말씀드린대로, 1번 방법 (image 폴더에 index.php가 알아서 선택해서 보내주는 방법) 에서 쿠키대신 user agent 로 판단하는 방법으로 한번 해볼까 합니다. 화일도 간단히 원본, 작은거 이렇게 만 가고요.. ^^;                   

#퍼블리셔팁 #퍼블리셔 #팁자료실
글쓰기
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-07-14 조회 5,481
13-07-14 조회 5,444
13-07-14 조회 4,753
13-07-14 조회 4,346
13-07-14 조회 4,213
13-07-14 조회 4,264
13-07-14 조회 4,996
13-07-14 조회 4,708
13-07-14 조회 4,414
13-07-14 조회 5,460
13-07-14 조회 5,352
13-07-14 조회 5,116
13-07-14 조회 4,852
13-07-14 조회 5,533
13-07-13 조회 3,792
13-07-01 조회 5,807
13-07-01 조회 5,887
13-07-01 조회 3,984
13-07-01 조회 5,490
13-05-27 조회 4,052
13-05-21 조회 5,109
13-05-02 조회 1만
13-04-29 조회 5,283
13-04-15 조회 5,523
13-04-13 조회 6,461
13-02-27 조회 4,178
13-02-26 조회 6,556
13-02-12 조회 5,326
13-02-01 조회 2.4만
13-01-23 조회 3,603
13-01-09 조회 8,094
13-01-07 조회 5,005
13-01-07 조회 3,747
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,452
12-12-27 조회 4,581
12-12-27 조회 4,270
12-12-27 조회 8,946
12-12-18 조회 3,759
12-12-12 조회 3,797
12-12-12 조회 6,817
12-12-12 조회 8,234
12-12-05 조회 5,535
12-12-01 조회 6,844
12-11-22 조회 4,773
12-11-09 조회 5,609
12-11-09 조회 7,658
12-10-29 조회 4,876
12-10-16 조회 6,410
12-10-09 조회 5,503
12-09-02 조회 4,602
12-09-01 조회 3,710
12-08-30 조회 4,375
12-08-30 조회 4,377
12-08-28 조회 3,713
12-08-21 조회 7,273
12-08-20 조회 3,803
12-08-18 조회 5,217
12-08-18 조회 3,585
12-08-11 조회 3,743
12-08-09 조회 3,910
12-08-07 조회 3,888
12-08-07 조회 4,472
12-08-01 조회 4,734
12-08-01 조회 4,618
12-07-20 조회 9,982
12-07-17 조회 4,335
12-07-15 조회 4,106
12-07-10 조회 4,372
12-07-09 조회 7,090
12-07-05 조회 3,424
12-07-04 조회 3,556
12-06-30 조회 5,811
12-06-28 조회 3,901
12-06-20 조회 4,075
12-06-16 조회 3,371
12-06-14 조회 4,021
12-06-07 조회 4,042
12-06-06 조회 6,401
12-05-27 조회 4,619
12-05-25 조회 3,365
12-05-25 조회 3,203
12-05-24 조회 3,297
12-05-24 조회 4,646
12-05-23 조회 4,066
12-05-22 조회 6,642
12-05-15 조회 4,161
12-05-15 조회 3,717
12-05-14 조회 3,154
12-05-12 조회 3,613
12-05-11 조회 7,105
12-05-07 조회 4,552
12-04-28 조회 3,742
12-04-25 조회 5,391
12-04-15 조회 3,975
12-04-12 조회 4,824
12-04-11 조회 3,583
12-04-08 조회 3,434
12-03-21 조회 6,484
글쓰기