Kompresja i optymalizacja obrazów w locie (Imagor i Docker): Jak automatycznie zmniejszać grafiki z AI o 90% przed publikacją

1. Dlaczego obrazy z generatorów AI (Flux / ComfyUI) spowalniają Twoją stronę?

Jeśli generujesz grafiki za pomocą modeli sztucznej inteligencji – takich jak Flux.1, Stable Diffusion (ComfyUI), Midjourney czy DALL-E 3 – otrzymujesz na wyjściu nieskompresowane pliki w formacie PNG.

Pojedynczy obrazek o rozdzielczości 1024x1024 lub 1920x1080 pikseli potrafi ważyć od 2.5 MB do nawet 6 MB. Jeśli zautomatyzujesz publikację artykułów na blogu lub dodawanie produktów do sklepu internetowego w n8n i wrzucisz do wpisu 5 takich surowych grafik:

* Strona ładuje się wieczność: Użytkownik na telefonie komórkowym musi pobrać aż 25 MB danych tylko po to, by przeczytać jeden artykuł.
* Google obniża Twoją pozycję w wyszukiwarce (SEO): Wskaźniki Core Web Vitals (szczególnie parametr LCP – Largest Contentful Paint) świecą się na czerwono.
* Zapychasz dysk swojego serwera VPS: Po opublikowaniu 500 wpisów z grafikami AI stracisz dziesiątki gigabajtów drogiej przestrzeni dyskowej NVMe.

Kiedy robisz to ręcznie, możesz wrzucić zdjęcie na darmową stronę typu TinyPNG lub Squoosh. Ale jak zrobić to w 100% automatycznie na własnym serwerze, w ułamku sekundy i całkowicie za darmo? Do tego właśnie służy serwer przetwarzania obrazów w locie.

2. Czym jest kompresja „w locie” i dlaczego użyjemy narzędzia Imagor (libvips)?

Kompresja w locie (on-the-fly image processing) oznacza, że nie musisz zapisywać plików na dysku, otwierać programu graficznego ani pisać skomplikowanych skryptów w Pythonie.

Wysyłasz do specjalnego mikroserwera zwykłe zapytanie sieciowe (link), w którym mówisz:
*„Pobierz ten ciężki obrazek PNG ważący 4 MB, zmniejsz jego szerokość do 1200 pikseli, przekonwertuj go na nowoczesny format WebP z jakością 80% i odeślij mi gotowy, lekki plik”*.

Cała ta operacja trwa od 20 do 80 milisekund!

### Dlaczego wybieramy Imagor?
W świecie Open-Source królem szybkości przetwarzania grafiki jest biblioteka libvips (napisana w C). Jest ona nawet 4–5 razy szybsza i zużywa kilkukrotnie mniej pamięci RAM niż popularny ImageMagick.

Imagor to gotowy, niezwykle lekki program napisany w języku Go, który opakowuje bibliotekę libvips w prosty serwer HTTP uruchamiany w Dockerze:
* Jest całkowicie darmowy (Open-Source na licencji MIT).
* Nie obciąża serwera VPS: W spoczynku zużywa około 30 MB pamięci RAM, więc bez trudu uruchomisz go obok swojego n8n, WordPressa czy bazy danych na najtańszym VPS-ie.

3. WebP vs AVIF vs PNG – który format wybrać na bloga i do sklepu?

Zanim przejdziemy do instalacji, wyjaśnijmy krótko, na jaki format najlepiej zamieniać grafiki w 2026 roku:

* PNG (Surowy z AI): ~2500 KB (2.5 MB) – brak kompresji stratnej, 100% wsparcia. Nadaje się tylko do archiwizacji oryginałów lub grafik wymagających idealnej przezroczystości.
* JPEG / JPG: ~350 KB – bardzo szybka kompresja, 100% wsparcia. Stosowany w starszych systemach i newsletterach e-mail.
* WebP: ~95 KB (spadek wagi o ~96%) – błyskawiczna konwersja, 98.5% wsparcia. Złoty standard do n8n, WordPressa i e-commerce z idealnym balansem między rozmiarem a szybkością.
* AVIF: ~65 KB (spadek wagi o ~97.5%) – maksymalna możliwa kompresja, 95% wsparcia. Wymaga nieco więcej mocy CPU podczas generowania.

