Nginx, Apache에 차대세 압축 이미지 webp 적용하는 방법(cwebp,gif2webp)
컨텐츠 정보
- 14,559 조회
- 10 댓글
- 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
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 사용법은 밑의 링크를 참조하세요.
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에서-최고의-이미지-압축-포맷-webp-적용-방법/
-
등록일 2020.10.10그누보드 SMTP 외부메일 설정하는 방법댓글 26
-
등록일 2020.10.03그누보드5에 실시간 채팅 구축하기댓글 13
-
등록일 2020.09.26
-
등록일 2020.09.24도커로 메일서버 구축하기댓글 4
관련자료
-
서명우성짱의 NAS를 운영하고 있습니다.
저의 즐거움이 여러분의 즐거움이면 좋겠습니다.