반응형 이미지 기법들

전진

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 13년 전 · 조회 4539 4539 · 댓글 1 1

(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;

= index.php 에서는 쿠키값 ($_COOKIE['device_dimensions'])를 이용해서, 화면크기에 맞는 화일 전송

+ 장점: 다른 방법에 비해서, 한 이미지만 전송

- 단점: 쿠키가 허용된 도메인에, 화면크기에 따른 모든 이미지를 미리 생성해놔야.

2. 모바일 퍼스트 접근방법 1: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

= 아이디어: 기본적으로 모바일용 이미지를 다운받고, 데탑에서는 큰 이미지를 별도로 받도록 유도

= 사용방법

= 적절한 .htaccess와 responsiveimgs.js 이용, 위 이미지 소스를 데탑에서는 큰 이미지로 바꿔짐

+ 장점: 대체 (큰) 이미지를 자유롭게 설정가능

- 단점: 작은 이미지화일은 항상 받음. IE8이하는 작동안함 (즉, 작은 그림만 보여줌), mod_rewrite 허용되어야 함

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

= 아이디어: js 없이, css3의 media-query와 data/attr 기능을 이용, 선택적 큰 이미지 선택

= 사용방법

@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/

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

댓글보기

전진 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 로 판단하는 방법으로 한번 해볼까 합니다. 화일도 간단히 원본, 작은거 이렇게 만 가고요.. ^^;

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

patanus

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

좋은 글 읽고 갑니다.

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1277	기타	이미지 최적화 (WebP/AVIF & Lazy Loading)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	148
1276	CSS	고급 레이아웃(Grid + Flex 혼합 활용)	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	269
1275	CSS	CSS 애니메이션 고급 활용	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2개월 전	268
1274	CSS	픽셀 단위 고정 대신 유연한 단위를 쓰자 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3개월 전	461
1273	기타	트러블슈팅 & 품질 관리 중심	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	400
1272	CSS	SVG를 마치 CSS처럼 활용하기	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	4개월 전	530
1271	CSS	웹폰트 로딩 최적화 [3]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	577
1270	CSS	다크 모드(Dark Mode) 지원을 위한 CSS 전략 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	457
1269	CSS	CSS revert 키워드로 손쉽게 스타일 초기화하기 [1]	선택과집중 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	538
1268	CSS	알러트 모양( 삼각 판넬 안에 느낌표 ) css와 dom으로 만들기	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	5개월 전	427
1267		이미지 갤러리 (직)제작 소스	잠실삼촌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	707
1266	HTML	bootstrap4 grid-item 책갈피 표시	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10개월 전	837
1265	CSS	clamp를 사용하는 경우에 대해서 여쭈어 봅니다. [2]	7reemoon 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	765
1264		파일 입력필드 숨기고 아이콘(폰트어썸)으로 대체	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1256
1263	HTML	textContent는 MOZ의 MDN에서 XSS해킹이 않된다 그러나 다중은 않되요 그러나 해결과 해결할 일	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	790
1262	CSS	Div 를 프레임으로 잡기 tested by w3schools.com	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	994
1261	CSS	기본적인 CSS 사용 태그 [ Site on Base Default - Custom Free ]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1007
1260	HTML	마우스 클릭시 효과음 나오고 마우스에 서클 퍼지는 효과 재미 있네요..	설국열차 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1489
1259	기타	나리야빌더 사용중 페이징중에 바로 이전이나 다음 페이지가 동작이 안되는증상 해결	정후이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	828
1258	CSS	스와이퍼 페이징 커스텀 방법 어떻게 하나요...?? [3]	김성래yo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1585
1257	HTML	input의 팁	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1371
1256	CSS	css 애니메이션 눈 떨어지는 레이아웃(스킨인데 못올리게 해서 여기에다...)	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1272
1255		상업이용 가능한 디자인소스(html, css) 완성 코딩 소스입니다. [16]	샤이닝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3611
1254		<div>을 iframe처럼 만들기 [5]	천사의눈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	4794
1253		radio 버튼 클릭하면 input text 값 넘겨주기 [6]	취뉴비 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1552
1252	레이아웃	아무데서나 쓸수 있는 팝업창 기능 만들어보았습니다. [7]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1784
1251	웹접근성	미니 웹 음악 플레이어 LP player Music (LPM) [12]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2058
1250	레이아웃	이전자료 DLplayer Audio 버전입니다. [19]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1692
1249	레이아웃	웹음악플레이어 (html5 및 자바스크립트 기반) [30]	두리삼촌v 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3215
1248	기타	(html,js,css) javascript alert메서드 자체를 변경하여, 팝업 alert 만들어보기	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1147