SlideShare a Scribd company logo
1 of 19
Download to read offline
반응형 웹 기술 이해 v.2
레티나 디스플레이를 위한
클라이언트 측 이미지 처리 기법
SK planet
Syrup Store개발그룹
정찬명 매니저
반응형 웹 기술 이해
반응형 웹 기술 이해 v.1
http://readme.skplanet.com/
고밀도 해상도를 위한 이미지 처리 기법
주제 선정 이유
모바일 영역 뿐만 아니라 테블릿/데스크톱 영역에
서도 고밀도 디스플레이가 증가함에 따라 이에 대
응할 수 있는 고해상도 이미지 처리 기법 또한 관
심을 가질 필요가 생겼음.
레티나 디스플레이
애플이 iPhone 4에 고해상도 LCD를 적용하면
서 활용했던 마케팅 용어.
망막이 구분할 수 없을 정도로 작은 크기의 화
소와 밀도(over 300 pixel per inch)를 가진 표시
장치.
현재에 이르러 상당수 경쟁사 제품군이 레티나 수준의 디
스플레이를 제공하면서 더 이상 스마트폰 단말의 마케팅
용어로써의 가치는 떨어지는 추세.
레티나 디스플레이
하지만 여전히 고해상도 디스플레이를 언급
할 때 대명사 처럼 쓰인다.
그리고 '1픽셀 = 사각형 점 하나' 라는 기존의
전통적인 픽셀 개념을 파괴했다.
덕분에 픽셀의 정의는 더 혼란스러워 졌다.
픽셀, 무엇이 문제인가?
픽셀은 더 이상 "디지털 화면을 구성하는 가장
작은 점"이라고 말할 수 없게 되었다.
좌: 전통적인 픽셀의 개념 v.s. 우: 레티나 디스플레이의 픽셀 개념.
이미지 출처 - http://goo.gl/JvqKBv
물리 픽셀
논리 픽셀
픽셀의 정의
디바이스 픽셀(=물리 픽셀)
단말이 실제로 표현할 수 있는 물리적인 화소
기본 단위.
CSS 픽셀(=논리 픽셀)
디바이스 픽셀과 무관하게 HTML/CSS 에서
논리적으로 표현할 수 있는 화소 기본 단위.
아이폰 4는 몇 픽셀인가?
640 * 960
디바이스 픽셀(=물리 픽셀)
320 * 480
CSS 픽셀(=논리 픽셀)
레티나 디스플레이, 무엇이 문제인가?
디더링(dithering = anti-aliasing) 효과 때문에 일반 해상도인 96dpi
(CSS dots per inch)에 최적화 된 이미지가 고해상도 192dpi 이상 단말
(iPhone 4+)에서 뭉개지는 현상 발생.
대안1: 다운 샘플링
실제 표현하고자 하는 이미지 크기의 2배수 큰 이미지를 준비
한 다음,
다시 1/2 크기로 강제 축소(HTML resize)하여 제공하는 것.
<img src="a.png" width="200" height="200"> // 원본 이미지
<img src="a.png" width="100" height="100"> // 다운 샘플링
레티나 디스플레이의 이미지 품질 문제를 해결하지만 과도하
게 사용하면 페이지 로드 성능을 떨어뜨리는 문제 발생.
장점: 하나의 소스로 개발하여 구현 및 유지보수 편의.
http://cdpn.io/ravWqR
대안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
http://cdpn.io/YPLVKo
대안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
대안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
대안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
레티나 이미지 대안 비교
레티나 대응
브라우저
호환성
성능
개발편의
유지보수
다운 샘플링 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
현존하는 대안에 대한 고찰
현존하는 모바일 단말의 평균 dpr은 1.9 수준으로 iPhone 4 이
후 상향 평준화 되었음.
dpr 참고 1 - http://mydevice.io/devices/
dpr 참고 2 - http://screensiz.es/phone
웹 사이트가 RWD를 지원하거나 모바일 우선 전략을 취하는
경우 성능에 부담을 주지 않는 수준에서 이미지 다운 샘플링
기법과 @media 기법을 교차 적용하는 것을 고려할 수 있다.
이미지 다운 샘플링 기법은 <img> 요소에 적용하기 적합하고,
@media 기법은 CSS background 속성에 적용하기 적합하다.
결 론
'브라우저 호환성, 성능, 개발 편의 및 유지보수 관점'에서 모든
상황을 만족할만한 하나의 대안은 존재하지 않는다.
전략 1)
<picture> 요소 또는 CSS image-rendering 속성이 표준으로 확
정되고 브라우저 호환성 문제가 해결되기 전까지는 높은 이미
지 품질을 요구하는 경우에만 제한적으로 고해상도 이미지를
적용하는 것이 좋다.
전략 2)
현재로써는 다운 샘플링 기법과 @media 기법 위주로 적용하는
것을 권장할 수 있다.

