ngx_http_image_filter_module를 사용하여 이미지를 수정하는 방법

NGINX 의 ngx_http_image_filter_module은 서버 수준에서 이미지 변환과 최적화를 수행할 수 있는 강력한 도구입니다. 이 모듈은 별도의 외부 도구 없이도 JPEG, PNG, GIF, WebP 형식의 이미지를 실시간으로 조정하고 최적화할 수 있는 기능을 제공합니다.

이 포스트에서는 ngx_http_image_filter_module의 주요 기능과 설정 방법을 살펴보고, 이를 활용해 이미지 최적화로 리소스 사용을 줄이며 웹 성능을 개선하는 방법을 소개합니다.

목차

1. ngx_http_image_filter_module이란?
2. NGINX 주요 이미지 설정
3. 모듈을 통한 리소스 최적화
4. 결론

1. ngx_http_image_filter_module이란?

ngx_http_image_filter_module은 JPEG, GIF, PNG 및 WebP 형식의 이미지를 변경합니다.

이 모듈은 기본적으로 빌드되지 않아 컴파일 방식에서는 --with-http_image_filter_module 매개변수를 지정해야합니다.

NGINX Plus에서는 아래와 같은 방법으로 사용할 수 있습니다.

CentOS 또는 REHL의 경우

yum install nginx-plus-module-image-filter

Debian 또는 Ubuntu의 경우

apt-get install nginx-plus-module-image-filter

main Context에 아래와 같은 구문을 추가하여야합니다.

load_module modules/ngx_http_image_filter_module.so;

1-1. 모듈 지시문

구문 : 	 image_filter off;
         image_filter test;
         image_filter size;
         image_filter rotate 90 | 180 | 270;
         image_filter resize width height;
         image_filter crop width height;
기본 값: image_filter off;
Context: location

이미지를 수정할 유형을 지정합니다.

off
이미지 수정이 되지않은 원본을 전달합니다.(기본 값)

test
응답이 JPEG, GIF, PNG 또는 WebP 형식의 이미지인지 확인합니다. 아닐경우 415(Unsupported Media Type) 오류를 반환합니다.

size Image의 정보를 JSON 포멧형식으로 보여줍니다. 형식이 이미지가 아닐경우 공백으로 나오게됩니다.

rotate 90 | 180 | 270
지정된 각도만큼 이미지를 시계 반대 방향으로 회전합니다. 매개변수 값에는 변수가 들어갈 수 있습니다.

resize width height
이미지의 사이즈를 비례적으로 줄입니다. 가로 세로 중 한 가지만 축소 하려면 “-“으로 지정하여 사용할 수 있습니다. 이미지 회전과 같이 사용하면 축소 후에 회전이 발생합니다.

crop width height
이미지의 가장자리를 자를 수 있습니다. 가로 세로 중 한 가지만 자르려면 “-“으로 지정하여 사용할 수 있습니다. 이미지 회전과 같이 사용하려면 축소 전에 회전이 발생됩니다.

구문:    image_filter_buffer size;
기본 값: image_filter_buffer 1M;
Context: http, server, location

이미지를 읽는데 사용되는 버퍼의 최대 크기를 지정합니다.
크기를 초과하면 NGINX는 415 (Unsupported Media Type) 오류를 반환합니다.

구문:    image_filter_interlace on | off;
기본 값: image_filter_interlace off;
Context: http, server, location

활성화하면 최종 이미지가 인터레이스됩니다. JPEG의 경우 최종 이미지는 “프로그레시브 JPEG” 형식이 됩니다.

구문:    image_filter_jpeg_quality quality;
기본 값: image_filter_jpeg_quality 75;
Context: http, server, location

JPEG의 이미지 품질을 지정합니다. 값은 1~100 까지 지정할 수 있습니다. 값이 적을수록 이미지의 품질이 낮아지고 전송할 데이터가 적어집니다. 최대 권장하는 값은 95입니다.

구문 : 	 image_filter_sharpen percent;
기본 값: image_filter_sharpen 0;
Context: http, server, location

