Krótka odpowiedź
Zdjęcia zmniejsza się w trzech krokach: wgrywaj je w rozsądnym rozmiarze (dłuższy bok około 1600–2000 px zamiast 6000 px z aparatu), zapisuj w nowoczesnym formacie (WebP lub AVIF) i ładuj dopiero wtedy, gdy klient do nich przewinie. Przy rozsądnej kompresji różnicy w jakości nie widać, a strona ładuje się wyraźnie szybciej, zwłaszcza na telefonie.
Dlaczego zdjęcia tak spowalniają stronę?
Zdjęcie z telefonu lub aparatu waży kilka megabajtów. Na stronie wyświetla się w kafelku szerokim na kilkaset pikseli, ale jeśli motyw nie korzysta z mniejszych wersji, przeglądarka i tak pobiera cały plik. Kilka takich zdjęć na stronie głównej to kilkanaście megabajtów – na danych komórkowych to sekundy czekania i zużyty pakiet danych klienta.
Ile powinno ważyć zdjęcie?
| Rodzaj zdjęcia | Typowy rozmiar | Rozsądna waga |
|---|---|---|
| Duże zdjęcie na górze strony | do ok. 2000 px szerokości | do ok. 200–300 KB |
| Zdjęcie produktu | ok. 1200–1600 px | do ok. 150 KB |
| Miniatura na liście produktów | ok. 400–600 px | kilkadziesiąt KB |
| Zdjęcie we wpisie | ok. 1200 px | do ok. 150 KB |
To orientacyjne wartości – liczy się, żeby zdjęcie było ostre na ekranie, a nie większe, niż potrzeba.
Zanim wgrasz zdjęcie
- Zmniejsz je do dłuższego boku 1600–2000 px.
- Skompresuj w darmowym narzędziu, np. Squoosh, albo zapisz od razu jako WebP.
- Nazwij plik po polsku i opisowo, np. kubek-ceramiczny-niebieski.webp – zamiast IMG_4521.jpg.
- Po wgraniu dodaj tekst alternatywny – opis zdjęcia dla osób niewidomych i dla Google.
Co robi WordPress, a czego nie?
WordPress przy wgrywaniu tworzy kilka mniejszych wersji zdjęcia i podpowiada przeglądarce, którą wybrać na danym ekranie. Bardzo duże zdjęcia (powyżej 2560 px) automatycznie pomniejsza. Domyślnie dodaje też ładowanie zdjęć dopiero przy przewijaniu. Nie kompresuje jednak zdjęć mocno i nie zawsze zamienia je na nowoczesne formaty – a część motywów i kreatorów i tak wstawia pełny rozmiar zamiast mniejszej wersji.
Co ze zdjęciami, które już są na stronie?
Da się je zoptymalizować hurtowo – wtyczką lub po stronie serwera – i podmienić na lżejsze wersje bez ręcznego wgrywania każdego zdjęcia. Warto przy tym:
- zrobić kopię zapasową biblioteki mediów,
- sprawdzić, czy motyw nie ładuje zawsze pełnego rozmiaru zdjęcia,
- zacząć od stron najczęściej odwiedzanych: główna, kategorie, bestsellery,
- zmierzyć stronę przed i po, żeby zobaczyć efekt.
Zdjęcie na górze strony – wyjątek od reguły
Największe zdjęcie widoczne od razu po wejściu (np. baner na stronie głównej) decyduje o wyniku LCP – czasie pojawienia się głównej treści. Tego zdjęcia nie należy ładować leniwie – przeciwnie, przeglądarka powinna pobrać je jako pierwsze. Częsty błąd to slider z kilkoma dużymi zdjęciami ładowanymi naraz albo baner ładowany „leniwie”, przez co pojawia się na końcu.
LCP
Główna treść widoczna
Ile klient czeka, zanim zobaczy najważniejszą część strony.
INP
Reakcja na kliknięcie
Jak szybko strona reaguje na dotknięcie przycisku.
CLS
Stabilny układ
Czy elementy przeskakują podczas ładowania.
Najczęstsze błędy
- Zdjęcia prosto z aparatu w pełnej rozdzielczości.
- Grafiki z tekstem zapisane jako PNG o wadze kilku megabajtów.
- Slider z pięcioma dużymi zdjęciami na górze strony.
- Kilka wtyczek do optymalizacji zdjęć naraz.
- Brak tekstów alternatywnych – strata i dla dostępności, i dla Google.
Zdjęcia to zwykle największy, ale nie jedyny powód wolnej strony. Pozostałe przyczyny opisuję w poradniku Dlaczego moja strona wolno działa na telefonie?.