More Related Content

What's hot

반응형웹디자인 25개 사이트 분석
반응형웹디자인 25개 사이트 분석반응형웹디자인 25개 사이트 분석
반응형웹디자인 25개 사이트 분석leeseungje
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란redribbon1307
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹지수 윤
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
1.openseminar
1.openseminar1.openseminar
1.openseminarNAVER D2
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
개발자가 본 웹디자인
개발자가 본 웹디자인개발자가 본 웹디자인
개발자가 본 웹디자인Jae Nam Jung
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용ChangGyum Kim
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends욱래 김
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향Jonathan Jeon
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망NAVER Engineering
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표Daum DNA
 

What's hot (20)

반응형웹디자인 25개 사이트 분석
반응형웹디자인 25개 사이트 분석반응형웹디자인 25개 사이트 분석
반응형웹디자인 25개 사이트 분석
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란
 
5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹5주 모바일웹과 반응형웹
5주 모바일웹과 반응형웹
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
1.openseminar
1.openseminar1.openseminar
1.openseminar
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
개발자가 본 웹디자인
개발자가 본 웹디자인개발자가 본 웹디자인
개발자가 본 웹디자인
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
Fuse소개
Fuse소개Fuse소개
Fuse소개
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
Responsive web
Responsive webResponsive web
Responsive web
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표
 

Viewers also liked

재사용UI 컴포넌트설계
재사용UI 컴포넌트설계재사용UI 컴포넌트설계
재사용UI 컴포넌트설계지수 윤
 
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]WSConf.
 
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]WSConf.
 
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]WSConf.
 
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]WSConf.
 
Pull reqeust 활용기
Pull reqeust 활용기Pull reqeust 활용기
Pull reqeust 활용기jungseob shin
 
Web UI/UX in the Multi device & Multi Screen Environment
Web UI/UX in the Multi device & Multi Screen EnvironmentWeb UI/UX in the Multi device & Multi Screen Environment
Web UI/UX in the Multi device & Multi Screen EnvironmentJonathan Jeon
 
FIDO 생체인증 기술 개발 사례
FIDO 생체인증 기술 개발 사례FIDO 생체인증 기술 개발 사례
FIDO 생체인증 기술 개발 사례Lee Ji Eun
 
Darum 오픈기념 웹표준 간담회
Darum 오픈기념 웹표준 간담회Darum 오픈기념 웹표준 간담회
Darum 오픈기념 웹표준 간담회Sungmin Jang
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405Nts Nuli
 
응답하라 반응형웹 - 2. 디자인 경량화
응답하라 반응형웹 - 2. 디자인 경량화응답하라 반응형웹 - 2. 디자인 경량화
응답하라 반응형웹 - 2. 디자인 경량화redribbon1307
 
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)Sungmin Jang
 
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]WSConf.
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Youngjo Jang
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향Wonsuk Lee
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrapredribbon1307
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React지수 윤
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는Taegon Kim
 

Viewers also liked (19)

재사용UI 컴포넌트설계
재사용UI 컴포넌트설계재사용UI 컴포넌트설계
재사용UI 컴포넌트설계
 
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]
윤원진 - 반응형웹디자인(RWD)을 위한 넓고 얕은 지식 [WSConf. Seoul 2016]
 
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]
정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]
 
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]
이환 - 이미지는 마크업의 반이다. [WSConf. Seoul 2016/2017]
 
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]
김영욱 - Microsoft Bot Framework [WSConf. Seoul 2017]
 
Pull reqeust 활용기
Pull reqeust 활용기Pull reqeust 활용기
Pull reqeust 활용기
 
Web UI/UX in the Multi device & Multi Screen Environment
Web UI/UX in the Multi device & Multi Screen EnvironmentWeb UI/UX in the Multi device & Multi Screen Environment
Web UI/UX in the Multi device & Multi Screen Environment
 
FIDO 생체인증 기술 개발 사례
FIDO 생체인증 기술 개발 사례FIDO 생체인증 기술 개발 사례
FIDO 생체인증 기술 개발 사례
 
Darum 오픈기념 웹표준 간담회
Darum 오픈기념 웹표준 간담회Darum 오픈기념 웹표준 간담회
Darum 오픈기념 웹표준 간담회
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
 
