Introduce Guetzli
-
Upload
- -
Category
Engineering
-
view
226 -
download
1
Transcript of Introduce Guetzli
![Page 1: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/1.jpg)
IntroduceGuetzli
![Page 2: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/2.jpg)
Guetzli [guɛtsli] 스위스어로 쿠키라는 뜻을 가지고 있으며 구에츨리라고 발음
Google에서 C++ 기반으로 개발한 JPEG 인코더로 2016년 10월 22일에 최초 릴리즈했으며 2 0 1 7 년 3 월 Google Research Blog에 소개되면서 한국에 알려지기 시작
라이센스는 Apache Licnese 2.0
![Page 3: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/3.jpg)
이미지 품질을 크게 떨어뜨리지 않으면서 널리 사용되고 있는 libjpeg 보다
20 ~ 30% 더 용량을 줄일 수 있으셈
libjpeg, 많은 개발자에게 친숙한 라이브러리로 ImageMagick에서 JPEG을 조작할 때 사용되고 있다.
![Page 4: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/4.jpg)
JPEGand
https://ko.wikipedia.org/wiki/WebP
https://ko.wikipedia.org/wiki/JPEG
![Page 5: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/5.jpg)
Original libjpeg Guetzli
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
![Page 6: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/6.jpg)
Original libjpeg Guetzli
https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
![Page 7: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/7.jpg)
Let’s TEST
![Page 8: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/8.jpg)
$ 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
![Page 9: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/9.jpg)
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
GuetzliQ95
925KB57%
![Page 10: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/10.jpg)
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
GuetzliQ95
925KB57%
![Page 11: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/11.jpg)
2.2MB 952KB
Original JPEGmini Guetzli
706KB
Q90
56% 67%
GuetzliQ95
925KB57%
![Page 12: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/12.jpg)
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
GuetzliQ95
1.2MB58%
![Page 13: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/13.jpg)
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
GuetzliQ95
1.2MB58%
![Page 14: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/14.jpg)
2.9MB 1.2MB
Original JPEGmini Guetzli
897KB
Q90
58% 69%
GuetzliQ95
1.2MB58%
![Page 15: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/15.jpg)
JPEGmini Guetzli Q95
![Page 16: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/16.jpg)
But
![Page 17: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/17.jpg)
https://davidwalsh.name/jpeg-compression-guetzli
![Page 18: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/18.jpg)
https://davidwalsh.name/jpeg-compression-guetzli
![Page 19: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/19.jpg)
Why is it so slow?
![Page 20: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/20.jpg)
JPEG I SO와 ITU-T의 합동 작업 그룹인 합동사진전문가단체에서 1992년에 제정한 정지된 이미지를 위해 만든 손실 압축 방법 표준 중 하나.
손실 압축 형식이지만 파일 크기가 작기 때문에 웹에서 널리 사용하고 있다
Joint Photographic Experts Group
https://en.wikipedia.org/wiki/JPEG
![Page 21: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/21.jpg)
![Page 22: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/22.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
Multi-stage Compression Process
![Page 23: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/23.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
1. 색상 공간 변환
Multi-stage Compression Process
![Page 24: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/24.jpg)
RED
GREEN
BLUE
Y - Luminance
Cb - Blueness
Cr - Redness
![Page 25: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/25.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
2. 다운샘플링 색차 정보
Multi-stage Compression Process
![Page 26: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/26.jpg)
Y Cb Cr
4:4:4
4:2:2
4:1:1
![Page 27: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/27.jpg)
Y Cb Cr
Y
Y
Cb Cr
Cb
Cr
4:4:4
4:2:2
4:1:1
![Page 28: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/28.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
3. 이산 코사인 변환
Multi-stage Compression Process
![Page 29: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/29.jpg)
![Page 30: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/30.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
4. 양자화
Multi-stage Compression Process
![Page 31: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/31.jpg)
![Page 32: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/32.jpg)
http://www.fileformat.info/mirror/egff/ch09_06.htm
5. 부호화
Multi-stage Compression Process
![Page 33: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/33.jpg)
https://www.youtube.com/watch?v=qys8R_3H-kc
![Page 34: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/34.jpg)
Guetzli specifically targets the quantization stage in which the more visual quality loss is introduced,
the smaller the resulting file.
![Page 35: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/35.jpg)
Psychovisual modeling of JPEG's format
https://github.com/google/butteraugli
![Page 36: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/36.jpg)
Psychovisual modeling of JPEG's format
https://github.com/google/butteraugli
![Page 37: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/37.jpg)
Search Algorithms
Psychovisual modeling of JPEG's format
Guetzli’s psychovisual model +(butteraugli)
https://github.com/google/butteraugli
![Page 38: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/38.jpg)
Search Algorithms
Psychovisual modeling of JPEG's format
Guetzli’s psychovisual model +(butteraugli)
https://github.com/google/butteraugli
Very slow
![Page 39: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/39.jpg)
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
![Page 40: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/40.jpg)
We think this makes the slower compression a worthy tradeoff“”
![Page 41: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/41.jpg)
Ideas
![Page 42: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/42.jpg)
![Page 43: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/43.jpg)
Background
![Page 44: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/44.jpg)
Background
![Page 45: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/45.jpg)
Background
![Page 46: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/46.jpg)
Background
![Page 47: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/47.jpg)
Background
![Page 48: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/48.jpg)
Background
![Page 49: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/49.jpg)
Background
![Page 50: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/50.jpg)
Overwrite
![Page 51: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/51.jpg)
![Page 52: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/52.jpg)
![Page 53: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/53.jpg)
또, 너무 느리기 때문에 자칫 하루종일 프로세스가 돌아갈 위험도 있음
하지만 Guetzli 약 1 메가 픽셀을 압축 시 300MB의 메모리 공간 필요
따라서 트래픽 비용 절감으로 얻는 수익과 고사양 머신 운영으로
지불해야 할 비용을 정량적으로 조사해 비판적으로 바라볼 필요가 있음
![Page 54: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/54.jpg)
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
참고자료
![Page 55: Introduce Guetzli](https://reader030.fdocuments.net/reader030/viewer/2022020104/5aad0b447f8b9a003b8b4881/html5/thumbnails/55.jpg)
감사합니다.