최종 이미지의 선명도를 높입니다. 선명도 백분율은 100을 초과할 수 있습니다. 값이 0이면 선명도가 비활성화 되게 됩니다.

구문:    image_filter_transparency on|off;
기본 값: image_filter_transparency on;
Context: http, server, location

팔레트 기반 GIF 또는 PNG 이미지를 변환할 때, 투명도를 유지할지 여부를 설정할 수 있습니다. 투명도를 유지하지 않으면 이미지 품질이 더 좋아질 수 있습니다. 단, PNG의 알파 채널 투명도는 항상 유지됩니다.

구문:    image_filter_webp_quality quality;
기본 값: image_filter_webp_quality 80;
Context: http, server, location

WebP 이미지의 품질을 지정합니다. 값은 1~100 까지 지정할 수 있습니다. 값이 적을수록 이미지의 품질이 낮아지고 전송할 데이터가 적어집니다.

2. NGINX 주요 이미지 설정

• 이미지 크기 조정

모듈을 이용한 크기 조정은 NGINX에서 이미지 크기를 조정할 수 있지만 NGINX에서 직접 이미지의 크기를 조정하기 때문에 이미지 응답의 시간이 길어질 수 있습니다.

아래 구성을 통해 NGINX에 프록시 된 이미지 및 정적 파일을 이미지를 조정하여 클라이언트에게 보여줄 수 있습니다.

NGINX 구성을 변경합니다.

server {
    listen 8080; # 포트를 8080을 사용합니다.
    location /{
       image_filter resize 300 -; # 이미지의 사이즈를 width:300로 지정합니다.
       image_filter_buffer 10M; # 이미지의 버퍼 사이즈를 10mb로 지정합니다.
       root /usr/share/nginx/html; # 정적 컨텐츠의 위치를 지정합니다.
       index nginx.jpg; # nginx.jpg # 정적 컨텐츠를 지정합니다.
    }    
}

nginx.jpg의 이미지의 원본 크기는 20000×11250입니다.

아래와 같이 이미지의 크기가 줄어든 것을 확인할 수 있습니다.

이미지의 pixel이 적어졌기 때문에 이미지의 품질이 낮아진 것을 확인할 수 있습니다.

(web Title : 300×160)

• 이미지의 사이즈 확인

아래 구성을 통해 NGINX에 프록시 된 이미지 및 정적 파일을 이미지의 크기를 클라이언트에게 보여줄 수 있습니다.

NGINX의 구성을 변경합니다.

server {
    listen 8080;
    location /{
       image_filter size; # 이미지의 사이즈를 JSON 포멧으로 확인합니다.
       image_filter_buffer 10M;
       root /usr/share/nginx/html; 
       index nginx.jpg;
    }    
}

image_filter size;를 구성하게 되면 이미지의 사이즈를 확인할 수 있습니다.

이미지를 사용하게 되면 image_filter size;의 구성하지 않고 사용해야합니다. (JSON만 출력)

• 이미지 회전

NGINX의 프록시 된 이미지 및 정적 파일을 이미지를 회전하여 클라이언트에게 보여줄 수 있습니다.

NGINX를 구성합니다.

server {
    listen 8080;
    location /{
       image_filter rotate 90; # 이미지를 90도 회전합니다.
       image_filter_buffer 10M;
       root /usr/share/nginx/html; 
       index nginx.jpg;
    }    
}

이미지가 90도 회전되어 세로로 변경된 것을 볼 수 있습니다.

web Title의 이미지의 크기도 변경된 것을 볼 수 있습니다.

• 이미지의 가장자리 제거

server {
    listen 8080;
    location /{
       image_filter resize 300 -;
       image_filter crop 100 100; # 가장자리를 제거하여 이미지를 100x100으로 변경합니다.
       image_filter_buffer 10M;
       root /usr/share/nginx/html; 
       index nginx.jpg;
    }    
}

이미지의 가장자리를 제거 해 100×100으로 변경합니다.

(구성 전 이미지)

(구성 후 이미지)

• 이미지의 품질 지정

jpeg, webp의 이미지의 품질를 지정할 수 있습니다.

