Nginx, WebP i obsługa plików statycznych na hostingu

Hosting webh używa nginx jako reverse proxy przed serwerem Apache. W praktyce oznacza to, że pliki statyczne (obrazki, CSS, JavaScript) trafiają do przeglądarki przez nginx, z pominięciem Apache i reguł w .htaccess. Większości użytkowników to nie przeszkadza, ale kilka popularnych wtyczek WordPressa do optymalizacji grafiki i konwersji WebP zakłada inną architekturę i dlatego nie działa zgodnie z oczekiwaniami. Ten artykuł wyjaśnia, co to znaczy i jak sobie z tym poradzić.

Jak to działa: nginx i Apache na jednym hostingu

Żądania przychodzące do Twojej strony najpierw trafiają do nginx. Nginx decyduje, co z nimi zrobić:

• Pliki statyczne (obrazki, arkusze stylów, skrypty JS, pliki WebP) serwuje samodzielnie, bezpośrednio z dysku, bez angażowania Apache.
• Dynamiczne żądania (pliki .php, strony CMS) przekazuje do Apache, który uruchamia PHP i obsługuje między innymi plik .htaccess.

To rozdzielenie to świadomy wybór: nginx jest szybszy przy serwowaniu statycznych plików i odciąża Apache od tysięcy małych żądań. Dla użytkownika oznacza to lepszy czas ładowania strony. Problem pojawia się dopiero przy wtyczkach, które chcą przejąć kontrolę nad dostarczaniem tych plików.

Dlaczego reguły .htaccess nie działają dla obrazków

Plik .htaccess jest przetwarzany przez Apache. Ponieważ nginx serwuje pliki statyczne bezpośrednio, Apache nigdy ich nie widzi, a .htaccess nie ma możliwości wkroczenia.

Klasyczny przykład: wtyczki do konwersji WebP w WordPressie (Imagify, ShortPixel, Smush) często działają tak:

1. Konwertują obrazki do formatu .webp i zapisują pliki obok oryginałów.
2. Dodają do .htaccess regułę, która wysyła przeglądarkę po plik .webp zamiast .jpg, gdy przeglądarka obsługuje ten format.

Krok 2 nie zadziała na hostingu webh, bo nginx serwuje plik .jpg zanim Apache zdąży sprawdzić .htaccess. Wtyczka „widzi", że pliki WebP są na dysku, ale przeglądarka nadal dostaje oryginały.

Co zamiast: podejścia, które działają

Tryb „CDN friendly" w WebP Express

WebP Express to wtyczka, która jako jedna z niewielu działa poprawnie w środowiskach z nginx reverse proxy. Zamiast polegać na .htaccess, modyfikuje ona kod HTML strony tak, by przeglądarka sama wybierała odpowiedni format.

Konfiguracja dla hostingu webh:

1. Zainstaluj i aktywuj WebP Express.
2. W ustawieniach wybierz tryb CDN Friendly (lub: Alter HTML).
3. Włącz opcję Convert on upload, żeby nowe obrazki były automatycznie konwertowane.
4. Uruchom bulk conversion, żeby przetworzyć istniejące obrazki w bibliotece mediów.

W tym trybie WebP Express zamienia tagi <img> na <picture> z wariantem WebP i fallbackiem do oryginału. Przeglądarka obsługująca WebP pobierze plik .webp, starsza pobierze .jpg. Nginx serwuje oba formaty normalnie, bo nie ma w tym nic dynamicznego.

Inne wtyczki z trybem PHP

Część wtyczek potrafi serwować WebP przez kod PHP zamiast przez .htaccess. Szukaj opcji w stylu „serve via PHP" lub „use <picture> element" w ustawieniach wtyczki. Jeśli wtyczka oferuje tylko konfigurację .htaccess bez alternatywy PHP, na hostingu webh nie zadziała zgodnie z przeznaczeniem.

Obrazki WebP wgrywane bezpośrednio

Jeśli Twój projekt pozwala na przesyłanie plików .webp bezpośrednio (np. jako grafiki w bibliotece mediów), nginx bez problemu je serwuje. Format WebP jest obsługiwany poprawnie, problem dotyczy wyłącznie automatycznego przekierowywania starych formatów na WebP przez .htaccess.

Nginx cache i pliki statyczne

Nginx na hostingu webh może buforować odpowiedzi dla konkretnych stron, co przyspiesza ich ładowanie. Dla plików statycznych cache działa przezroczyście i nie wymaga konfiguracji.

Jeśli po zmianie obrazka lub pliku CSS na dysku przeglądarka nadal pokazuje starą wersję, warto sprawdzić, czy problem nie leży po stronie cache przeglądarki lub cache wtyczki CMS. Sam cache nginx odświeża się automatycznie.