Bildbearbeitung

Mit smoxy lassen sich Bilder direkt über Rewrite Rules in Echtzeit bearbeiten. Anstatt Thumbnails vorab zu generieren oder Bilder manuell zu bearbeiten, können Bilder per URL-Muster skaliert, zugeschnitten, unscharf gemacht, geschärft, gedreht und in der Ausgabequalität angepasst werden.

Das ist besonders nützlich, wenn sich das Design ändert und neue Thumbnail-Größen benötigt werden. Statt alle Thumbnails neu zu generieren, muss lediglich die Bild-URL im Template angepasst werden.

So funktioniert es

Die Bildbearbeitung wird über die Rewrite Rules von smoxy gesteuert. Definiert werden ein Regex-Muster, das eingehende Bild-URLs erkennt, sowie ein Zielpfad, der smoxy mitteilt, welche Operationen durchgeführt werden sollen.

Der Zielpfad besteht aus drei Teilen:

1. /_sx/img/_/ -- Dieses Präfix signalisiert smoxy, dass die Anfrage als Bildbearbeitung verarbeitet werden soll.
2. Verarbeitungsoperationen -- Eine oder mehrere Operationen, getrennt durch /, die festlegen, was mit dem Bild geschehen soll (Skalierung, Unschärfe, Qualität setzen usw.).
3. /plain/ -- Dieses Trennzeichen signalisiert smoxy, dass alles dahinter der originale Pfad zum Quellbild auf dem Origin-Server ist.

/_sx/img/_/{operationen}/plain/{originaler_pfad}

Jede Operation folgt dem Format operation:param1:param2:... -- der Operationsname (oder seine Abkürzung), gefolgt von durch Doppelpunkte getrennten Parametern.

Diese /_sx/img/…-URLs werden üblicherweise über Rewrite Rules erzeugt, lassen sich aber auch direkt aufrufen -- genau dafür sind Optionen wie Cache-Buster, ablaufende URLs (Expires) und Dateiname gedacht.

Eine Rewrite Rule einrichten

Für die Bildbearbeitung wird eine Rewrite Rule mit einem Regex und einem Zielpfad erstellt.

Regex:

^/thumbnail/(\d+)x(\d+)/(.*)

Zielpfad:

/_sx/img/_/rs:fit:$1:$2/q:100/plain/$3

In diesem Beispiel:

• $1 erfasst die gewünschte Breite (z. B. 100)
• $2 erfasst die gewünschte Höhe (z. B. 100)
• $3 erfasst den originalen Bildpfad

Wenn eine Anfrage für /thumbnail/100x100/media/images/product.jpg eingeht, wird smoxy:

1. Das Originalbild von /media/images/product.jpg auf dem Origin-Server abrufen.
2. Es auf maximal 100x100 Pixel skalieren, wobei das Seitenverhältnis beibehalten wird.
3. Die Ausgabequalität auf 100 % setzen.
4. Das verarbeitete Bild ausliefern.

Mehrere Operationen verketten

Beliebig viele Operationen lassen sich verketten, jeweils getrennt durch /:

/_sx/img/_/rs:fill:800:600/q:85/bl:5/bg:ffffff/f:webp/plain/$1

Das Bild wird auf 800x600 skaliert (fill), die Qualität auf 85 % gesetzt, ein Gaußscher Weichzeichner mit Sigma 5 angewendet, die Hintergrundfarbe auf Weiß gesetzt und das Ergebnis ins WebP-Format konvertiert.

Anwendungsfälle

Dynamische Thumbnails

Der häufigste Anwendungsfall. Verschiedene Thumbnail-Größen werden direkt über die Bild-URL definiert, ohne sie vorab zu generieren. Wenn sich das Design ändert und andere Größen benötigt werden, muss nur das URL-Muster angepasst werden -- keine Backend-Änderungen nötig.

Regex:

^/img/(\d+)x(\d+)/(.*)

Zielpfad:

/_sx/img/_/rs:fit:$1:$2/q:80/plain/$3

Jetzt können URLs wie /img/300x200/photos/hero.jpg oder /img/150x150/photos/hero.jpg verwendet werden, und smoxy generiert die passende Größe on the fly.

Unscharfe Hero-Hintergründe

Das Originalbild wird als Hero-Element mit Unschärfe-Effekt verwendet, über das dann Text gelegt wird. Es muss keine separate, unscharfe Version des Bildes erstellt und hochgeladen werden.

Regex:

^/hero-bg/(.*)

Zielpfad:

/_sx/img/_/rs:fill:1920:600/bl:15/q:70/plain/$1

Jedes Bild wird auf 1920x600 skaliert (fill), mit einem starken Gaußschen Weichzeichner versehen und in reduzierter Qualität ausgeliefert -- ideal als Hintergrund hinter Text.

Verfügbare Operationen

smoxy unterstützt eine Vielzahl von Bildverarbeitungsoperationen, aufgeteilt in folgende Kategorien:

Kategorie	Operationen	Beschreibung
Skalierung & Zuschnitt	resize, width, height, crop, trim, gravity u. a.	Bildabmessungen, Seitenverhältnis und Bildausschnitt steuern
Effekte & Anpassungen	blur, sharpen, pixelate, rotate, background, padding	Visuelle Effekte und Transformationen anwenden
Ausgabe, Metadaten & Auslieferung	quality, format, watermark, strip metadata u. a.	Ausgabeformat, Qualität, Metadaten und Auslieferungsverhalten steuern

INFO

Hinweis: Operationen werden in einer festen internen Pipeline-Reihenfolge verarbeitet, unabhängig von der Reihenfolge in der URL. Für die Lesbarkeit empfiehlt es sich dennoch, sie in logischer Reihenfolge anzugeben: Skalierung -> Effekte -> Qualität -> Format.

Verwandte Themen

• Optimierung -- automatische Formatkonvertierung auf Zonenebene (z. B. Auslieferung von WebP oder AVIF je nach Browser). Ein eigenständiges System, getrennt von den hier dokumentierten URL-basierten Transformationen.
• Cache-Key-Konfiguration für Bilder -- wie verarbeitete Bilder zwischengespeichert werden.