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

작업실

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

우성군 6 363 1


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


2020년 8월 현재 애플 기기도 추후 업데이트 지원하겠네요.


그러면 IE를 제외하면 거의 모든 트래픽을 webp로 전송할 수 있겠습니다.


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


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



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


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


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


트래픽 절감에 좋구요. 


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


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


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


Nginx와 Aapche에서 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|jpe?g|png)$ {
	add_header Cache-Control "public, no-transform";
	try_files $uri$webp_suffix $uri $uri/ =404;
	expires max;
}


위 내용을 넣고 



service nginx reload


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




2-1. Apache에 적용하는 방법


자신의 홈페이지의 .htaccess 파일을 열어서



<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if request is for an image
  RewriteCond %{REQUEST_URI} \.(gif|png|jpe?g)$

  # Check if browser supports WebP
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if .webp file exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Return .webp file
  RewriteRule (.+)$ $1.webp [T=image/webp]
</IfModule>

<IfModule mod_setenvif.c>
  # Create REQUEST_IS_IMAGE variable for image files
  SetEnvIf Request_URI "\.(gif|png|jpe?g)$" REQUEST_IS_IMAGE
</IfModule>

<IfModule mod_headers.c>
  # Add the Vary header to the response of the image request,
  # saying that the content at this URL may differ depending
  # on whether browser supports WebP or not
  Header set Vary "Accept,Accept-Encoding" env=REQUEST_IS_IMAGE
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>


위 내용을 추가해주면 됩니다.


혹시 rewrite 모듈을 설정하지 않았다면



sudo a2enmod rewrite


 
sudo systemctl restart apache2


위 명령어로 아파치에서 rewrite 모듈을 활성화 할 수 있습니다.


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_gif.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/

, , , , , , , ,

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

생각보다 트래픽에 도움이 많이 됩니다.
mirah 08.01 08:25  
돈주고도 못사는 꿀팁 감사합니다!
혹시 아파치도 가능한가요?
우성군 08.01 12:57  
[@mirah] 인터넷에 있는 자료를 번역한 수준인걸요 ㅎㅎ

아파치도 추가했습니다!
mirah 08.02 08:23  
[@우성군] 헉 정말 감사합니다 ㅜㅜ 완전 떠먹여주셨네요
우성군 08.02 09:59  
[@mirah] 넵 ㅎㅎ 홧팅입니다.