💡 TIP: Jeśli dopiero zaczynasz, jako docelowy format w swoich automatyzacjach wybierz WebP z jakością ustawioną na 80–85%. Gołym okiem nie zauważysz żadnej różnicy względem oryginału PNG, a plik będzie ponad dwudziestokrotnie mniejszy!

4. Krok 1: Przygotowanie folderu na serwerze VPS

Zakładamy, że posiadasz już serwer VPS (np. na Hostingerze lub DigitalOcean) z systemem Ubuntu oraz zainstalowanym Dockerem. Jeśli masz już na serwerze zainstalowane n8n przez Docker Compose, jesteś w domu – wykorzystamy to samo środowisko!

1. Połącz się ze swoim serwerem VPS za pomocą terminala (np. wpisując `ssh root@TWOJE_IP_SERWERA` w wierszu poleceń Windows PowerShell lub terminalu na Macu).
2. Utwórzmy uporządkowany katalog dla naszego serwera kompresji obrazów oraz podkatalog na ewentualne pliki lokalne. Wklej poniższe polecenia jedno po drugim i zatwierdź klawiszem Enter:

# Tworzymy folder o nazwie 'imagor' oraz podfolder 'storage' w katalogu domowym
mkdir -p ~/imagor/storage

# Wchodzimy do nowo utworzonego folderu 'imagor'
cd ~/imagor

5. Krok 2: Tworzenie pliku docker-compose.yml

Teraz stworzymy plik `docker-compose.yml`, który jest przepisem mówiącym Dockerowi, skąd ma pobrać program Imagor i jak go uruchomić.

Wpisz w terminalu komendę `nano docker-compose.yml`, wklej poniższą konfigurację i zapisz plik skrótem Ctrl+O oraz Ctrl+X.

### Co oznaczają kluczowe parametry?
* `image: shumc/imagor:latest` – oficjalny, stabilny obraz Imagor z Docker Hub.
* `ports: - "127.0.0.1:8000:8000"` – kluczowa linijka bezpieczeństwa! Wystawia usługę na porcie 8000, ale tylko w pętli zwrotnej 127.0.0.1, co oznacza, że dostęp mają wyłącznie programy z tego samego VPS-a (np. n8n).
* `IMAGOR_UNSAFE=1` – wyłącza wymóg podpisywania URL kluczem HMAC, co ułatwia budowanie zapytania w n8n.
* `HTTP_LOADER_MAX_ALLOWED_SIZE=25000000` – pozwala pobierać obrazy źródłowe o wadze do 25 MB.
* `volumes: - ./storage:/mnt/data` – montuje lokalny katalog storage do kontenera.

services:
  imagor:
    image: shumc/imagor:latest
    container_name: imagor
    restart: unless-stopped
    ports:
      - "127.0.0.1:8000:8000"
    environment:
      - PORT=8000
      - IMAGOR_UNSAFE=1
      - FILE_STORAGE_BASE_DIR=/mnt/data
      - FILE_LOADER_BASE_DIR=/mnt/data
      - HTTP_LOADER_MAX_ALLOWED_SIZE=25000000
    volumes:
      - ./storage:/mnt/data

6. Krok 3: Uruchomienie serwera i pierwszy test w terminalu

Będąc w folderze `~/imagor`, wpisz komendę `docker compose up -d`. Docker pobierze obraz i uruchomi kontener w tle. Status możesz sprawdzić przez `docker compose ps`.

### Przetestujmy kompresję w praktyce!
Pobierzemy przykładowe zdjęcie z Unsplash o wadze ponad 3.2 MB, polecimy Imagorowi przeskalować je do 800x600 px z jakością WebP 80% i zapiszemy wynik na dysku:

# 1. Uruchomienie kontenera w tle
docker compose up -d

# 2. Test kompresji obrazu z internetu w locie do formatu WebP (80%)
curl -o test-zoptymalizowany.webp "http://localhost:8000/unsafe/800x600/filters:format(webp):quality(80)/https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe"

