NGINX에서 최고의 이미지 압축 포맷 WebP 적용 방법

Updated on 2020-05-30 by

오늘은 Nginx 웹서버에서 최고의 이미지 압축 포맷이라고 불리우는 Webp 적용 방법을 알아봅니다.

적용 방법에는 매우 다양한 방법이 있는데요, 오늘은 조금 단순하면서 적용하기 용이한 방법을 소개합니다.

참고로 WebP를 지원하는 브라우저에 대한 관심이 높을 수 밖에 없는데요. 아래 링크 페이지에서 WebP 지원 브라우저 현황을 볼 수 있습니다.
이에 따르면 WebP 포맷은 전체 브라우저 79% 정도 커버하고 있네요(데스크탑 84%, 모바일 77%)

WebP image format

이 방법은 아래 글을 기반으로 정리, 수정 보완했습니다.

ADDING WEBP SUPPORT FOR NGINX

1. WebP 설치

먼저 우분투 NGINX 웹서버에서 WebP를 설치합니다. 우분투에서는 apt-get 명령어를 사용해 WebP를 설치하면 그것으로 끝입니다.

apt-get install webp

2. NGINX 웹서버 세팅

이제는 NGINX 웹서버 세팅을 통해서 WebP 이미지를 브라우저가 지원하는지 학인 후 지원한다면 Webp 이미지가 기본으로 설정되도록 만듭니다

먼저 NGINX 웹서버 동작을 설정하는 http 블락안에 다음 코드를 추가합니다.

이는 브라우저가 WebP 이미지를 지원하는지 확인합니다. 만약 브라우저가 Webp 이미지를 지원한다면 WebP 이미지 파일이 웹 소스의 기본 이미지 파일로 설정됩니다.

인터넷 익스플러처럼 WebP 이미지를 지원하지 않는다면 WebP 이미지가 아닌 본래의 jpg나 png 파일을 웹 소스의 기본 이미지 파일로 설정합니다.

map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; }

다음으로는 server 블락안에 다음 코드를 추가합니다.

이는 브라우져가 WebP 이미지를 지원하는 경우, 모든 이미지(jpg, png)에 대한 WebP 이미지를 로딩하도록 합니다.

location ~* ^.+\.(jpe?g|png) { add_header Cache-Control "public, no-transform"; add_header Vary "Accept-Encoding"; try_files $uri$webp_suffix $uri =404; expires max; }

NGINX 웹서버에서 이미지 변환하기

글을 작성 시 jpg 파일과 함께 WebP 이미지 파일을 같이 올렸다면 상관이 없지만 대부분은 그렇지 않기 때문에 서버에 있는 jpg나 png 포맷 이미지에 WebP 포맷 이미지를 추가합니다.

즉 서버의 이미지 저장 폴더에는 확장자가 jpg 또는 png인 이미지 파일 하나와 WebP 확장자를 가진 이미지 파일의 2개의 이미지가 존재하게 됩니다.

웹서버는 WebP 이미지를 지원하는 브라우저에게는 WebP 이미지를 로딩해주고, 지원하지 않는 브라우저에게는 원래의 jpg 또는 png 파일을 로딩합니다.

그렇기때문에 WebP 이미지를 이용한다는 것은 기존 jpg 파일에 추가로 WebP 이미지를 추가로 가지고 있기 때문에 서버 용량을 더 많이 차지 합니다.

다만 WebP 이미지를 지원하는 대부분의 브라우져에서는 로딩 속도가 빠르고 트래픽양이 줄어드는 긍정적인 효과가 있습니다.

아래 코드는 jpg나 png 파일 원본은 그대로 유지하면서 추가로 WebP 파일을 생성해주는 코드입니다.

여기에서는 쉽게 사용하기 위해 sh 파일 스크립트로 사용하도록 만들겠습니다.

먼저 webp.sh 파일을 만듭니다. 만드는 파일 위치는 적절히 관리 가능한 곳에 만듭니다.

여기서는 제가 주로 사용하는 편집기로 가장 쉽다는 nano를 사용했으니 여러분이 사용하는 편집기로 webp.sh 파일을 만들고 코드를 입력하면 됩니다.

nano webp.sh

다음으로는 webp.sh 파일안에 WebP 파일 생성 코드를 추가합니다.

  • 아래 코드 중 echo가 있는 줄은 삭제해도 무방합니다.
  • 이미지 파일이 있는 폴더 위지는 서버의 풀 주소를 사용합니다.
    예를들어 /home/mysite/wp-content/uploads
  • WebP 파일을 만드는 명령어인 cwebp의 옵션을 정합니다. 옵션은 아래와 같은 것들이 있습니다.
    -lossless : 무손실 WebP 이미지 파일을 만듭니다.
    -q : 압축율 지정 예를 들어 -q 80처럼
    -quiet : 아무것도 인쇄하지 말라는 옵션
    -resize width height : 이미지 크기를 조정, width나 height 중 하나가 0이라면 종횡비를 유지
  • 압축율을 조정할 수 있습니다.
    아래는 압축 옵션으로 -q 80를 적용하고 있는데요. 이 압축율 대신 다른 원하는 압축율로 변경합니다. 예를 들어 -q 90처럼 말입니다.
    중간 품질 -q 75가 WebP에선 기본값이라고 하네요.
    80~99는 고품질로 WebP의 잇점은 감소한다고 구글은 이야기합니다. WebP는 품질보다 속도가 중요한 경우 사용하라고 하네요.
