WSRV.nl na vlastnom serveri: ako som vyriešil konverziu WebP obrázkov bez zálohovania na webhostingu

WSRV.nl na vlastnom serveri: ako som vyriešil konverziu WebP obrázkov bez zálohovania na webhostingu

WSRV.nl na vlastnom serveri: ako som vyriešil konverziu WebP obrázkov bez zálohovania na webhostingu 1920 1080 Maroš Vavro

Keď som pred pár mesiacmi rozbiehal automatizáciu publikovania obsahu na Pinterest cez n8n, narazil som na problém, ktorý na prvý pohľad vyzeral banálne. Obrázky z knižnice médií na hoplo.sk boli väčšinou vo formáte WebP, pretože tento formát šetrí miesto na serveri a zrýchľuje načítanie stránky. Pinterest API však WebP nespracúva vždy spoľahlivo a pri automatizovanom nahrávaní cez n8n mi tak vznikali chyby, alebo sa obrázok na profile jednoducho nezobrazil. Potreboval som teda spôsob, ako obrázky za behu konvertovať do formátu, ktorý Pinterest prijme bez problémov, a to bez mesačného poplatku za externú SaaS službu. Riešením sa napokon stalo nasadenie open source nástroja wsrv.nl na vlastnom serveri. V tomto článku popisujem, prečo som sa preň rozhodol, ako prebehlo nasadenie cez Docker a čo mi táto zmena priniesla v praxi.

Odkiaľ vznikla potreba tohto riešenia

wsrv3 diagram

Automatizácia publikovania na Pinterest bola súčasťou širšieho workflowu v n8n, ktorý som staval pre evolum.sk. Workflow vyberal obrázky, generoval k nim tituly a popisy a následne ich posielal cez API priamo do Pinterest účtu. Prvé testy fungovali len na malej vzorke obrázkov, ktoré boli náhodou vo formáte JPG. Akonáhle sa do workflowu dostali WebP súbory priamo z knižnice médií, začali sa objavovať chyby pri nahrávaní. Potreboval som teda krok, ktorý obrázok skonvertuje ešte pred odoslaním na Pinterest, priamo v rámci automatizovaného behu a bez akéhokoľvek manuálneho zásahu.

Čo je WebP a prečo ho vôbec používame

wsrv4 diagram

WebP je moderný obrázkový formát od Google, ktorý ponúka o 25 až 35 percent menšie súbory ako JPG alebo PNG pri porovnateľnej kvalite. Dnes ho podporuje prakticky každý bežný prehliadač, takže je ideálny na servírovanie obrázkov na webe, kde sa počíta každý kilobajt kvôli rýchlosti načítania. Práve preto ho používam ako predvolený formát v knižnici médií na evolum.sk. Problém nastáva vo chvíli, keď treba obrázok poslať mimo webu, do externého API tretej strany. Nie každá platforma má s WebP rovnakú skúsenosť ako bežné prehliadače a Pinterest je presne tento prípad.

Prečo bežné riešenia nestačili

Prvá možnosť, ktorá mi napadla, bola manuálna konverzia obrázkov pred nahraním. Pri jednotlivých príspevkoch by to ešte fungovalo, no pri automatizácii, ktorá má publikovať desiatky obrázkov týždenne, by manuálny krok poprel celý zmysel workflowu. Druhá možnosť boli platené SaaS nástroje na konverziu a optimalizáciu obrázkov. Fungujú spoľahlivo, no pri väčšom objeme obrázkov mesačný poplatok rýchlo narastá a pre interný projekt bez priameho príjmu som takýto opakovaný výdavok nechcel platiť. Hľadal som teda riešenie, ktoré viem ovládať sám, nasadiť raz a používať opakovane bez ďalších nákladov.

Technické a prevádzkové výzvy

Vlastné riešenie so sebou prinieslo iné starosti. Potreboval som nájsť nástroj, ktorý viem nasadiť ako Docker kontajner na existujúcom VPS bez toho, aby zaťažil ostatné služby bežiace na tom istom serveri. Zároveň musel byť dostupný cez samostatnú subdoménu, aby ho n8n workflow vedel volať ako bežné API. Treťou výzvou bolo rozhodnutie, či popri WebP verziách naďalej archivovať aj pôvodné JPG a PNG súbory, čo by zvyšovalo nároky na úložisko, alebo vsadiť na konverziu za behu a originály nedržať vôbec.

Postup nasadenia a riešenie

Po niekoľkých testoch som sa rozhodol pre kombináciu troch krokov. Vybral som vhodný nástroj, nasadil som ho cez Docker a napojil som ho na vlastnú subdoménu. Každý z týchto krokov priniesol vlastné poučenie.

Prečo padla voľba na wsrv.nl

wsrv.nl je open source služba na cache a zmenu veľkosti obrázkov postavená na nginx a knižnici libvips, s CDN vrstvou cez Cloudflare. Práve kombinácia rýchlosti libvips a možnosti nasadiť si celú službu vo vlastnej Docker inštancii ma presvedčila, že ide o správnu voľbu pre konverziu formátov priamo v rámci automatizácie. Namiesto volania cudzieho API som mohol posielať požiadavky na vlastnú adresu, ktorú plne kontrolujem.

Nasadenie cez Docker

wsrv2

Kontajner som spustil na tom istom Contabo VPS, kde bežia aj ostatné moje projekty spravované cez HestiaCP a Coolify. Nasadenie prebehlo bez väčších komplikácií, keďže wsrv.nl má pripravený oficiálny Docker image a stačilo nastaviť len základné premenné prostredia. Jediné, na čo som si musel dať pozor, bolo správne routovanie prevádzky tak, aby kontajner nekolidoval s ostatnými službami na serveri.

