Nginx에 차대세 압축 이미지 webp 적용하는 방법(cwebp,gif2webp)

작업실

Nginx에 차대세 압축 이미지 webp 적용하는 방법(cwebp,gif2webp)

우성군 2 246 1


webp는 애플 기기 및 IE를 제외하곤 대부분의 범용 브라우저에서 지원하고 있습니다.


https://caniuse.com/#search=webp


위 링크에서 최신 현황을 볼 수 있습니다.



jpg, jpeg, png 이미지 파일과, 움짤의 gif 이미지 파일까지 webp 하나로 만들 수 있습니다.


압축률도 굉장히 좋고, 화질 저하도 적습니다.


현재 제 홈페이지의 대부분의 이미지가 webp를 지원하는 브라우저에서 본다면 webp로 전송되고 있습니다.


트래픽 절감에 좋구요. 


현재 2.3GB의 gif 움짤이 webp로 876MB 로 나오고 있습니다. 


gif 움짤의 경우 60~70% 압축률을 기대할 수 있습니다. 


눈으로 화질저하를 구분하기 힘들더라구요.


Nginx에서 webp를 지원하는 브라우저에겐 webp를 뿌리고, 그렇지 않으면 원본을 뿌리는 방법에 대해서 알려드리겠습니다.




1. 설치하기


우분투 기준으로 설명드립니다.


apt install webp

설치 끝입니다. 굉장이 쉽죠? ㅎㅎ



2. Nginx에 적용하기


/etc/nginx/sites-available/default


위 파일에서 server { } 블록 안에 밑의 내용을 넣습니다.


다른 가이드를 보면 nginx.conf에 적용하던데 그건 gif 움짤까지 적용이 잘 안되더라구요.


서버 블록 안에만 간단하게 넣으니 편하고 좋았습니다.


set $webp_suffix "";

if ($http_accept ~* "webp") {

set $webp_suffix ".webp";

}


location ~ \.(gif|jpg|png)$ {

add_header Cache-Control "public, no-transform";

try_files $uri$webp_suffix $uri $uri/ =404;

expires max;

}

위 내용을 넣고 


service nginx reload

위 명령어로 nginx를 리로드 시켜주면 끝입니다.




3. jpg, jpeg, png 원본을 놔두고 webp파일을 생성하는 방법


이제 이미지 파일들을 webp로 만들어줘야겠죠?



nano webp.sh

위 명령어로 스크립트 파일을 만듭니다.


#!/bin/bash


OLD_IFS=$IFS

IFS=$(echo -en "\n\b")


for FILE in `find /var/www/file/ -iregex '.*\.\(jpg\|png\|jpeg\)$'`

    do

        if [ ! -f "${FILE}.webp" ]; then

            cwebp -quiet -q 85 ${FILE} -o ${FILE}.webp;

            echo "Converted ${FILE} to ${FILE}.webp"

        fi

done


IFS=$OLD_IFS



위 내용을 보면


/var/www/file/ 경로(하위 폴더 포함)에 있는 jpg, png, jpeg를 찾아서 webp로 바꾼다는 말입니다.


물론 기존 webp 파일이 있다면 덮어쓰지 않고 넘어갑니다.


해당 경로는 적절하게 바꾸시면 됩니다.



cwebp 사용법은 밑의 링크를 참조하세요!


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



컨트롤 + x로 저장하고 난 뒤에 실행가능한 파일로 만들어줍니다.


chmod a+x webp.sh

위와 같이 하면 바로 실행이 가능한 파일로 변경됩니다.


./webp.sh

위 명령어로 바로 변환됩니다.




4. 움짤 gif를 변환하는 방법


이미지 파일은 다 변환했지만 움짤도 변환해야겠죠?


nano webp_gif.sh

위 파일로 gif 전용 스크립트 파일을 만듭니다.


#!/bin/bash


OLD_IFS=$IFS

IFS=$(echo -en "\n\b")


for FILE in `find /var/www/file/gif/ -iregex '.*\.\(gif\)$'`

    do

        if [ ! -f "${FILE}.webp" ]; then

            gif2webp -mt -mixed -quiet -q 70 ${FILE} -o ${FILE}.webp;

            echo "Converted ${FILE} to ${FILE}.webp"

        fi

done


IFS=$OLD_IFS

저장하기 전에 해당 경로를 수정하세요! 


컨트롤 + x로 저장하고 난 뒤에 실행가능한 파일로 만들어줍니다.


/var/www/file/gif/ 경로(하위 경로포함)에 있는 움짤 gif를 70의 품질로 압축한다는 의미입니다.


gif2webp 사용법은 밑의 링크를 참조하세요.


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

chmod a+x webp_gif.sh

위와 같이 하면 바로 실행이 가능한 파일로 변경됩니다.


./webp.sh

위 명령어로 바로 변환됩니다.


이제 변환은 끝났습니다. Nginx에서는 알아서 webp를 전송할 것입니다.




5. cron으로 주기적으로 자동변환하기


그런데 우리가 블로그를 운영하다보면 이미지 업로드를 많이 하죠?


그래서 cron을 이용해서 주기적으로 파일을 webp로 변환시키는 작업을 시키면


일일이 변환해주지 않아도 될 것입니다.



crontab -e

위 명령어로 cron 작업 파일로 들어갑니다.


25 * * * * /usr/local/bin/webp.sh >> /var/log/webp-maker/webp.log 2>&1

27 * * * * /usr/local/bin/webp_gif.sh >> /var/log/webp-maker/webp_gif.log 2>&1

저는 위와 같이 매일 매시간 25분과 27분에 이미지 파일과 gif 움짤을 변환하도록 설정해뒀습니다.


이제 편하게 블로깅하면 되겠죠? ^^




참조


https://paweldymek.com/en/post/webp-support-on-the-webserver-level   (아파치 설정파일 있어요)

https://mattgadient.com/serving-up-webp-to-supported-browsers-and-results/

https://happist.com/570048/nginx%EC%97%90%EC%84%9C-%EC%B5%9C%EA%B3%A0%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%95%95%EC%B6%95-%ED%8F%AC%EB%A7%B7-webp-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95/

, , , , , , , ,

2 Comments
MansuKim 07.10 08:49  
우왕... 그닥 어려운건 없군요. NGinX 설정을 잘 모르기는 하지만...
커뮤니티나 이미지가 많은 서비스를 운영하는 사람들에게는 큰 도움이 될 것 같아요~
우성군 07.10 09:03  
[@MansuKim] 넵. 지식이라는게 알면 쉽고, 모르면 어려우니깐요. ㅎㅎ

생각보다 트래픽에 도움이 많이 됩니다.