Optymalizacja zdjęć w WordPressie: kompresja i opóźnione ładowanie.

Obrazy są istotną częścią treści na stronie internetowej, ale mogą też znacząco spowolnić jej działanie. Na przykład nieoptymalizowany obraz o wysokiej rozdzielczości (np. 5 MB) może wydłużyć czas ładowania strony o 3–5 sekund, co z kolei może sprawić, że użytkownicy stracą cierpliwość. Na szczęście optymalizacja obrazów jest prosta i można to zrobić za pomocą dwóch kluczowych metod: „kompresji rozmiaru” i „opóźnionego ładowania”, co pozwala skrócić czas ładowania obrazów o ponad 501 TP4T. W tej sekcji pokażemy, jak to zrobić automatycznie za pomocą wtyczki, dzięki czemu nawet początkujący będą mogli to zrealizować bez żadnej wiedzy technicznej.

I. Dlaczego obrazy muszą być optymalizowane? 3 szokujące dane.

• Obrazy często stanowią 60–80% całkowitej wielkości plików na stronie internetowej (o wiele więcej niż tekst, kod i inne elementy).
• Za każdą dodatkową sekundę czasu ładowania strony użytkownicy odchodzą w liczbie 20% (zwłaszcza użytkownicy na urządzeniach mobilnych są bardziej wrażliwi na szybkość działania).
• Nieuoptymalizowane obrazy bezpośrednio zmniejszają wynik Google PageSpeed (wpływają na ranking SEO).

Główny celNależy skompresować obrazy o rozmiarze 50%–80% bez wyraźnej utraty jakości i umożliwić „ładowanie na żądanie” obrazów, które nie są wyświetlane na ekranie głównym.

II. Metoda 1: kompresja obrazów (automatyczne zmniejszenie rozmiaru za pomocą wtyczki)

Zasada kompresji obrazów polega na usunięciu zbędnych danych (np. informacji o urządzeniu, na którym zostały wykonane, czy szczegółów pikseli, które nie są wyświetlane), przy jednoczesnym zachowaniu właściwej jakości obrazu widocznej dla ludzkiego oka. Zaleca się użycie wtyczki „Smush”, która umożliwia automatyczną kompresję, obsługuje przetwarzanie wsadowe istniejących obrazów i automatyczną kompresję nowo przesłanych obrazów.

Krok 1: Zainstaluj i aktywuj wtyczkę Smush.

1. Zaloguj się do panelu administracyjnego WordPressa i przejdź do sekcji „Wtyczki → Zainstaluj wtyczkę”.
2. Wyszukaj „Smush”, znajdź wtyczkę oznaczoną jako „Opracowane przez WPMU DEV”, a następnie kliknij „Zainstaluj” i „Aktywuj”.

Krok 2: Skonfiguruj automatyczną kompresję (nowe obrazy nie wymagają ręcznej obróbki).

Po aktywacji wtyczka automatycznie przejdzie do strony ustawień, gdzie można dokonać konfiguracji zgodnie z poniższymi krokami:

1. Włącz automatyczną kompresję.Na karcie „Ustawienia” upewnij się, że wybrana jest opcja „Automatyczna kompresja nowo przesłanych zdjęć” (domyślnie jest wybrana), aby w przyszłości przesłane zdjęcia były automatycznie kompresowane bez konieczności ręcznej interwencji.
2. Wybierz tryb kompresji.：
   • Początkujący powinni wybrać „kompresję bezstratną” (opcję domyślną): usuwa tylko zbędne dane, nie wpływa na jakość obrazu, a stopień kompresji wynosi około 30%–50%.
   • Jeśli chcesz uzyskać wyższy stopień kompresji (na przykład gdy obraz jest nadal zbyt duży), możesz wybrać „kompresję ze stratami”: przy niewielkiej utracie jakości (niemal niewidocznej dla ludzkiego oka) stopień kompresji może osiągnąć wartość od 601 do 801 TP4T (wymaga to włączenia opcji „Ustawienia zaawansowane”).
3. Zapisz ustawienia.Kliknij „Zapisz ustawienia” na dole strony.

Krok 3: Kompresja wielu istniejących obrazów (jedna operacja, optymalizacja dla całej sieci)

Jeśli na stronie internetowej jest wiele niezkompresowanych zdjęć (np. ilustracje do wcześniej przesłanych artykułów), można je zoptymalizować za pomocą funkcji „kompresji wsadowej” dostępnej w jednym kliknięciu:

