1. 반응형 웹 기술 이해 v.2
레티나 디스플레이를 위한
클라이언트 측 이미지 처리 기법
SK planet
Syrup Store개발그룹
정찬명 매니저
2. 반응형 웹 기술 이해
반응형 웹 기술 이해 v.1
http://readme.skplanet.com/
3. 고밀도 해상도를 위한 이미지 처리 기법
주제 선정 이유
모바일 영역 뿐만 아니라 테블릿/데스크톱 영역에
서도 고밀도 디스플레이가 증가함에 따라 이에 대
응할 수 있는 고해상도 이미지 처리 기법 또한 관
심을 가질 필요가 생겼음.
4. 레티나 디스플레이
애플이 iPhone 4에 고해상도 LCD를 적용하면
서 활용했던 마케팅 용어.
망막이 구분할 수 없을 정도로 작은 크기의 화
소와 밀도(over 300 pixel per inch)를 가진 표시
장치.
현재에 이르러 상당수 경쟁사 제품군이 레티나 수준의 디
스플레이를 제공하면서 더 이상 스마트폰 단말의 마케팅
용어로써의 가치는 떨어지는 추세.
5. 레티나 디스플레이
하지만 여전히 고해상도 디스플레이를 언급
할 때 대명사 처럼 쓰인다.
그리고 '1픽셀 = 사각형 점 하나' 라는 기존의
전통적인 픽셀 개념을 파괴했다.
덕분에 픽셀의 정의는 더 혼란스러워 졌다.
6. 픽셀, 무엇이 문제인가?
픽셀은 더 이상 "디지털 화면을 구성하는 가장
작은 점"이라고 말할 수 없게 되었다.
좌: 전통적인 픽셀의 개념 v.s. 우: 레티나 디스플레이의 픽셀 개념.
이미지 출처 - http://goo.gl/JvqKBv
물리 픽셀
논리 픽셀
7. 픽셀의 정의
디바이스 픽셀(=물리 픽셀)
단말이 실제로 표현할 수 있는 물리적인 화소
기본 단위.
CSS 픽셀(=논리 픽셀)
디바이스 픽셀과 무관하게 HTML/CSS 에서
논리적으로 표현할 수 있는 화소 기본 단위.
9. 레티나 디스플레이, 무엇이 문제인가?
디더링(dithering = anti-aliasing) 효과 때문에 일반 해상도인 96dpi
(CSS dots per inch)에 최적화 된 이미지가 고해상도 192dpi 이상 단말
(iPhone 4+)에서 뭉개지는 현상 발생.
10. 대안1: 다운 샘플링
실제 표현하고자 하는 이미지 크기의 2배수 큰 이미지를 준비
한 다음,
다시 1/2 크기로 강제 축소(HTML resize)하여 제공하는 것.
<img src="a.png" width="200" height="200"> // 원본 이미지
<img src="a.png" width="100" height="100"> // 다운 샘플링
레티나 디스플레이의 이미지 품질 문제를 해결하지만 과도하
게 사용하면 페이지 로드 성능을 떨어뜨리는 문제 발생.
장점: 하나의 소스로 개발하여 구현 및 유지보수 편의.
12. 대안2: image-rendering [draft]
CSS WD(Working Draft) 속성 중 하나로써 이미지 디더링(안티
알리어싱)을 강제로 금지시키는 속성을 적용하여 이미지 품질
을 다소 개선할 수 있음.
.x { image-rendering : crisp-edges; }
그러나 2015-02 현재 모바일 단말 중 iPhone 5+ 사파리 브라우
저만 지원 됨.
표준 정보 1 - http://dev.w3.org/csswg/css-images-3/#valdef-image-rendering-crisp-edges
표준 정보 2 - https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
호환성 정보 - http://caniuse.com/#search=image-rendering
14. 대안3: retina.js
이미지 원본과 함께 두 배 큰 이미지를 서버에 미리 업로드해
놓고 JS를 통해 사용자 단말의 dpr(devicePixelRatio, device
pixel/css pixel) 값을 구한다. 사용자 단말 dpr이 1을 초과하는 경
우 HTML/CSS 코드를 변경하여 고해상도 이미지를 표시한다.
abc.png // default image
abc@2x.png // if ( devicePixelRatio > 1 )
이 방식의 단점은 레티나 단말에서 두 개의 이미지를 모두 요
청한다는 점이다. 페이지 로딩 성능 저하 문제 발생.
retina.js - https://github.com/imulus/retinajs
15. 대안4: @media
.x { background:url(x1.png); }
@media (min-resolution:192dpi){
.x { background:url(x2.png); }
}
인치당 CSS 픽셀 수가 192개를 넘어가면 x2.png 이미지를 배경
으로 표시. 이미지를 중복 요청하지 않음.
표준 정보 - http://www.w3.org/TR/css3-mediaqueries/#resolution
호환성 정보 - http://caniuse.com/#feat=css-media-resolution
respond.js - https://github.com/scottjehl/Respond
16. 대안5: <picture> [draft]
<picture>
<source media="(min-resolution:192dpi)" srcset="2x.png">
<img src="x1.png">
</picture>
인치당 CSS 픽셀 수가 192개를 넘어가면 x2.png 이미지를 표
시. 이미지를 중복 요청하지 않음. 2015-02 현재 크롬과 오페라
브라우저만 지원.
표준 정보 - http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
호환성 정보 - http://caniuse.com/#search=picture
picturefill - https://github.com/scottjehl/picturefill
17. 레티나 이미지 대안 비교
레티나 대응
브라우저
호환성
성능
개발편의
유지보수
다운 샘플링 O O X O
image-rendering △ X O O
retina.js O O X X
@media O O O X
<picture> O X O X
18. 현존하는 대안에 대한 고찰
현존하는 모바일 단말의 평균 dpr은 1.9 수준으로 iPhone 4 이
후 상향 평준화 되었음.
dpr 참고 1 - http://mydevice.io/devices/
dpr 참고 2 - http://screensiz.es/phone
웹 사이트가 RWD를 지원하거나 모바일 우선 전략을 취하는
경우 성능에 부담을 주지 않는 수준에서 이미지 다운 샘플링
기법과 @media 기법을 교차 적용하는 것을 고려할 수 있다.
이미지 다운 샘플링 기법은 <img> 요소에 적용하기 적합하고,
@media 기법은 CSS background 속성에 적용하기 적합하다.
19. 결 론
'브라우저 호환성, 성능, 개발 편의 및 유지보수 관점'에서 모든
상황을 만족할만한 하나의 대안은 존재하지 않는다.
전략 1)
<picture> 요소 또는 CSS image-rendering 속성이 표준으로 확
정되고 브라우저 호환성 문제가 해결되기 전까지는 높은 이미
지 품질을 요구하는 경우에만 제한적으로 고해상도 이미지를
적용하는 것이 좋다.
전략 2)
현재로써는 다운 샘플링 기법과 @media 기법 위주로 적용하는
것을 권장할 수 있다.