반응형이미지 기법

1. 2015.12.16, BAND, 현영배
Responsive
Images

2. • 느린 네트워크
• 반응형 이미지 기법
목차
• 마크업 레벨
• CSS 레벨

3. 느린
네트워크

4. • 1:1 이미지 원본사이즈를 디폴트로 사용하면서 사이즈 기입
• 귀찮아도 2배 사이즈를 줄여서 퉁 치지말자.
느린 네트워크

5. • 포멧 설정 png-8 (컬러수가 256 안에서 표현 가능)
느린 네트워크

6. • 사진 경우 jpg 압축률을 적정 수준에서 최대로 낮출 것
느린 네트워크

7. • jpg 품질 적정 수준 75 근처
느린 네트워크

8. • progressive jpeg 인코딩 설정 저장
느린 네트워크
https://optimus.io/support/progressive-jpeg/

9. • 메타데이터란? (웹에서는 불필요한 정보)
느린 네트워크
JPG 이미지포맷에는 촬영기기의 모델명, 촬영일시, 노출 감도, 편집 프로그램 정보 등 그림데이타 이외의 여러
정보가 남겨집니다.
PNG 이미지포맷 역시 마지막 수정시간, 색상히스토그램, ICC 칼라 프로필, 감마값 등 그림데이타 이외의 여러
정보가 남겨집니다.
이러한 데이타를 흔히 '이미지 메타데이타(Metadata)'라고 부릅니다. 사진편집작업을 할때엔 이러한 정보가 유
용하겠지만 웹서비스 UI에서 사용되는 이미지 파일은 이러한 정보를 필요로 하지 않습니다. 다시말해 불필요한
데이타인 셈이지요.
통상 20KB 정도의 용량을 차지하는 이들 메타데이타를 제거하면 이미지파일 용량이 줄어들어 웹서비스 로딩
속도가 향상될 것입니다.

10. • 메타데이터 삭제(웹에서는 불필요한 정보)
느린 네트워크

11. • 그 외에 webp 무손실 포멧 등 다양한 프레임워크 존재
느린 네트워크
http://googlechrome.github.io/samples/picture-element/images/butterfly.webp

12. • 그래도 느림?
• 그렇다면 사진에 해당하는 jpg가 문제일것이다.
• 고해상도를 요구하는 자포스 같은 쇼핑몰에서는 상품이미지를
이런 꼼수로 사용자 체감을 높였다.
느린 네트워크

13. • 앞단 flow에서 불러왔던 로컬의 이미지 사용.
• 상단 이미지 원본 480px 넓이 -> 1920px로 강제 늘림
느린 네트워크

14. 느린 네트워크
• 그 다음에 원본이 4배인 1920 이미지를 재로딩．

15. 반응형
이미지 기법

16. 반응형 이미지 기법
• 강제 줄임으로 용량과 뷰 최적화 문제
http://codepen.io/design8383/full/OMMeNR/

17. 반응형 이미지 기법
• 최적화 용량은 아니지만 큰이미지로 다양하게 가변폭 가능.
http://clagnut.com/sandbox/imagetest3/

18. 반응형 이미지 기법
• 배경 사이즈로 줄이기
• @media와 병행하여 많이 사용

19. 반응형 이미지 기법
• @media디스플레이 감지
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
http://codepen.io/design8383/full/VeeJJK/

20. 반응형 이미지 기법 > 연구적 사례
• 다양한 @media의 옵션들이 존재함. (네이티브 관련 ex)어두움과
밝음 구분 light-level)
http://www.w3.org/TR/mediaqueries-4/#light-level

21. 반응형 이미지 기법
• 카키오톡 고대비 테마처럼
• Light-level이 dim일 때 검은색 배경의 고대비 스킨 적용할 수 있음.
https://drafts.csswg.org/mediaqueries/#example-046246e3

22. 반응형 이미지 기법
• 배경 사이즈로 줄이기
• @media와 병행하여 많이 사용

23. 반응형 이미지 기법
• srcset
https://dev.opera.com/articles/responsive-images/

24. 반응형 이미지 기법
• imgae-set

25. 반응형 이미지 기법
• Static 이미지는 @media css로
• Map 과 같은 동적 url 이미지는 js로 (현재 지도는 polyfill 사용)

26. 참고 url
png 8 사용
http://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/
jpg
http://m.blog.naver.com/dadam925/80211352279
메타데이터 삭제
http://nuli.navercorp.com/sharing/blog/post/772521
webP
http://nuli.navercorp.com/sharing/blog/post/1132444
http://www.html5rocks.com/ko/tutorials/speed/img-compression/

27. Thanks