1. Na stronie wtyczki Smush kliknij zakładkę „Smush wsadowy” po lewej stronie.
2. Kliknij „Start teraz”, a wtyczka automatycznie przeskanuje wszystkie zdjęcia w bibliotece multimediów.
3. Po zakończeniu skanowania kliknij „Zastosuj Smush do XX zdjęć”, a system dokona kompresji wszystkich zdjęć naraz (proces może potrwać kilka minut, ale nie musisz czekać, bo możesz uruchomić go w tle).
4. Sprawdź efekt kompresji.Po zakończeniu kompresji wyświetlana jest informacja o „łącznej oszczędności miejsca” (np. „zaoszczędzono 12 MB”) wraz z porównaniem rozmiaru każdego obrazu przed i po kompresji.

III. Metoda 2: Ładowanie opóźnione (umożliwiające ładowanie obrazów „na żądanie”)

Zasada lazy loading polega na tym, że:Obraz zacznie się ładować dopiero wtedy, gdy użytkownik przewinie do jego położenia.W ten sposób obrazy na pierwszej stronie (które są pierwszą rzeczą, którą widzimy po otwarciu strony) są ładowane jako pierwsze, a obrazy na innych stronach (np. obrazy towarzyszące artykułom czy obrazy w stopce) są tymczasowo niewczytywane, co znacznie skraca czas wstępnego ładowania.

Uruchom opóźnione ładowanie za pomocą wtyczki Smush przy jednym kliknięciu (bez konieczności instalowania dodatkowych wtyczek).

Smush ma wbudowaną funkcję opóźnionego ładowania, dzięki czemu nie trzeba instalować osobnej wtyczki. Aby ją skonfigurować, postępuj w następujący sposób:

1. Na stronie wtyczki Smush kliknij zakładkę „Ładowanie opóźnione” po lewej stronie.
2. Zaznacz „Włącz ładowanie opóźnione” i postępuj zgodnie z poniższą rekomendacją dotyczącą konfiguracji:
   • „Typy obrazów z opóźnionym ładowaniem”: wybierz wszystko (obrazy, avatary, miniatury itd..).
   • „Wyłącz zdjęcia na ekranie głównym”: zaleca się zaznaczenie tej opcji (zdjęcia na ekranie głównym nie są opóźnione, dzięki czemu użytkownicy mogą szybciej zobaczyć główną zawartość po otwarciu strony).
   • „Animacja ładowania”: pozostawić jako domyślne (pokazuje delikatną animację, która informuje użytkownika, że zdjęcie jest w trakcie ładowania).
3. Kliknij „Zapisz ustawienia”, a opóźnione ładowanie zacznie działać natychmiast.

Sprawdź, czy opóźnione ładowanie działa.

1. Otwórz dowolną stronę artykułu na stronie internetowej (zawierającą wiele zdjęć) i naciśnij F12, aby otworzyć „Narzędzia dla deweloperów” w przeglądarce.
2. Kliknij na zakładkę „Sieć”, odśwież stronę i sprawdź, jak są ładowane obrazy:
   • Podczas pierwszego ładowania na liście „Sieć” wyświetlane są tylko obrazy na pierwszej stronie.
   • Przewiń stronę w dół, a rekordy pobierania tych obrazów pojawią się na liście „Sieć”, gdy obrazy spoza pierwszej strony wejdą w pole widzenia, co oznacza, że funkcja opóźnionego ładowania działa prawidłowo.

Dodatkowe wskazówki dotyczące optymalizacji zdjęć, które każdy początkujący musi znać.

Wybierz odpowiedni format obrazu (co jest jeszcze ważniejsze niż kompresja).

Przed przesłaniem zdjęcia należy wybrać odpowiedni format, aby zmniejszyć jego rozmiar u źródła:

• Zdjęcie / złożony obrazW formacie WebP (o rozmiarze o 301% mniejszym niż JPG i z lepszą jakością obrazu) wtyczka Smush automatycznie konwertuje pliki JPG/PNG na WebP (włącz opcję „Automatyczna konwersja na WebP” w ustawieniach zaawansowanych).
• Proste grafiki / ikonyNależy unikać formatu JPG i zamiast tego używać formatu PNG (obsługującego przezroczyste tło i małe rozmiary plików).
• Zdecydowanie nie używaj formatów BMP i TIFF.Te formaty są bardzo duże i nie nadają się do użycia na stronach internetowych.