Nastavenie subdomény a DNS A záznamu

Aby n8n vedel kontajner volať ako štandardné API, potreboval som samostatnú subdoménu. U doménového poskytovateľa som pridal A záznam smerujúci na IP adresu VPS a následne nastavil reverzný proxy tak, aby požiadavky na túto subdoménu presmeroval priamo na wsrv.nl kontajner. Po vystavení certifikátu už stačilo v n8n workflowe zameniť pôvodnú adresu obrázka za novú adresu s parametrami pre výstupný formát.

Prístup bez zálohy originálov

Väčšina WordPress pluginov na WebP konverziu odporúča ponechať pôvodné JPG a PNG súbory ako zálohu popri WebP verzii. Ja som sa rozhodol ísť opačnou cestou a servírovať iba WebP bez duplicitných originálov. Ušetrilo mi to citeľnú časť úložiska na serveri. Riziko tohto prístupu je, že pri budúcej potrebe iného formátu už nemám poistku v podobe originálu. Túto obavu napokon vyriešil práve wsrv.nl, ktorý dokáže obrázok skonvertovať do požadovaného formátu za behu, takže absencia zálohy v praxi neprekáža.

Porovnanie s inými nástrojmi

wsrv6

wsrv5

Pred finálnym rozhodnutím som porovnal vlastné riešenie aj s nástrojmi, ktoré sa na konverziu obrázkov bežne používajú, aby som si overil, že voľba wsrv.nl naozaj dáva zmysel.

WordPress pluginy na WebP konverziu

Konverziu priamo v knižnici médií na WordPress serveri riešia napríklad tieto nástroje:

  • ShortPixel Image Optimizer
  • Imagify od WP Rocket
  • EWWW Image Optimizer
  • Smush

Fungujú dobre pre samotný web, no môj prípad bol iný. Potreboval som konverziu aj mimo WordPressu, priamo v rámci n8n automatizácie, a tam mi tieto pluginy pomôcť nevedeli.

SaaS a iné self hosted alternatívy

Zvažoval som aj tieto možnosti:

  • imgproxy, rýchly a bezpečný samostatný server na zmenu veľkosti a konverziu vzdialených obrázkov
  • Flyimg, dockerizovaná aplikácia na úpravu obrázkov do formátov ako AVIF, WebP, MozJPEG či PNG
  • Cloudinary a ImgIX, platené cloudové služby s mesačným poplatkom

Prvé dve riešenia sú kvalitné, no pri porovnaní s wsrv.nl som nenašiel dôvod prechádzať na zložitejšie nastavenie. Platené cloudové služby by problém tiež vyriešili, no pri mojom objeme obrázkov by mesačný poplatok predstavoval zbytočný náklad.

Prečo som pri porovnaní zvolil práve wsrv.nl

wsrv1

V prospech wsrv.nl rozhodli tri veci:

  • žiadny mesačný poplatok
  • jednoduché nasadenie cez Docker
  • výkon, ktorý mi vďaka nginx a libvips stačí aj pri väčšom objeme obrázkov

Navyše mám nad celou inštanciou plnú kontrolu, čo pri interných projektoch, kde chcem mať náklady pod kontrolou, považujem za rozhodujúcu výhodu.

Výsledky a merateľné výstupy

Odkedy wsrv.nl beží ako súčasť n8n workflowu, obrázky sa na Pinterest nahrávajú bez chýb spôsobených nekompatibilným formátom a celý proces publikovania beží plynulo bez manuálnych zásahov. Presné čísla, koľko obrázkov mesačne kontajner spracuje, aká je reálna úspora oproti plateným alternatívam a koľko miesta ušetrila konverzia bez zálohy originálov, doplním do článku priebežne po zbere dát z produkčnej prevádzky. Rovnaký princíp plánujem nasadiť aj pri ďalších automatizáciách, ktoré pracujú s obrázkami mimo samotného webu.

Záverečné zhodnotenie projektu a osobný pohľad

Čo fungovalo a čo by som zopakoval

Rozhodnutie siahnuť po open source riešení namiesto plateného SaaS nástroja sa vyplatilo. Naučil som sa vďaka nemu rozumieť celému procesu konverzie namiesto toho, aby som bol závislý od cudzieho API. Rovnako by som znova zvolil konverziu obrázkov bez zálohy originálov, pretože v kombinácii s wsrv.nl mi to ušetrilo miesto bez toho, aby som prišiel o možnosť získať iný formát neskôr. Nasadenie priamo na existujúci VPS cez Docker bol tiež krok, ktorý by som pri podobnom projekte urobil znova, keďže mi umožnil držať celú infraštruktúru pod jednou strechou.

Čo by som zlepšil a čo plánujem nasadiť

Keby som riešenie nasadzoval dnes, hneď od začiatku by som si nastavil monitoring, ktorý mi ukáže, koľko obrázkov kontajner spracuje a či niekedy zaznamená chybu. Momentálne to riešim skôr spätne, keď sa niečo pokazí. Rád by som tiež pridal automatický test, ktorý po každom nasadení overí, že subdoména a DNS záznam fungujú správne. Podobné problémy s routovaním som už riešil pri iných projektoch na tomto serveri a chcem ich pri wsrv.nl odhaliť skôr, než ovplyvnia bežiacu automatizáciu.

Maroš Vavro

Špecializujem sa na správu sociálnych sietí, tvorbu obsahových stránok, online projekty a SEO optimalizáciu, s dôrazom na tvorbu webstránok v WordPress.

Prečítajte si aj ďalšie články od autora - Maroš Vavro