search

makerspacewe / makerspacewe.github.io

Other
1 stars 0 forks source link

webp 이미지 최적화 #8

Closed diginori closed 4 years ago

diginori commented 4 years ago

https://developers.google.com/speed/webp/docs/using

image

image

diginori commented 4 years ago

install

https://www.npmjs.com/package/cwebp

brew install webp

diginori commented 4 years ago

속도 측정

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmakerspacewe.com%2F&tab=mobile&hl=ko

diginori commented 4 years ago

파일 하나 적용 :

image

image

diginori commented 4 years ago

줄어든 용량

ls -ltr
total 16296
-rw-r--r--  1 diginori  staff  1705612 Nov 25 16:43 banner.jpg
-rw-r--r--  1 diginori  staff   737681 Nov 25 16:43 map.jpg
-rw-r--r--  1 diginori  staff   394442 Nov 25 16:43 og640x320.png
-rw-r--r--  1 diginori  staff     8064 Nov 25 16:43 pic01-1.jpg
-rw-r--r--  1 diginori  staff    28856 Nov 25 16:43 pic01.jpg
-rw-r--r--  1 diginori  staff  1280591 Nov 25 16:43 pic02.jpg
-rw-r--r--  1 diginori  staff  1672483 Nov 25 16:43 pic03.jpg
-rw-r--r--  1 diginori  staff  1705612 Nov 25 16:43 pic04.jpg
-rw-r--r--  1 diginori  staff     9108 Nov 25 16:43 pic05.jpg
-rw-r--r--  1 diginori  staff    11969 Nov 25 16:43 pic06.jpg
-rw-r--r--  1 diginori  staff    10700 Nov 25 16:43 pic07.jpg
-rw-r--r--  1 diginori  staff     2101 Nov 25 16:43 pic08.jpg
-rw-r--r--  1 diginori  staff     3500 Nov 25 16:49 pic01.webp
-rw-r--r--  1 diginori  staff   198106 Nov 25 16:58 pic04.webp
-rw-r--r--  1 diginori  staff   176898 Nov 25 16:58 pic03.webp
-rw-r--r--  1 diginori  staff    73448 Nov 25 16:58 pic02.webp
-rw-r--r--  1 diginori  staff    88630 Nov 25 16:58 map.webp
-rw-r--r--  1 diginori  staff   198106 Nov 25 16:59 banner.webp
diginori commented 4 years ago 
[master 40dae16] 배너 및 이미지 webp 변환
 8 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 images/banner.webp
 create mode 100644 images/map.webp
 create mode 100644 images/pic02.webp
 create mode 100644 images/pic03.webp
 create mode 100644 images/pic04.webp
 ~/github/makerspacewe.github.io   master  git push
Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (13/13), done.
Writing objects: 100% (13/13), 525.67 KiB | 0 bytes/s, done.
Total 13 (delta 6), reused 0 (delta 0)
remote: Resolving deltas: 100% (6/6), completed with 6 local objects.
To https://github.com/makerspacewe/makerspacewe.github.io.git
   1e7cda9..40dae16  master -> master
diginori commented 4 years ago

적용 후 속도 측정

image

image

diginori commented 4 years ago

webp 지원하지 않는 브라우저 에서도 문제 없도록

https://armadillo-dev.github.io/html/css/image-optimizing-using-webp/