응답하라 반응형웹 - 2. 디자인 경량화
응답하라 반응형웹 - 2. 디자인 경량화응답하라 반응형웹 - 2. 디자인 경량화
응답하라 반응형웹 - 2. 디자인 경량화
 
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)
워드프레스로 웹 접근성 칭찬받기 (워드프레스 미트업)
 
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]
안형우 - 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017]
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향(2015년 상반기) HTML5 및 Hybrid app 최신 동향
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
Front-End 개발의 괜찮은 선택 ES6 & React
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 

Similar to 반응형 웹 기술 이해 V.2

고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화Byung Ho Lee
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh
 
[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈Neoroid
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법SooHwan Ok
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수NAVER Engineering
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibilityyamoo9
 
AD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxAD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxVisual Tech Dev
 
반응형이미지
반응형이미지반응형이미지
반응형이미지영배 현
 
Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용mosaicnet
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
권기훈_개인포트폴리오
권기훈_개인포트폴리오권기훈_개인포트폴리오
권기훈_개인포트폴리오Kihoon4
 
[2018] 프런트엔드 성능 최적화
[2018] 프런트엔드 성능 최적화[2018] 프런트엔드 성능 최적화
[2018] 프런트엔드 성능 최적화NHN FORWARD
 
NAS_모바일세미나_#2. 라이브포인트
NAS_모바일세미나_#2. 라이브포인트NAS_모바일세미나_#2. 라이브포인트
NAS_모바일세미나_#2. 라이브포인트Heather Park
 
I:o extended'19 incheon flutter&beyond web
I:o extended'19 incheon flutter&beyond webI:o extended'19 incheon flutter&beyond web
I:o extended'19 incheon flutter&beyond web성윤 (Hunt) 조
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로Hosuk Shin
 
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법mosaicnet
 
실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기IMQA
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다yamoo9
 

Similar to 반응형 웹 기술 이해 V.2 (20)

고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈[안드앱콘] 1.다양한스크린사이즈
[안드앱콘] 1.다양한스크린사이즈
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
 
AD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxAD의 TAD와 협업.pptx
AD의 TAD와 협업.pptx
 
반응형이미지
반응형이미지반응형이미지
반응형이미지
 
Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용Bitmap 해상도와 작성 및 적용
Bitmap 해상도와 작성 및 적용
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
권기훈_개인포트폴리오
권기훈_개인포트폴리오권기훈_개인포트폴리오
권기훈_개인포트폴리오
 
[2018] 프런트엔드 성능 최적화
[2018] 프런트엔드 성능 최적화[2018] 프런트엔드 성능 최적화
[2018] 프런트엔드 성능 최적화
 
NAS_모바일세미나_#2. 라이브포인트
NAS_모바일세미나_#2. 라이브포인트NAS_모바일세미나_#2. 라이브포인트
NAS_모바일세미나_#2. 라이브포인트
 
I:o extended'19 incheon flutter&beyond web
I:o extended'19 incheon flutter&beyond webI:o extended'19 incheon flutter&beyond web
I:o extended'19 incheon flutter&beyond web
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로
Application 용량 줄이기 - 플레이윙즈 실적용을 중심으로
 
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
다양한 모바일에서의 호환성 보장과 사이즈 지원 방법
 
실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기실 사례로 보는 고객 디지털 경험 지키기
실 사례로 보는 고객 디지털 경험 지키기
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 

More from Lee Ji Eun

유한 상태 기반의 한국어 형태소 분석기_이상호
유한 상태 기반의 한국어 형태소 분석기_이상호유한 상태 기반의 한국어 형태소 분석기_이상호
유한 상태 기반의 한국어 형태소 분석기_이상호Lee Ji Eun
 
컨텐츠 기반 A/B 테스트 구현 사례
컨텐츠 기반 A/B 테스트 구현 사례 컨텐츠 기반 A/B 테스트 구현 사례
컨텐츠 기반 A/B 테스트 구현 사례 Lee Ji Eun
 
Google AlphaGo, 어떻게 동작할까요?
Google AlphaGo, 어떻게 동작할까요?Google AlphaGo, 어떻게 동작할까요?
Google AlphaGo, 어떻게 동작할까요?Lee Ji Eun
 
납땜하는 개발자 이야기 @Tech판교
납땜하는 개발자 이야기 @Tech판교납땜하는 개발자 이야기 @Tech판교
납땜하는 개발자 이야기 @Tech판교Lee Ji Eun
 
Enterprise Docker
Enterprise DockerEnterprise Docker
Enterprise DockerLee Ji Eun
 
T map network graph_t map spider 프로젝트 at_tech
T map network graph_t map spider 프로젝트 at_techT map network graph_t map spider 프로젝트 at_tech
T map network graph_t map spider 프로젝트 at_techLee Ji Eun
 
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교Lee Ji Eun
 
Deep learning 기반TmapPOI 추천기술개발사례
Deep learning 기반TmapPOI 추천기술개발사례Deep learning 기반TmapPOI 추천기술개발사례
Deep learning 기반TmapPOI 추천기술개발사례Lee Ji Eun
 
SK플래닛_README_마이크로서비스 아키텍처로 개발하기
SK플래닛_README_마이크로서비스 아키텍처로 개발하기SK플래닛_README_마이크로서비스 아키텍처로 개발하기
SK플래닛_README_마이크로서비스 아키텍처로 개발하기Lee Ji Eun
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍Lee Ji Eun
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안Lee Ji Eun
 
세션2 sencha touch 클라우드, sencha.io
세션2 sencha touch 클라우드, sencha.io세션2 sencha touch 클라우드, sencha.io
세션2 sencha touch 클라우드, sencha.ioLee Ji Eun
 
안드로이드 오픈마켓_보안이슈
안드로이드 오픈마켓_보안이슈안드로이드 오픈마켓_보안이슈
안드로이드 오픈마켓_보안이슈Lee Ji Eun
 
모바일광고플랫폼
모바일광고플랫폼모바일광고플랫폼
모바일광고플랫폼Lee Ji Eun
 
20120512 공개sw개발자대회 sk플래닛기업과제소개
20120512 공개sw개발자대회 sk플래닛기업과제소개20120512 공개sw개발자대회 sk플래닛기업과제소개
20120512 공개sw개발자대회 sk플래닛기업과제소개Lee Ji Eun
 

More from Lee Ji Eun (15)

유한 상태 기반의 한국어 형태소 분석기_이상호
유한 상태 기반의 한국어 형태소 분석기_이상호유한 상태 기반의 한국어 형태소 분석기_이상호
유한 상태 기반의 한국어 형태소 분석기_이상호
 
컨텐츠 기반 A/B 테스트 구현 사례
컨텐츠 기반 A/B 테스트 구현 사례 컨텐츠 기반 A/B 테스트 구현 사례
컨텐츠 기반 A/B 테스트 구현 사례
 
Google AlphaGo, 어떻게 동작할까요?
Google AlphaGo, 어떻게 동작할까요?Google AlphaGo, 어떻게 동작할까요?
Google AlphaGo, 어떻게 동작할까요?
 
납땜하는 개발자 이야기 @Tech판교
납땜하는 개발자 이야기 @Tech판교납땜하는 개발자 이야기 @Tech판교
납땜하는 개발자 이야기 @Tech판교
 
Enterprise Docker
Enterprise DockerEnterprise Docker
Enterprise Docker
 
T map network graph_t map spider 프로젝트 at_tech
T map network graph_t map spider 프로젝트 at_techT map network graph_t map spider 프로젝트 at_tech
T map network graph_t map spider 프로젝트 at_tech
 
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교
FIDO기반 생체인식 인증기술_SK플래닛@tech세미나판교
 
Deep learning 기반TmapPOI 추천기술개발사례
Deep learning 기반TmapPOI 추천기술개발사례Deep learning 기반TmapPOI 추천기술개발사례
Deep learning 기반TmapPOI 추천기술개발사례
 
SK플래닛_README_마이크로서비스 아키텍처로 개발하기
SK플래닛_README_마이크로서비스 아키텍처로 개발하기SK플래닛_README_마이크로서비스 아키텍처로 개발하기
SK플래닛_README_마이크로서비스 아키텍처로 개발하기
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
 
세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안세션3 node.js의 의미와 자바의 대안
세션3 node.js의 의미와 자바의 대안
 
세션2 sencha touch 클라우드, sencha.io
세션2 sencha touch 클라우드, sencha.io세션2 sencha touch 클라우드, sencha.io
세션2 sencha touch 클라우드, sencha.io
 
안드로이드 오픈마켓_보안이슈
안드로이드 오픈마켓_보안이슈안드로이드 오픈마켓_보안이슈
안드로이드 오픈마켓_보안이슈
 
모바일광고플랫폼
모바일광고플랫폼모바일광고플랫폼
모바일광고플랫폼
 
20120512 공개sw개발자대회 sk플래닛기업과제소개
20120512 공개sw개발자대회 sk플래닛기업과제소개20120512 공개sw개발자대회 sk플래닛기업과제소개
20120512 공개sw개발자대회 sk플래닛기업과제소개
 

반응형 웹 기술 이해 V.2

  • 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 에서 논리적으로 표현할 수 있는 화소 기본 단위.
  • 8. 아이폰 4는 몇 픽셀인가? 640 * 960 디바이스 픽셀(=물리 픽셀) 320 * 480 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 기법 위주로 적용하는 것을 권장할 수 있다.