Kontroluj rozmiar obrazów (nie używaj opcji „Pokaż większy obraz”).

Wielu początkujących użytkowników przesyła bezpośrednio zdjęcia w wysokiej rozdzielczości z aparatu (np. 3000 x 2000 pikseli), a następnie wyświetla je w rozmiarze 300 x 200 pikseli w WordPressie — to błąd! Przeglądarka nadal będzie ładować oryginalny duży obraz, co prowadzi do marnowania przepustowości i czasu.

Prawidłowe podejście：

• Przed przesłaniem obrazu należy przyciąć go za pomocą narzędzia do edycji zdjęć (np. wbudowanego w system operacyjny programu Paint lub narzędzia online Canva) do rzeczywistego rozmiaru wyświetlania (np. baner na stronie głównej powinien mieć szerokość 1200 pikseli).
• Jeśli nie umiesz korzystać z narzędzi do edycji zdjęć, możesz zainstalować wtyczkę „Imsanity”, która automatycznie skompresuje duże przesłane zdjęcia do określonego rozmiaru (np. maksymalna szerokość 1200 pikseli).

Unikaj nadużywania zdjęć (im mniej, tym lepiej).

• Jeśli informacje można przekazać za pomocą słów, nie używaj zdjęć (np. do opisu prostych instrukcji).
• Wiele kolejnych zdjęć można połączyć w karuzelę (np. w celu prezentacji produktów), co pozwala ograniczyć liczbę jednocześnie ładowanych obrazów.

5. Rozwiązywanie typowych problemów.

Czy jakość obrazu po kompresji wyraźnie się pogorszczyła?

• Jeśli używasz „kompresji stratnej”, możesz zmniejszyć intensywność kompresji w ustawieniach Smush („Ustawienia zaawansowane” → „Intensywność kompresji” ustaw na 50%).
• Zaleca się najpierw użyć „kompresji bezstratnej” i „formatu WebP”, aby zrównoważyć rozmiar i jakość obrazu.

Czy opóźnione ładowanie powoduje nieprawidłowe wyświetlanie obrazów (np. puste lub niewłaściwie ułożone)?

• Sprawdź, czy wykluczono obrazy na ekranie głównym (jeśli nie, może to prowadzić do opóźnienia w ich ładowaniu i pojawienia się krótkiej pustej ramki).
• Jeśli niektóre obrazy muszą zostać natychmiast załadowane, można to zrobić w ustawieniach „Ładowanie opóźnione” w Smush, wprowadzając nazwę klasy CSS obrazu w polu „Wyklucz” (wymaga to podstawowej wiedzy na temat kodowania; początkujący mogą tymczasowo wyłączyć opóźnione ładowanie na stronie, na której znajduje się ten obraz).

Czy po optymalizacji nie ma wyraźnego wzrostu szybkości?

• Przetestuj ponownie za pomocą GTmetrix (odniesienie). Narzędzie do pomiaru szybkości działania witryny internetowej.Następnie sprawdź, czy czas ładowania się obrazów został skrócony, patrząc na wykres Waterfall.
• Jeśli problem nadal występuje, być może spowodowane jest to innymi czynnikami (np. powolną reakcją serwera lub zbyt wieloma wtyczkami) i konieczne jest połączenie go z dalszymi metodami optymalizacji (np. włączenie pamięci podręcznej).

Podsumowanie

Optymalizacja obrazów to najbardziej opłacalna metoda optymalizacji szybkości witryny — dzięki wtyczce Smush można skrócić czas ładowania obrazów o ponad 501 KB w ciągu zaledwie 10 minut. Kluczowe kroki to: zainstalowanie wtyczki Smush, włączenie automatycznej i wsadowej kompresji oraz włączenie ładowania opóźnionego (z wyłączeniem obrazów na pierwszej stronie).

Pamiętaj, że zasadą optymalizacji obrazów jest „wystarczy, by było dobrze”: nie musisz dążyć do maksymalnej kompresji ani przesyłać zdjęć w rozdzielczości Ultra HD. Najlepszym rozwiązaniem jest znalezienie równowagi pomiędzy jakością a szybkością, aby użytkownicy mogli wyraźnie widzieć treść i szybko ją ładować.