NGINX를 구성합니다.

server {
    access_log /var/log/nginx/access.8080.log main;
    listen 8080;
    location /{
       image_filter resize 300 -; # 사이즈를 줄여 품질를 낮춥니다.
       image_filter_jpeg_quality 100;
       image_filter_buffer 10M;
       root /usr/share/nginx/html; 
       index nginx.jpg;
    }    
}

(구성 전 이미지)

(구성 후 이미지)

이미지의 전체적인 품질이 올라간 것을 확인할 수 있습니다.

• 이미지 퀄리티 지정

이미지의 퀄리티를 지정할 수 있습니다.

NGINX를 구성합니다.

server {
    access_log /var/log/nginx/access.8080.log main;
    listen 8080;
    location /{
       image_filter resize 300 -;
       image_filter_sharpen 500;
       image_filter_buffer 10M;
       root /usr/share/nginx/html; 
       index nginx.jpg;
    }    
}

(구성 후 이미지)

(구성 전 이미지)

이미지의 퀄리티가 올라간 것을 볼 수 있습니다. (색상이 진해진 것을 볼 수 있습니다.)

3. 모듈을 이용한 리소스 최적화

ngx_http_image_filter_module 모듈을 이용하여 리소스를 최적화 할 수 있습니다.

정적 파일을 배포합니다.

이미지의 경로는 따로 지정하여 모듈을 사용할 수 있도록 지정합니다.
(root 경로로 지정시 모든 컨텐츠가 이미지가 아니기 때문에 415 에러가 나오게됩니다.)

server {
     access_log /var/log/nginx/access.8094.log main; 
     listen     8094;
     location / { 
       root /usr/share/nginx/html/http_test/;
       index index.html;
     }   
     location /image/{
       image_filter_buffer 10M;
       root /usr/share/nginx/html/http_test/; 
    }   
}

구성 결과는 아래와 같습니다.

현재 NGINX의 이미지는 20000×11250으로 약 4.3mb정도의 리소스를 전송하고있습니다.

NGINX의 구성을 변경합니다.

server {
     access_log /var/log/nginx/access.8094.log main; 
     listen     8094;
     location / { 
       root /usr/share/nginx/html/http_test/;
       index index.html;
     }   
     location /image/{
       image_filter resize 416 234; # 이미지의 크기를 416으로 지정합니다
       image_filter_jpeg_quality 95; # 이미지의 품질을 95로 지정합니다.
       image_filter_buffer 10M;
       root /usr/share/nginx/html/http_test/; 
    }   
}

위의 구성한 것과 똑같은 페이지가 나오게 됩니다.

이미지의 리소스가 많이 줄어든 것을 확인할 수 있습니다. (14kb)

4. 결론

ngx_http_image_filter_module은 이미지의 크기 조정, 회전, 품질 최적화 등 다양한 기능을 제공하여 서버에서 실시간으로 이미지를 조작할 수 있습니다. 이를 통해 클라이언트와의 네트워크 트래픽을 줄이고, 사용자에게 더 빠르고 최적화된 콘텐츠를 전달할 수 있습니다.

특히, 이 모듈은 정적 파일을 제공하는 환경에서 유용하며, 별도의 이미지 처리 소프트웨어를 사용할 필요 없이 NGINX 설정만으로 간단히 이미지 변환을 수행할 수 있다는 점에서 효율적입니다. 하지만 이미지 처리 과정이 서버에 부하를 줄 수 있으므로, 적절한 버퍼 설정과 품질 조정으로 서버 성능과 이미지 품질 간의 균형을 유지하는 것이 중요합니다.

NGINX 이미지 수정 모듈이외의 NGINX 모듈를 이용한 다양한 활용 방법을 더 알고싶으시다면 NGINX STORE NGINX 카테고리를 방문하여 더 많은 정보를 확인할 수 있습니다.

NGINX STORE를 통한 솔루션 도입 및 기술지원 무료 상담 신청

* indicates required

Email Address *

핸드폰 번호

이름

문의내용

당신이 인간이라면 이 필드를 비워두세요: