SlideShare une entreprise Scribd logo
1  sur  55
Télécharger pour lire hors ligne
Introduce
Guetzli
Guetzli [guɛtsli] 스위스어로 쿠키라는 뜻을 가지고
있으며 구에츨리라고 발음
Google에서 C++ 기반으로 개발한
JPEG 인코더로 2016년 10월 22일에
최초 릴리즈했으며 2 0 1 7 년 3 월
Google Research Blog에 소개되면서
한국에 알려지기 시작
라이센스는 Apache Licnese 2.0
이미지 품질을 크게 떨어뜨리지 않으면서
널리 사용되고 있는 libjpeg 보다
20 ~ 30% 더 용량을 줄일 수 있으셈
libjpeg, 많은 개발자에게 친숙한 라이브러리로 ImageMagick에서 JPEG을 조작할 때 사용되고 있다.
JPEGand
https://ko.wikipedia.org/wiki/WebP
https://ko.wikipedia.org/wiki/JPEG
Original libjpeg Guetzli
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
Original libjpeg Guetzli
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
Let’s TEST
$ brew install guetzli
How to install on macOS
$ guetzli [--quality Q] [--verbose] original.png output.jpg
How to use
$ guetzli --quality 84 --verbose original.jpeg guetzli.jpeg
Quality is only allowed to be greater than 84
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
Guetzli
Q95
925KB
57%
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
Guetzli
Q95
925KB
57%
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
Guetzli
Q95
925KB
57%
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
Guetzli
Q95
1.2MB
58%
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
Guetzli
Q95
1.2MB
58%
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
Guetzli
Q95
1.2MB
58%
JPEGmini Guetzli Q95
But
https://davidwalsh.name/jpeg-compression-guetzli
https://davidwalsh.name/jpeg-compression-guetzli
Why is it so slow?
JPEG ISO와 ITU-T의 합동 작업 그룹인
합동사진전문가단체에서 1992년에
제정한 정지된 이미지를 위해 만든
손실 압축 방법 표준 중 하나.
손실 압축 형식이지만 파일 크기가 작기
때문에 웹에서 널리 사용하고 있다
Joint Photographic Experts Group
https://en.wikipedia.org/wiki/JPEG
http://www.fileformat.info/mirror/egff/ch09_06.htm
Multi-stage Compression Process
http://www.fileformat.info/mirror/egff/ch09_06.htm
1. 색상 공간 변환
Multi-stage Compression Process
RED
GREEN
BLUE
Y - Luminance
Cb - Blueness
Cr - Redness
http://www.fileformat.info/mirror/egff/ch09_06.htm
2. 다운샘플링 색차 정보
Multi-stage Compression Process
Y Cb Cr
4:4:4
4:2:2
4:1:1
Y Cb Cr
Y
Y
Cb Cr
Cb
Cr
4:4:4
4:2:2
4:1:1
http://www.fileformat.info/mirror/egff/ch09_06.htm
3. 이산 코사인 변환
Multi-stage Compression Process
http://www.fileformat.info/mirror/egff/ch09_06.htm
4. 양자화
Multi-stage Compression Process
http://www.fileformat.info/mirror/egff/ch09_06.htm
5. 부호화
Multi-stage Compression Process
https://www.youtube.com/watch?v=qys8R_3H-kc
Guetzli specifically targets the quantization stage
in which the more visual quality loss is introduced,
the smaller the resulting file.
Psychovisual modeling of JPEG's format
https://github.com/google/butteraugli
Psychovisual modeling of JPEG's format
https://github.com/google/butteraugli
Search Algorithms
Psychovisual modeling of JPEG's format
Guetzli’s psychovisual model +
(butteraugli)
https://github.com/google/butteraugli
Search Algorithms
Psychovisual modeling of JPEG's format
Guetzli’s psychovisual model +
(butteraugli)
https://github.com/google/butteraugli
Very slow
Search Algorithms
Psychovisual modeling of JPEG's format
Guetzli’s psychovisual model +
(butteraugli)
https://github.com/google/butteraugli
Very slow
But image can get high quality and smaller file sizes
We think this makes the slower compression a worthy tradeoff
“
”
Ideas
Background
Background
Background
Background
Background
Background
Background
Overwrite
또, 너무 느리기 때문에 자칫 하루종일 프로세스가 돌아갈 위험도 있음
하지만 Guetzli 약 1 메가 픽셀을 압축 시 300MB의 메모리 공간 필요
따라서 트래픽 비용 절감으로 얻는 수익과 고사양 머신 운영으로
지불해야 할 비용을 정량적으로 조사해 비판적으로 바라볼 필요가 있음
http://qiita.com/yohhoy/items/406af27d4415c7bb6346
http://co.bsnws.net/article/206
http://japanese.engadget.com/2017/03/17/google-jpeg-guetzli-35/
http://qiita.com/bezeklik/items/95449c9dd79c70bf8771
함께 보면 좋은 글(일본어)
https://ko.wikipedia.org/wiki/JPEG
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
https://en.wikipedia.org/wiki/JPEG
http://www.fileformat.info/mirror/egff/ch09_06.htm
https://medium.freecodecamp.com/how-jpg-works-a4dbd2316f35
참고자료
감사합니다.