# 3. Sprawdzenie rozmiaru wynikowego pliku
ls -lh test-zoptymalizowany.webp

7. Krok 4: Jak sterować rozmiarem, jakością i znakiem wodnym za pomocą adresu URL?

Największą zaletą narzędzia Imagor jest to, że nie musisz pisać kodu. Wszystkimi parametrami obróbki zdjęcia sterujesz poprzez strukturę adresu URL:
`http://localhost:8000/unsafe/{WYMIARY}/{FILTRY}/{ADRES_ZDJECIA_ZRODLOWEGO}`

### 1. Zmiana rozmiaru i proporcji
* `1200x630` – przycina i skaluje zdjęcie dokładnie do formatu miniatury (OpenGraph / blog).
* `1000x0` – zmienia szerokość na 1000 px, a wysokość dopasowuje automatycznie z zachowaniem proporcji.
* `fit-in/1024x1024` – zmniejsza zdjęcie do ramki 1024x1024 px bez obcinania krawędzi.

### 2. Formaty, jakość i filtry
* `filters:format(webp)` oraz `filters:format(avif)` – wybór formatu wyjściowego.
* `filters:quality(82)` – jakość kompresji (1–100).
* `filters:strip_exif()` – usuwa metadane EXIF i ukryte parametry generowania z ComfyUI.
* `filters:watermark(logo.png,-20,-20,30)` – nakłada znak wodny z przezroczystością 30% w prawym dolnym rogu.

http://localhost:8000/unsafe/1200x0/filters:format(webp):quality(82):strip_exif()/https://twoj-serwer.pl/surowy-obraz-z-fluxa.png

8. Krok 5: Praktyczna integracja z n8n

Gdy zewnętrzne API generujące grafikę (Replicate, Fal.ai, RunPod lub OpenAI) zwraca adres URL surowego pliku PNG w zmiennej `{{ $json.image_url }}`, w workflow n8n wystarczy dodać węzeł HTTP Request:

1. Method: Ustaw na `GET`.
2. URL: W trybie Expression wpisz `http://host.docker.internal:8000/unsafe/1200x0/filters:format(webp):quality(82)/{{ $json.image_url }}` (lub `http://imagor:8000/...` we wspólnej sieci Dockerowej).
3. Response Format: W sekcji Add Option -> Response wybierz File (plik binarny).
4. Put Output in Field: Zostaw domyślne `data`.

Otrzymany plik binarny `image/webp` możesz od razu przesłać do węzła WordPress (Upload Media), Ghost, Shopify lub AWS S3 / Cloudflare R2.

💡 TIP: Jeśli grafika płynie wewnątrz n8n jako dane binarne (z lokalnego ComfyUI), zapisz ją do wspólnego folderu storage węzłem Read/Write Files from Disk (np. /mnt/data/temp.png) i wywołaj Imagor podając samą nazwę: http://imagor:8000/unsafe/1200x0/filters:format(webp):quality(80)/temp.png

9. Krok 6: Bezpieczeństwo na produkcji – jak zablokować obcym osobom dostęp do konwertera?

Jeśli wystawisz niezabezpieczony port `8000` publicznie z opcją `IMAGOR_UNSAFE=1`, każdy mógłby wykorzystywać Twój VPS do masowego konwertowania swoich zdjęć.

Dwie metody zabezpieczenia:
1. Dostęp tylko lokalny (Zalecany): Pozostawienie `ports: - "127.0.0.1:8000:8000"`. Port jest niewidoczny z internetu, a n8n komunikuje się z nim w obrębie hosta.
2. Ograniczenie domen źródłowych: Jeśli Imagor ma działać pod publiczną subdomeną (np. `img.twojadomena.pl`), dodaj w sekcji environment zmienną ograniczającą dozwolone źródła pobierania:

    environment:
      - PORT=8000
      - IMAGOR_UNSAFE=1
      - HTTP_LOADER_ALLOWED_SOURCES=twojadomena.pl,*.twojadomena.pl,replicate.delivery,*.r2.dev