echo "===== Converting images into WebP .webp =====" for x in `find 이미지 파일이 있는 폴더 위치(예 /var/www/happist) -type f \( -iname \*.jpeg -o -iname \*.jpg -o -iname \*.JPG -o -iname \*.png \)` do cwebp -quiet -q 80 ${x} -o ${x}.webp; echo "Converted $x to ${x}.webp" done

다음으로는 webp.sh 파일을 실행 가능하도록 만들어야 합니다. 이는 chmod 명령어를 사용합니다.

chmod a+x webp.sh

이제 준비가 다 끝났습니다. 아래와 같은 방식으로 webp.sh를 실행시켜 WebP 이미지를 생성하도록 합니다.

sh webp.sh

cwebp 옵션

Options: -h / -help ............. short help -H / -longhelp ......... long help -q <float> ............. quality factor (0:small..100:big), default=75 -alpha_q <int> ......... transparency-compression quality (0..100), default=100 -preset <string> ....... preset setting, one of: default, photo, picture, drawing, icon, text -preset must come first, as it overwrites other parameters -z <int> ............... activates lossless preset with given level in [0:fast, ..., 9:slowest] -m <int> ............... compression method (0=fast, 6=slowest), default=4 -segments <int> ........ number of segments to use (1..4), default=4 -size <int> ............ target size (in bytes) -psnr <float> .......... target PSNR (in dB. typically: 42) -s <int> <int> ......... input size (width x height) for YUV -sns <int> ............. spatial noise shaping (0:off, 100:max), default=50 -f <int> ............... filter strength (0=off..100), default=60 -sharpness <int> ....... filter sharpness (0:most .. 7:least sharp), default=0 -strong ................ use strong filter instead of simple (default) -nostrong .............. use simple filter instead of strong -sharp_yuv ............. use sharper (and slower) RGB->YUV conversion -partition_limit <int> . limit quality to fit the 512k limit on the first partition (0=no degradation ... 100=full) -pass <int> ............ analysis pass number (1..10) -crop <x> <y> <w> <h> .. crop picture with the given rectangle -resize <w> <h> ........ resize picture (after any cropping) -mt .................... use multi-threading if available -low_memory ............ reduce memory usage (slower encoding) -map <int> ............. print map of extra info -print_psnr ............ prints averaged PSNR distortion -print_ssim ............ prints averaged SSIM distortion -print_lsim ............ prints local-similarity distortion -d <file.pgm> .......... dump the compressed output (PGM file) -alpha_method <int> .... transparency-compression method (0..1), default=1 -alpha_filter <string> . predictive filtering for alpha plane, one of: none, fast (default) or best -exact ................. preserve RGB values in transparent area, default=off -blend_alpha <hex> ..... blend colors against background color expressed as RGB values written in hexadecimal, e.g. 0xc0e0d0 for red=0xc0 green=0xe0 and blue=0xd0 -noalpha ............... discard any transparency information -lossless .............. encode image losslessly, default=off -near_lossless <int> ... use near-lossless image preprocessing (0..100=off), default=100 -hint <string> ......... specify image characteristics hint, one of: photo, picture or graph -metadata <string> ..... comma separated list of metadata to copy from the input to the output if present. Valid values: all, none (default), exif, icc, xmp -short ................. condense printed message -quiet ................. don't print anything -version ............... print version number and exit -noasm ................. disable all assembly optimizations -v ..................... verbose, e.g. print encoding/decoding times -progress .............. report encoding progress Experimental Options: -jpeg_like ............. roughly match expected JPEG size -af .................... auto-adjust filter strength -pre <int> ............. pre-processing filter

참고

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

오랬동안 FMCG 마케팅과 전자제품 상품기획 경험을 기반으로 다양한 분야의 마케팅 및 경영 사례 분석에 관심을 가지고 있습니다. 아울러 IT 등 트렌드 분석과 빠르게 변화하는 뉴스에서 얻을 수 있는 인사이트를 분석해 나누고 있습니다.. 개인적으로 사진에 관심에 많아 소소한 일상의 따뜻함을 담고 있습니다. 혹 연락이 필요하시면 ihappist@gmail.com으로 연락해 주세요

5 Comments
Oldest
Newest
Inline Feedbacks
View all comments