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

|

오늘은 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

참고

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
현토리

어? 해피님 페이지는 구글 pagespeed 적용하지 않았었나요? 저두 pagespeed 잘 쓰고 있는데 nginx 캐쉬와 같이 쓰다보니 잘 잘동이 안되는듯 한데요. 저렇게 해서 webp를 사용하면 pagespeed와 겹치지 않을까요?

Happist

안녕하세요?

저는 요즘 pagespeed 사용을 중단했습니다.
중단한 이유는
1. 원인을 모르는 충돌이 있는 것 같구요.그러다보니 pagespeed 전기능을 충분히 사용못하겠드라구요
2. nginx가 업데이트될때마다 다시 컴파일하는 것이 생각보다 귀찮아졌기 때문에요.
예전 어느 정도 여유가 있는 경우는 일일히 대응 가능했는데요.
점차 바쁘다보니 신경쓰지 않아도 되는 옵션을 선택하는 방향으로 가네요.
3. pagespeed가 생각보다 CPU를 엄청 잡아먹습니다. 생각외로 서버에 부담을 많이 주면서 램과 CPU 성능이 딸리면 오히려 이 pagespeed가 속도 저하원인이 되고 있드라구요.. 속도에 문제가 있어 살펴보면 pagespeed가 열심히 CPU를 200%이상 사용하는 것을 종종 봤습니다.
4. 그리고 pagespeed가 오랬동안 업데이트 되지 않고 있어서 그 미래에 심히 의심하고 있습니다.
저는 구글에서 뭔가 더 멋진 것을 내줄것으로 기대하고 있습니다.

그래서 pagespeed 사용을 중단하고 위에서 언급한 방식을 적용하려교 하고 있습니다.
먼저 다른 사이트에 먼저 적용했고, happist.com은 주말에 적용하려고 합니다. 변환에 시간이 많이 걸리는 듯 싶어서요

그리고 crontab을 사용해 자동화 하려고 합니다.

현토리

바로 적용을 해봤습니다. 페이지 용량도 작아지고, 속도도 느낌상? 더 빨라진듯 합니다. 크롬이나 크로미움 엣지 에서는 webp로 잘 변환되어져 나옵니다. 익스플러로러 11은 그대로네요.

좋은 팁 공유해 주셔서 감사합니다.

Happist

아 네 고맙습니다.
말씀하신대로 IE는 WebP를 지원하지 않습니다.
그래도 요즘 사용하는 대부분은 지원하는 듯 합니다.
불행중 다행이라면 IE 사용율이 크게 떨어지고 있다는 점이죠