Optymalizacja, SEO, Wordpress

Optymalizacja zdjęć i obrazów w WordPress

Jednym z głównym czynników, który wpływa na długi czas ładowania strony jest nieprawidłowa optymalizacja zdjęć lub jej całkowity brak. Wystarczy jednak przestrzegać kilku zasad, aby zdjęcia wczytywały się bez utraty jakości, a nasza strona ładowała się nawet dwukrotnie szybciej. Poznasz je dzięki lekturze naszego artykułu.

Diagnozując stronę w takich narzędziach, jak GTMetrix lub PageSpeed Insights, w kwestii optymalizacji obrazów najczęściej spotkamy się z informacjami typu:

– Zmień rozmiar obrazów

– Wyświetlaj obrazy w formatach nowej generacji

– Odłóż ładowanie obrazów poza ekranem

Ok, tylko co zrobić, aby spełnić te wymagania? Należy przestrzegać kilku zasad, oto one:

1. Zmień rozmiar obrazów

Głównym problemem, który najczęściej występuje u użytkowników, jest przesyłanie na stronę zdjęć o zbyt dużych wymiarach, pobranych np. bezpośrednio z aparatu lub banku zdjęć – takie pliki przeważnie ważą bardzo dużo ze względu na swoją wysoką rozdzielczość.

Pamiętaj więc, aby przed dodaniem zdjęcia na stronę dostosować je do jego rzeczywistego przeznaczenia. Wystarczą trzy proste kroki przed przesłaniem zdjęcia, aby uniknąć kłopotu.

a) Ustaw prawidłowe wymiary zdjęcia

Sprawdź wymiar miejsca docelowego – czy będzie to baner, zdjęcie w artkule czy w dowolnym innym miejscu – a następnie wykadruj zdjęcie w dowolnym programie graficznym do danej szerokości. Dla przykładu, jeśli artykuł na naszej stronie ma szerokość 1200px, nie ma sensu wgrywać zdjęcia w rozdzielczości 4k – przeglądarka automatycznie zmniejszy zdjęcie do rozmiaru, ale zdjęcie dalej będzie ważyć więcej niż powinno.

b) Zapisz zdjęcie w odpowiednim formacie

Zapisując zdjęcie, zwróć uwagę na format docelowy. Jeżeli na przykład to klasyczny portret, zdjęcie ludzi lub produktów, zapisz je w formacie JPG – to najlepsza opcja dla standardowych fotografii. W przypadku, gdy strona wymaga, by zdjęcie było z przezroczystym tłem, zastosuj format PNG.

c) Ustaw odpowiedni poziom jakości zdjęcia.

Zapisując zdjęcie pamiętaj również o ustawieniu odpowiedniego poziomu jakości. Jego obniżenie o 20-30% znacząco obniży wagę pliku, a utrata jakości zdjęcia będzie niezauważalna.

2. Użyj efektywnego kodowania obrazów

Aby jeszcze lepiej zoptymalizować obrazy i w pełni zastosować się do rekomendacji Google możesz zapisać zdjęcia do formatu nowej generacji jakim jest WebP, dzięki temu wynik witryny w Google PageSpeed Insights będzie znacząco lepszy.

3. Odłóż ładowanie obrazów poza ekranem

Diagnozując stronę w PageSpeed Insights, natkniesz się na radę, aby zastosować ładowanie obrazów poza ekranem, tzw. Lazy Load. Jest to dość prosty mechanizm, który sprawia, że po wejściu ładowane są tylko te obrazki, które są widoczne w danym momencie dla użytkownika. Pozostałe obrazy natomiast ładowane są dopiero w momencie skrolowania strony. Wpływa to bardzo dobrze na szybkość ładowania strony ze względu na fakt, że po wejściu na stronę ładowane są tylko niezbędne grafiki.

Jak wdrożyć Lazy Load na stronie WordPressa?

Najsprawniej poprzez popularną wtyczkę jaką jest Smush, która głównie służy do automatycznej kompresji zdjęć. Posiada ona również funkcje lazy load – wystarczy ją ręcznie aktywować.

Podsumowując, wystarczy przestrzegać kilku zasad przed wgraniem zdjęcia na stronę oraz drobne modyfikacje w jej konfiguracji, aby poprawić wydajność strony i zyskać tak ważne sekundy do jej załadowania.

Menu