Zdjęcia to najcięższy element większości stron WordPress. Często stanowią od 50% do 70% wagi pojedynczej strony, co oznacza, że niezoptymalizowane obrazy są jednym z głównych powodów wolnego ładowania.
Z naszej praktyki w optymalizacji wydajności stron WordPress widzimy, że prawidłowa kompresja zdjęć i przejście na nowoczesny format WebP potrafią same w sobie skrócić czas ładowania strony o połowę, bez żadnych innych zmian technicznych.
W tym poradniku pokazujemy, jak zoptymalizować obrazy w WordPress: które wymiary i formaty wybierać, jak skutecznie kompresować zdjęcia oraz które wtyczki do optymalizacji zdjęć faktycznie warto wdrożyć. Optymalizacja obrazów to też jedna z technik opisanych szerzej w naszym przewodniku jak przyspieszyć stronę WordPress, tu zaglądamy w temat głębiej.
Dlaczego optymalizacja zdjęć ma realne znaczenie
Obrazy wpływają na wydajność strony WordPress na trzy sposoby naraz.
Po pierwsze, na czas ładowania.
Im większe pliki graficzne, tym dłużej przeglądarka musi je pobrać z serwera i wyświetlić użytkownikowi. Niezoptymalizowane zdjęcie z aparatu fotograficznego może mieć 4-8 MB. Dobrze przygotowany odpowiednik wyświetlany na stronie internetowej to często 50-150 KB, czyli dziesiątki razy mniej, bez widocznej dla oka utraty jakości.
Po drugie, na wskaźniki Core Web Vitals.
Największy obraz widoczny na ekranie (LCP, Largest Contentful Paint) to często główny baner strony albo zdjęcie produktowe. Jeśli ten obraz waży kilka megabajtów, LCP rośnie do kilku sekund, a to przekłada się wprost na pozycje w Google.
Po trzecie, na konwersję na urządzeniach mobilnych.
Część użytkowników korzysta z wolniejszego internetu mobilnego albo z urządzeń o ograniczonej mocy obliczeniowej. Ciężka strona ładuje się u nich tak wolno, że rezygnują, zanim treść w ogóle się pojawi. Dla sklepu internetowego i strony usługowej to bezpośrednia strata zapytań i sprzedaży.
Trzy obszary, które trzeba ogarnąć
Optymalizacja obrazów składa się z trzech niezależnych decyzji, które najlepiej działają razem.
1. Odpowiednie wymiary
Najczęstszy błąd, jaki widzimy u klientów, to wgrywanie zdjęć w pełnej rozdzielczości prosto z aparatu. Plik 4000 × 3000 px ma kilkanaście MB. Tymczasem strona internetowa wyświetla obraz najwyżej w rozdzielczości 1200-1920 px szerokości, a na urządzeniach mobilnych jeszcze mniej. Zmniejszenie wymiarów przed wgraniem to najprostszy, a często najskuteczniejszy krok w całej optymalizacji.
Praktyczne wartości, od których warto zacząć:
- Banery i obrazy hero: do 1920 px szerokości
- Obrazy w treści wpisów: do 1200 px szerokości
- Miniaturki produktów i kafelki: 400-600 px szerokości
2. Kompresja
Po zmniejszeniu wymiarów warto zmniejszyć też wagę pliku przez kompresję. Są dwa rodzaje:
- Bezstratna, usuwa metadane i optymalizuje strukturę pliku bez utraty jakości. Idealna dla grafik z tekstem, logotypów, ikon i obrazów wektorowych zapisanych jako PNG.
- Stratna, usuwa drobne, niewidoczne dla oka informacje. Pozwala zmniejszyć plik o 50-80% przy minimalnej utracie jakości. Zalecana dla zdjęć fotograficznych.
Dobre wtyczki do kompresji potrafią zmniejszyć wagę typowego zdjęcia o 60-70% bez widocznego pogorszenia jakości.
3. Nowoczesne formaty (WebP, AVIF)
Klasyczne formaty (JPG, PNG) zostały zaprojektowane dziesięciolecia temu. WebP, opracowany przez Google, jest średnio o 25-35% lżejszy od JPG przy tej samej jakości, a AVIF (najnowszy format) potrafi dać redukcję nawet 50%.
WebP obsługują wszystkie nowoczesne przeglądarki. AVIF jest młodszy i ma trochę słabsze wsparcie, ale zyskuje na popularności. W praktyce dla większości stron WordPress wystarczy konwersja do WebP, najlepiej z automatycznym fallbackiem do JPG dla starszych przeglądarek. Większość wtyczek do optymalizacji robi to automatycznie.
Najlepsze wtyczki do optymalizacji zdjęć w WordPress
WordPress nie ma wbudowanych narzędzi do zaawansowanej optymalizacji zdjęć, ale jest kilka wtyczek, które robią to za nas automatycznie podczas wgrywania nowych plików i potrafią też przerobić istniejącą bibliotekę mediów.
Smush
Jedna z najpopularniejszych wtyczek tego typu. W darmowej wersji oferuje bezstratną kompresję i podstawowe lazy loading. Wersja płatna (Smush Pro) dodaje kompresję stratną, konwersję do WebP i przetwarzanie w masie istniejącej biblioteki mediów.
Mocne strony: prosta konfiguracja, dobra darmowa wersja, popularność wśród użytkowników. Słabe strony: w darmowej wersji limit 5 MB na plik, dla większych zdjęć trzeba ręcznie zmniejszyć przed wgraniem.
ShortPixel
Wtyczka działająca w modelu kredytowym, kupujesz pulę zdjęć do skompresowania (np. 10 000 zdjęć za 10 USD jednorazowo). Oferuje kompresję bezstratną i stratną oraz konwersję do WebP i AVIF.
Mocne strony: świetna jakość kompresji, brak miesięcznej opłaty, hojny darmowy plan (100 zdjęć/mies). Słabe strony: model kredytowy może być mylący na początku, do bardzo dużych bibliotek robi się drogi.
Imagify
Wtyczka od tego samego zespołu, który tworzy WP Rocket. Trzy poziomy kompresji (Normal, Aggressive, Ultra), konwersja WebP, masowa optymalizacja istniejących obrazów.
Mocne strony: świetna integracja z popularnymi builderami i z WP Rocket, intuicyjny interfejs. Słabe strony: darmowy plan tylko 20 MB miesięcznie, dla aktywnej strony szybko wystarczający.
Optimole
Wtyczka, która przechowuje zoptymalizowane obrazy w swoim CDN i wyświetla je dostosowane do urządzenia użytkownika (resize on-the-fly). Oryginalne pliki zostają na hostingu nietknięte.
Mocne strony: automatyczne dostosowanie obrazów do urządzenia, wbudowany CDN, dobra darmowa wersja. Słabe strony: uzależnienie od dostępności zewnętrznego serwisu, w razie problemów z CDN obrazy mogą się nie wyświetlać.
EWWW Image Optimizer
Alternatywa dla osób ceniących niezależność. Może kompresować lokalnie na serwerze, bez wysyłania plików do zewnętrznego API. To dość unikalne wśród popularnych wtyczek.
Mocne strony: lokalna kompresja, brak limitów ilościowych w darmowej wersji, pełna kontrola nad procesem. Słabe strony: wymaga większej mocy serwera, mniej przyjazny interfejs niż konkurencja.
Nasza sugestia dla większości stron to ShortPixel albo Imagify, w zależności od preferencji modelu rozliczeń. Dla osób, które chcą mieć kompresję i CDN w jednym rozwiązaniu, Optimole. Dla bardzo dużych bibliotek mediów EWWW.
Lazy loading, opóźnione ładowanie obrazów
Lazy loading to technika, w której obraz jest ładowany dopiero w momencie, gdy użytkownik przewija stronę do miejsca, w którym się znajduje. Dzięki temu początkowe wczytanie strony jest szybsze, bo przeglądarka nie musi pobierać wszystkich zdjęć od razu.
Dobra wiadomość: WordPress od wersji 5.5 ma wbudowany lazy loading. Atrybut loading="lazy" dodawany jest automatycznie do większości obrazów wstawianych przez edytor.
Dla większości stron natywny lazy loading w pełni wystarczy. Jeśli używasz wtyczki cache (WP Rocket, LiteSpeed Cache), masz zwykle dostęp do bardziej zaawansowanej wersji, która działa również dla iframe’ów, wideo i obrazów wstawianych przez CSS.
Krótka lista, co dziś sprawdzić w swoim WordPressie
- Sprawdź największy obraz na stronie głównej, jeśli waży więcej niż 200-300 KB, jest pole do poprawy.
- Zweryfikuj wymiary obrazów banerów i hero, jeśli mają więcej niż 1920 px, są niepotrzebnie duże.
- Zainstaluj wtyczkę do kompresji, na początek polecamy Smush, ShortPixel albo Imagify.
- Włącz konwersję WebP w ustawieniach wtyczki, jeśli jeszcze nie działa.
- Sprawdź lazy loading, w WordPress 5.5+ działa automatycznie, ale warto zweryfikować w narzędziach developerskich przeglądarki.
Dla osób, które chcą pełną listę optymalizacji wydajności strony, mamy gotową checklistę przyspieszania WordPress krok po kroku. A jeśli zastanawiasz się, dlaczego mimo wcześniejszej optymalizacji strona z czasem znów zwalnia, pomocny będzie też artykuł o tym, dlaczego strona WordPress zwalnia po kilku miesiącach.
Optymalizacja obrazów jako stały element opieki
Optymalizacja obrazów to jedno z tych zadań, które warto zrobić raz porządnie i potem mieć z głowy. Wtyczka kompresująca automatycznie zajmie się każdym nowym zdjęciem wgrywanym do biblioteki mediów, dzięki czemu raz osiągnięta wydajność utrzymuje się w czasie.
Jeśli wolisz, żeby zajęli się tym specjaliści (kompresja istniejącej biblioteki, konwersja do WebP, konfiguracja wtyczki, ustawienie sensownych domyślnych rozdzielczości), sprawdź nasz cennik opieki WordPress. Optymalizacja obrazów wchodzi w skład przyspieszania działania WordPress i jest regularnie monitorowana, żeby nowo wgrywane zdjęcia nie psuły wcześniej osiągniętej wydajności.
