Quelle: Sling Academy

Einleitung

NGINX ist bekannt als schneller Webserver – doch er kann auch Bilder beim Abruf verändern. So lassen sich Bilder ohne zusätzliche Tools zuschneiden, skalieren oder drehen. In diesem Tutorial zeigen wir, wie Sie das Image-Filter-Modul von NGINX nutzen, um Bilder dynamisch zu transformieren.

Voraussetzungen

• Eine NGINX-Installation mit aktiviertem Image-Filter-Modul. Falls das Modul fehlt, müssen Sie NGINX mit dem Schalter --with-http_image_filter_module neu kompilieren.
• Grundkenntnisse in der NGINX-Konfiguration.
• Bilder, die Sie bearbeiten möchten.

Image-Filter-Modul aktivieren

Prüfen Sie zunächst, ob das Modul installiert ist. Führen Sie dazu folgenden Befehl aus:

 nginx -V 2>&1 | grep --color -o http_image_filter 

Erscheint „http_image_filter“ in der Ausgabe, ist das Modul vorhanden. Andernfalls müssen Sie NGINX wie folgt neu kompilieren:

# Schritt 1: Abhängigkeiten installieren
   sudo apt-get update
  sudo apt-get install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev # Schritt 2: NGINX-Quellcode herunterladen wget http://nginx.org/download/nginx-1.20.1.tar.gz
  tar -xzvf nginx-1.20.1.tar.gz
  cd nginx-1.20.1/ # Schritt 3: NGINX mit Image-Filter-Modul konfigurieren ./configure --with-http_image_filter_module # Schritt 4: Kompilieren und installieren make
  sudo make install # Schritt 5: NGINX starten sudo /usr/local/nginx/sbin/nginx # Schritt 6: Installation prüfen /usr/local/nginx/sbin/nginx -V 2>&1 | grep --color -o http_image_filter 

Grundkonfiguration

Beginnen wir mit einer einfachen Konfiguration: Alle Bilder in einem bestimmten Verzeichnis werden automatisch transformiert.

 http {
    server {
      location /images/ {
        image_filter resize 300 200;
        }
      }
  } 

Diese Anweisung skaliert alle Bilder im Verzeichnis /images/ auf 300×200 Pixel.

Erweiterte Konfiguration

Sie können auch je nach URL-Parametern unterschiedliche Transformationen anwenden. Beispiel: dynamisches Skalieren.

 location ~* ^/dynamic-images/(?<width>\d+)-(?<height>\d+)/(?<file>.+)\.(?<extension>jpeg|jpg|gif|png)$ {
    set $width $arg_width;
    set $height $arg_height;
    image_filter resize $width $height;
  } 

Ein Aufruf wie /dynamic-images/300-200/photo.jpg liefert das Bild photo.jpg in 300×200 Pixeln.

Bilder zwischenspeichern

Um die Leistung zu verbessern, sollten Sie die bearbeiteten Bilder cachen. Beispiel:

 http {
  proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=1g use_temp_path=off;
  
  server {
    location /images/ {
      image_filter resize 300 200;
      image_filter_jpeg_quality 90;
      image_filter_buffer 10M;
  
      proxy_cache my_cache;
      proxy_cache_valid 200 1d;
      proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
      proxy_cache_lock on;
  
      add_header X-Cache-Status $upstream_cache_status;
      }
    }
  } 

Diese Konfiguration legt einen Cache an, transformiert Bilder und speichert sie für einen Tag.

Fehlerbehandlung

Falls die Bildverarbeitung fehlschlägt, können Sie eine Alternative definieren – etwa einen 404-Fehler oder ein Platzhalterbild:

 location /images/ {
    image_filter resize 300 200;
    image_filter_buffer 10M;
    error_page 415 = /empty.gif;
  } 

Bei einem Fehler liefert NGINX in diesem Fall das Bild empty.gif aus.

Konfiguration testen

Nach jeder Änderung sollten Sie die NGINX-Konfiguration prüfen:

 nginx -t 

Wenn der Test erfolgreich war, laden Sie NGINX neu:

 nginx -s reload 

Rufen Sie nun Ihre Bilder über die definierten URLs auf und prüfen Sie die Transformationen im Browser.

Fazit

Mit dem Image-Filter-Modul in NGINX liefern Sie optimierte Bilder direkt aus – ohne externe Tools. Ob kleinere Vorschaubilder oder skalierte Grafiken für verschiedene Layouts: Das Modul spart Ressourcen und verbessert die Ladezeiten.