Contenu connexe

Similaire à Introduce Guetzli

장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초Kwangyoun Jung
 
Python을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop ApplicationPython을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop ApplicationUbuntu Korea Community
 
KGC10 - Visual C++10과 디버깅
KGC10 - Visual C++10과 디버깅KGC10 - Visual C++10과 디버깅
KGC10 - Visual C++10과 디버깅흥배 최
 
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?JeongHun Byeon
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)Ildoo Kim
 
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101)
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101) 모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101)
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101) YoungSu Son
 
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기Jaeseung Ha
 
[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5thPark Jonggun
 
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬Joohyun Han
 
Optimizing the graphics_pipeline_
Optimizing the graphics_pipeline_Optimizing the graphics_pipeline_
Optimizing the graphics_pipeline_ozlael ozlael
 
[Nomad connection]docker seminar 15.10.08
[Nomad connection]docker seminar 15.10.08[Nomad connection]docker seminar 15.10.08
[Nomad connection]docker seminar 15.10.08Nomad Connection, Inc.
 
Image Deep Learning 실무적용
Image Deep Learning 실무적용Image Deep Learning 실무적용
Image Deep Learning 실무적용Youngjae Kim
 
200720 바이오협회 생물정보학 파이썬 강의
200720 바이오협회 생물정보학 파이썬 강의 200720 바이오협회 생물정보학 파이썬 강의
200720 바이오협회 생물정보학 파이썬 강의 Joohyun Han
 
디자이너 버전관리
디자이너 버전관리디자이너 버전관리
디자이너 버전관리Hailey Lee
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebHanboramRobinJang
 

Similaire à Introduce Guetzli (20)

장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
 
Python을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop ApplicationPython을 이용한 Linux Desktop Application
Python을 이용한 Linux Desktop Application
 
About garbage collection
About garbage collectionAbout garbage collection
About garbage collection
 
KGC10 - Visual C++10과 디버깅
KGC10 - Visual C++10과 디버깅KGC10 - Visual C++10과 디버깅
KGC10 - Visual C++10과 디버깅
 
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
당근 개발자 플랫폼은 어떤 문제를 해결하고 있는가?
 
Modern android
Modern androidModern android
Modern android
 
Git lecture2
Git lecture2Git lecture2
Git lecture2
 
[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)[17.02.09] Github introduction (Korean Version)
[17.02.09] Github introduction (Korean Version)
 
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101)
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101) 모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101)
모바일 앱 성능 분석 방법 101 (Mobile Application Performance Analysis Methodology 101)
 
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
NDC2018 안드로이드+유니티 네이티브 프로파일링 삽질기
 
[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th[IoT] MAKE with Open H/W + Node.JS - 5th
[IoT] MAKE with Open H/W + Node.JS - 5th
 
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬
200718 덕성여대 생물정보학 강의 :: 생물정보학 파이썬
 
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
 
Optimizing the graphics_pipeline_
Optimizing the graphics_pipeline_Optimizing the graphics_pipeline_
Optimizing the graphics_pipeline_
 
[Nomad connection]docker seminar 15.10.08
[Nomad connection]docker seminar 15.10.08[Nomad connection]docker seminar 15.10.08
[Nomad connection]docker seminar 15.10.08
 
Image Deep Learning 실무적용
Image Deep Learning 실무적용Image Deep Learning 실무적용
Image Deep Learning 실무적용
 
200720 바이오협회 생물정보학 파이썬 강의
200720 바이오협회 생물정보학 파이썬 강의 200720 바이오협회 생물정보학 파이썬 강의
200720 바이오협회 생물정보학 파이썬 강의
 
Django beginning
Django beginningDjango beginning
Django beginning
 
디자이너 버전관리
디자이너 버전관리디자이너 버전관리
디자이너 버전관리
 
I/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in WebI/O Extended 2019 Seoul - What's New in Web
I/O Extended 2019 Seoul - What's New in Web
 

Plus de 우영 주

스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리우영 주
 
스트리밍과 플레이어
스트리밍과 플레이어스트리밍과 플레이어
스트리밍과 플레이어우영 주
 
프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음우영 주
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법우영 주
 
스코프와 실행문맥
스코프와 실행문맥스코프와 실행문맥
스코프와 실행문맥우영 주
 
좋은 기능을 만드는 방법
좋은 기능을 만드는 방법좋은 기능을 만드는 방법
좋은 기능을 만드는 방법우영 주
 
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법우영 주
 
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!우영 주
 
BEM을 깨우치다.
BEM을 깨우치다.BEM을 깨우치다.
BEM을 깨우치다.우영 주
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises우영 주
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 우영 주
 
명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI우영 주
 
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기우영 주
 
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)우영 주
 
Javascript Test Double Sinon.js
Javascript Test Double Sinon.jsJavascript Test Double Sinon.js
Javascript Test Double Sinon.js우영 주
 
HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.우영 주
 
이클립스로 GIT 사용하기
이클립스로 GIT 사용하기이클립스로 GIT 사용하기
이클립스로 GIT 사용하기우영 주
 

Plus de 우영 주 (19)

스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리스트리밍과 디지털 권리 관리
스트리밍과 디지털 권리 관리
 
스트리밍과 플레이어
스트리밍과 플레이어스트리밍과 플레이어
스트리밍과 플레이어
 
프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음프런트엔드개발, 지금과 다음
프런트엔드개발, 지금과 다음
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법아재가 젊은이에게 사랑받는 마크업을 하는 방법
아재가 젊은이에게 사랑받는 마크업을 하는 방법
 
스코프와 실행문맥
스코프와 실행문맥스코프와 실행문맥
스코프와 실행문맥
 
좋은 기능을 만드는 방법
좋은 기능을 만드는 방법좋은 기능을 만드는 방법
좋은 기능을 만드는 방법
 
서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법서비스를 성공적으로 만드는 방법
서비스를 성공적으로 만드는 방법
 
다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!다함께, FluxUtils 한바퀴!
다함께, FluxUtils 한바퀴!
 
BEM을 깨우치다.
BEM을 깨우치다.BEM을 깨우치다.
BEM을 깨우치다.
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI명세부터 깨우치는 FILEAPI
명세부터 깨우치는 FILEAPI
 
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기
 
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
 
Javascript Test Double Sinon.js
Javascript Test Double Sinon.jsJavascript Test Double Sinon.js
Javascript Test Double Sinon.js
 
LESS와 EMMET
LESS와 EMMETLESS와 EMMET
LESS와 EMMET
 
HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.HTML5 BOILERPLATE를 소개합니다.
HTML5 BOILERPLATE를 소개합니다.
 
이클립스로 GIT 사용하기
이클립스로 GIT 사용하기이클립스로 GIT 사용하기
이클립스로 GIT 사용하기
 

Introduce Guetzli