Najlepszy sposób na kompresowanie obrazów w WordPressie to połączenie dwóch działań: najpierw zmniejsz wymiary pliku do rozmiaru, w jakim faktycznie będzie wyświetlany, a następnie skompresuj go i zapisz w formacie WebP lub AVIF. Wtyczka może zautomatyzować ten proces, ale nie zastąpi właściwego skalowania zdjęcia.
Dlaczego waga obrazów ma znaczenie?
Duże grafiki zwiększają ilość danych, które przeglądarka musi pobrać przed wyświetleniem strony. Jest to szczególnie odczuwalne na urządzeniach mobilnych i przy wolniejszym połączeniu. Obrazy często należą do największych zasobów na stronie, dlatego ich optymalizacja może skrócić czas ładowania i zmniejszyć zużycie transferu.
Wpływa to także na Core Web Vitals. Duży obraz umieszczony wysoko na stronie może opóźniać LCP, czyli moment wyświetlenia największego elementu widocznego po wejściu na stronę. Lepsza wydajność poprawia komfort użytkownika i może wspierać ocenę strony w wyszukiwarce, ale sama kompresja nie gwarantuje wyższej pozycji.
Jak przygotować obraz przed wgraniem do WordPressa?
Najbezpieczniejszy workflow wygląda tak: przygotuj plik na komputerze, wgraj go do biblioteki mediów, a następnie pozwól wtyczce wykonać dodatkową optymalizację. Postępuj według tej kolejności:
- Ustal rzeczywisty rozmiar wyświetlania – jeśli zdjęcie będzie zajmowało na stronie 800 pikseli szerokości, nie zapisuj go w rozdzielczości 6000 × 4000 pikseli. Zachowaj proporcje podczas skalowania. Dla dużego banera potrzebny może być większy plik, natomiast miniaturka lub grafika w kolumnie wymaga znacznie mniejszych wymiarów.
- Wybierz format – zdjęcia najczęściej dobrze sprawdzają się jako WebP, AVIF albo JPEG. PNG zostaw dla grafik wymagających przezroczystości lub bardzo ostrych krawędzi, na przykład prostych logotypów.
- Skompresuj plik – po zmianie wymiarów zastosuj kompresję stratną lub bezstratną. Możesz użyć programu graficznego, narzędzia online albo wtyczki WordPress.
- Sprawdź jakość i wagę – obejrzyj obraz w rzeczywistym rozmiarze na stronie. Dla wielu zdjęć publikowanych w treści rozsądnym punktem odniesienia jest około 50–150 KB, ale nie jest to sztywny limit. Duży obraz otwierający stronę może ważyć więcej, a mała ikona powinna być znacznie lżejsza.
Nie wgrywaj zdjęć prosto z aparatu, jeśli mają kilka tysięcy pikseli szerokości i kilka megabajtów. WordPress tworzy własne warianty obrazów, ale nie oznacza to, że oryginał przestaje istnieć ani że każda wtyczka lub motyw użyje najmniejszej wersji.
Kompresja bezstratna usuwa głównie zbędne metadane i inne informacje techniczne, nie zmieniając obrazu. Zwykle daje mniejszą redukcję rozmiaru. Kompresja stratna usuwa część danych obrazu, dlatego może zmniejszyć plik znacznie bardziej, ale przy zbyt agresywnych ustawieniach powoduje widoczne artefakty. W praktyce warto zacząć od umiarkowanej jakości i sprawdzić efekt zamiast wybierać najniższą możliwą wagę.
Jaki format obrazu wybrać?
Dobór formatu zależy od rodzaju grafiki, wymaganej przezroczystości i obsługi po stronie używanych narzędzi. Najczęstsze zastosowania przedstawia tabela:
| Format | Zastosowanie | Kompresja | Przezroczystość |
|---|---|---|---|
| JPEG | Zdjęcia i obrazy z dużą liczbą kolorów | Najczęściej stratna | Nie |
| PNG | Logotypy, zrzuty ekranu, proste grafiki | Bezstratna lub zoptymalizowana | Tak |
| WebP | Zdjęcia, grafiki z przezroczystością i animacje | Stratna lub bezstratna | Tak |
| AVIF | Zdjęcia i grafiki wymagające małych plików | Stratna lub bezstratna | Tak |
WebP jest szeroko obsługiwany przez współczesne przeglądarki i zwykle pozwala uzyskać mniejszy plik niż JPEG przy podobnej jakości. AVIF, oparty na technologii AV1, może osiągać jeszcze lepszą kompresję, ale przed wdrożeniem trzeba sprawdzić obsługę w używanym motywie, wtyczce i procesie dostarczania obrazów. WordPress obsługuje WebP od wersji 5.8, jednak sposób generowania i wyświetlania takich plików może zależeć od konfiguracji witryny.
Jakie wtyczki do kompresji obrazów wybrać?
Wtyczka przydaje się szczególnie wtedy, gdy obrazy dodaje kilka osób albo gdy chcesz zoptymalizować starszą bibliotekę mediów. Przed instalacją sprawdź, czy wybrane narzędzie nie dubluje funkcji już zapewnianych przez hosting, CDN lub inną wtyczkę.
Popularne rozwiązania różnią się sposobem działania i zakresem automatyzacji:
- Imagify – oferuje automatyczną kompresję, kilka poziomów jakości i konwersję do WebP.
- ShortPixel Image Optimizer – pozwala precyzyjnie kontrolować poziom kompresji i obsługuje popularne formaty nowej generacji.
- Smush – jest prosty w konfiguracji i wygodny dla osób, które chcą rozpocząć optymalizację bez zaawansowanych ustawień.
- EWWW Image Optimizer – udostępnia szeroki zakres ustawień, a w niektórych konfiguracjach pozwala wykonywać część operacji lokalnie na serwerze.
Po instalacji ustaw maksymalne wymiary nowych obrazów, wybierz poziom kompresji i włącz generowanie WebP lub AVIF, jeśli dana wtyczka i środowisko strony obsługują tę funkcję. Następnie przetestuj kilka zdjęć. Sprawdź nie tylko ich wygląd, ale też to, jaki adres pliku faktycznie pojawia się w kodzie strony.
Checklista przed publikacją zdjęcia
Przed opublikowaniem wpisu lub produktu sprawdź cztery elementy:
- Zdjęcie ma wymiary dopasowane do miejsca, w którym zostanie wyświetlone.
- Plik został zapisany w WebP, AVIF albo innym formacie dopasowanym do jego zastosowania.
- Obraz ma opis alternatywny, który wyjaśnia jego treść lub funkcję. Dla grafiki dekoracyjnej pozostaw pusty atrybut alt.
- Wtyczka do kompresji jest aktywna, a jej ustawienia nie obniżają nadmiernie jakości obrazu.
Po wdrożeniu zmian sprawdź stronę w Google PageSpeed Insights. Zwróć uwagę na LCP, rozmiar przesyłanych danych i zalecenia dotyczące kodowania obrazów. Jeśli grafiki znajdują się poniżej pierwszego ekranu, lazy loading może ograniczyć ich wpływ na początkowe ładowanie. Obrazu hero nie należy opóźniać bez powodu, ponieważ może to pogorszyć LCP.
Najważniejsza zasada jest prosta: najpierw skaluj obraz, potem wybierz format i kompresję, a na końcu włącz automatyzację we wtyczce. Taki proces ogranicza wagę plików bez uzależniania szybkości strony wyłącznie od jednego narzędzia.
