Optymalizacja zdjęć WordPress - jak przyspieszyć stronę bez psucia jakości fotografii?

Zdjęcia potrafią zrobić ze stroną internetową dwie zupełnie przeciwne rzeczy. Mogą przyciągać uwagę, prezentować ofertę i budować profesjonalny wizerunek firmy, ale mogą też sprawić, że WordPress zacznie ładować się irytująco długo. Problem zwykle nie leży jednak w samych zdjęciach. Znacznie częściej winny jest sposób, w jaki zostały przygotowane i umieszczone na stronie.

W tym poradniku pokażę, jak podchodzę do optymalizacji obrazów w WordPressie. Zaczniemy od podstaw, a później przejdziemy do praktyki. Bez obsesyjnego zmniejszania każdego pliku o kolejne 5 KB i bez technicznego języka, który wymaga znajomości administracji serwerami.

Dlaczego zdjęcia potrafią tak mocno spowolnić WordPressa?

Wyobraźmy sobie prostą stronę firmową. Mamy logo, duże zdjęcie na początku strony, kilka fotografii prezentujących usługę i kolejne obrazy przy poszczególnych sekcjach. Dla użytkownika to po prostu kilka zdjęć.

Przeglądarka widzi sytuację trochę inaczej.

Każdy obraz jest osobnym zasobem, który trzeba pobrać. Jeżeli jedno zdjęcie zajmuje 3 MB, drugie 2 MB, a kolejne pięć po 500 KB, robi się z tego spora ilość danych. Do tego dochodzą przecież kod HTML, arkusze CSS, JavaScript, fonty i inne elementy witryny.

Właśnie dlatego przy optymalizacji WordPressa zawsze sprawdzam obrazy. Czasami można długo szukać problemu w hostingu, pamięci podręcznej czy konfiguracji wtyczek, podczas gdy na stronie głównej znajduje się fotografia ważąca kilka megabajtów.

Co ważne, duży rozmiar pliku nie musi oznaczać wysokiej jakości widocznej dla użytkownika. Możemy mieć dwa niemal identycznie wyglądające zdjęcia, z których jedno zajmuje kilka razy więcej miejsca.

I tutaj zaczyna się właściwa optymalizacja.

Optymalizacja obrazu to nie tylko kompresja

Często spotykam się z przekonaniem, że optymalizacja zdjęć oznacza po prostu przepuszczenie ich przez kompresor. To tylko jeden z elementów całego procesu.

Dobrze zoptymalizowany obraz powinien mieć odpowiednie wymiary, rozsądny poziom kompresji i właściwy format. WordPress powinien również dostarczyć przeglądarce odpowiednią wersję pliku.

Do tego dochodzi sposób ładowania obrazu.

Zdjęcie znajdujące się na samym dole długiego artykułu nie musi być pobierane natychmiast. Z kolei główna fotografia widoczna od razu po otwarciu strony powinna zostać pobrana możliwie szybko.

Optymalizacja polega więc bardziej na zarządzaniu obrazami niż na samym ich zmniejszaniu.

Najpierw wymiary zdjęcia, później jego waga

To jeden z najprostszych błędów, jakie widzę na stronach WordPress.

Case 1: Załóżmy, że właściciel firmy robi zdjęcie telefonem. Fotografia ma szerokość 4000 pikseli. Następnie trafia do WordPressa i jest wyświetlana w artykule w obszarze o szerokości około 800 pikseli.

Case 2: W czasach gdy robiłem jeszcze strony pod projekt grafika, wielokrotnie uczestniczyłem w "odwiecznych" bataliach między grafikiem a deweloperem. Gdzie grafik wręcz domagał się wstawiania pięknych grafik w rozdzielczości 4000px na stronę. Oczywiście nie docierały ani prośby ani tłumaczenia.

Użytkownik nie potrzebuje oryginału o szerokości 4000 pikseli, aby zobaczyć zdjęcie mające na ekranie 800 pikseli.

Oczywiście sprawa jest trochę bardziej skomplikowana ze względu na ekrany o dużej gęstości pikseli. Nie oznacza to jednak, że każda fotografia na stronie powinna pochodzić prosto z aparatu.

Dlatego przed kompresją patrzę przede wszystkim na faktyczne zastosowanie obrazu.

Jeżeli zdjęcie będzie niewielką ilustracją w artykule, nie potrzebuję ogromnego oryginału. Jeżeli ma być dużym obrazem rozciągniętym na całą szerokość ekranu, przygotuję większy plik.

Nie istnieje więc jedna idealna rozdzielczość dla wszystkich zdjęć WordPress.

Rozmiar powinien wynikać z miejsca, w którym obraz będzie wyświetlany.

WordPress sam tworzy kilka wersji jednego zdjęcia

Tutaj pojawia się bardzo przydatna funkcja WordPressa, z której wiele osób korzysta nawet o tym nie wiedząc.

Po przesłaniu zdjęcia do biblioteki mediów WordPress może utworzyć kilka wersji tego samego obrazu w różnych rozmiarach. Motyw oraz zainstalowane rozszerzenia mogą dodawać kolejne warianty.

Nie oznacza to, że przeglądarka pobiera je wszystkie.

WordPress od wielu lat obsługuje mechanizm responsywnych obrazów. W kodzie strony mogą pojawić się między innymi atrybuty srcset i sizes. Informują one przeglądarkę, jakie warianty danego obrazu są dostępne. Przeglądarka może następnie dobrać wersję odpowiednią do ekranu użytkownika.

Ma to duże znaczenie.

Osoba korzystająca z telefonu nie zawsze musi pobierać dokładnie ten sam plik co użytkownik oglądający stronę na dużym monitorze.

Dlatego nie polecam bezmyślnego ingerowania w mechanizm generowania miniatur WordPressa. Najpierw warto sprawdzić, jak działa konkretny motyw i jakie rozmiary rzeczywiście wykorzystuje.

JPEG, PNG, WebP czy AVIF – jaki format wybrać?

Format obrazu również wpływa na jego wagę. I tutaj można bardzo łatwo przesadzić w obie strony.

JPEG nadal dobrze sprawdza się w przypadku fotografii. Pozwala mocno ograniczyć rozmiar pliku, zachowując przy tym rozsądną jakość.

PNG ma inne zalety. Świetnie nadaje się między innymi tam, gdzie potrzebujemy przezroczystości lub grafiki wymagającej zachowania bardzo ostrych krawędzi. Problem pojawia się wtedy, gdy ktoś zapisuje jako PNG dużą fotografię. Taki plik potrafi ważyć znacznie więcej, niż powinien.

Do dyspozycji mamy też nowsze formaty.

WebP jest dziś bardzo popularnym rozwiązaniem stosowanym przy optymalizacji WordPressa. Pozwala uzyskać niewielkie pliki przy zachowaniu dobrej jakości obrazu.

*Zdjęcie przedstawia obraz przed i po skalowaniem, kompresją i zmianą formatu na WebP. Z lewej strony prosto z aparatu waga 3.60 MB z prawej 67 KB. Zatem obraz jest około 53 razy lżejszy przy zachowaniu jakości potrzebnej dla stron internetowych.

Jeszcze dalej idzie AVIF. WordPress posiada obsługę tego formatu, a wsparcie AVIF zostało dodane w WordPressie 6.5.

Czy w takim razie wszystkie zdjęcia należy natychmiast zamienić na AVIF?

Niekoniecznie.

Ja nie traktuję wyboru formatu jak konkursu na najbardziej nowoczesne rozszerzenie pliku. Interesuje mnie efekt końcowy. Patrzę na wagę, jakość obrazu, zgodność całego środowiska i sposób dostarczania zdjęć przez stronę.

W wielu przypadkach WebP jest bardzo rozsądnym kompromisem. AVIF może natomiast zapewnić jeszcze lepszą kompresję. Warto go rozważyć, szczególnie przy stronach zawierających dużo fotografii.

Jak mocno kompresować zdjęcia?

To pytanie pojawia się bardzo często, ale nie ma jednej prawidłowej wartości.

Zdjęcie mieszkania, portret pracownika i grafika z drobnym tekstem reagują na kompresję zupełnie inaczej.

Dlatego kieruję się prostą zasadą: kompresuję do momentu, w którym różnica jakości przestaje być akceptowalna.

Brzmi mało technicznie, ale właśnie o to chodzi.

Użytkownika nie interesuje parametr ustawiony w programie graficznym. Interesuje go to, czy zdjęcie wygląda dobrze i czy strona szybko się otwiera.

Przy fotografiach często można mocno zmniejszyć rozmiar pliku bez zauważalnego pogorszenia odbioru. Nie oznacza to jednak, że warto ślepo ustawić maksymalną kompresję dla całej biblioteki.

Szczególnie ostrożnie podchodzę do zdjęć produktowych, realizacji, projektów graficznych i fotografii prezentujących jakość wykonanej usługi. Tam obraz sam w sobie jest częścią oferty.

Optymalizacja ma przyspieszyć stronę, a nie sprawić, że zdjęcia zaczną wyglądać jak przesłane komunikatorem kilkanaście razy.

Lazy loading – dlaczego nie wszystkie zdjęcia muszą ładować się od razu?

Załóżmy, że czytasz artykuł zawierający 15 fotografii. Po otwarciu strony widzisz tytuł, początek tekstu i jedno zdjęcie. Pozostałe znajdują się znacznie niżej.

Czy przeglądarka musi natychmiast pobierać wszystkie 15 obrazów?

Nie.

Właśnie tutaj pojawia się lazy loading, czyli opóźnione ładowanie zasobów. Obraz znajdujący się poza aktualnie widocznym obszarem może zostać pobrany dopiero wtedy, gdy użytkownik zacznie się do niego zbliżać.

Przeglądarki obsługują dziś natywne loading="lazy". Mechanizm może ograniczyć ilość danych pobieranych podczas początkowego ładowania strony i pozostawić więcej zasobów dla elementów rzeczywiście potrzebnych użytkownikowi.

Brzmi świetnie, ale jest jeden haczyk.

Lazy loading nie powinien być bezmyślnie stosowany do każdego zdjęcia.

Najważniejsze zdjęcie strony nie powinno czekać

Na wielu stronach pierwszym dużym elementem jest fotografia umieszczona w sekcji otwierającej. Czasami jest to zdjęcie produktu, budynku, pracownika, realizacji lub główne zdjęcie artykułu blogowego.

Taki obraz może być jednocześnie elementem mierzonym przez wskaźnik Largest Contentful Paint, czyli LCP. np. w https://pagespeed.web.dev/

Jeżeli zastosujemy do niego lazy loading, możemy osiągnąć efekt odwrotny do zamierzonego. Przeglądarka zacznie pobierać kluczowy obraz później, chociaż użytkownik potrzebuje go natychmiast.

Dokumentacja dotycząca wydajności stron wprost zaleca, aby nie stosować lazy loadingu do obrazów znajdujących się w początkowym widoku (sekcja hero), szczególnie do potencjalnego obrazu LCP.

Dlatego gdy optymalizuję WordPressa, rozdzielam obrazy na dwie grupy.

Te widoczne od razu powinny dostać wysoki priorytet. Zdjęcia znajdujące się dalej mogą spokojnie czekać na swoją kolej.

W przypadku szczególnie ważnego obrazu można dodatkowo wykorzystać fetchpriority="high". Tego mechanizmu również nie warto jednak rozdawać wszystkim zdjęciom. Priorytet ma sens właśnie dlatego, że wyróżniamy jeden naprawdę ważny zasób.

Szerokość i wysokość obrazu też wpływają na wydajność

Jest jeszcze jeden element, o którym łatwo zapomnieć.

Przeglądarka powinna wiedzieć, ile miejsca ma pozostawić na zdjęcie, zanim obraz zostanie pobrany. Pomagają w tym określone w kodzie wymiary width i height.

Nie oznacza to, że zdjęcie przestaje być responsywne. CSS nadal może dopasowywać jego faktyczny rozmiar do ekranu.

Chodzi o proporcje.

Jeżeli przeglądarka zna wymiary obrazu, może wcześniej zarezerwować dla niego przestrzeń. Dzięki temu tekst i inne elementy strony nie muszą nagle przesuwać się po załadowaniu fotografii.

Ma to znaczenie dla wskaźnika Cumulative Layout Shift, czyli CLS. Google wskazuje brak określonych wymiarów obrazów jako jedną z typowych przyczyn przesunięć układu strony.

To dobry przykład pokazujący, dlaczego optymalizacja zdjęć nie kończy się na liczbie kilobajtów.

Czy warto instalować wtyczkę do optymalizacji zdjęć?

Tak, ale nie dlatego, że WordPress bez niej nie potrafi wyświetlać obrazów prawidłowo.

Dobra wtyczka może zautomatyzować sporą część pracy. Może kompresować przesyłane zdjęcia, generować nowoczesne formaty i optymalizować starsze pliki znajdujące się już w bibliotece.

Nie oznacza to jednak, że im więcej funkcji zaznaczymy, tym szybsza będzie strona.

Spotkałem instalacje WordPressa, w których jednocześnie działała optymalizacja obrazów we wtyczce cache, osobna wtyczka do WebP, lazy loading w motywie i jeszcze podobny mechanizm po stronie CDN.

Takie nakładanie się funkcji utrudnia później ustalenie, co właściwie dzieje się ze zdjęciem.

Dlatego wolę jedną dobrze skonfigurowaną metodę niż kilka systemów próbujących optymalizować ten sam zasób.

Po uruchomieniu mechanizmu zawsze sprawdzam też efekt w przeglądarce. Sam komunikat „100% obrazów zoptymalizowanych” nie jest dla mnie dowodem, że użytkownik rzeczywiście otrzymuje właściwe pliki.

A co ze zdjęciami, które już znajdują się w bibliotece WordPressa?

To częsty problem przy starszych stronach.

W bibliotece mogą znajdować się setki albo tysiące obrazów dodawanych przez kilka lat. Część pochodzi z aparatów, część z telefonów, a jeszcze inne były przygotowywane przez różne osoby.

Nie zaczynałbym od ręcznego pobierania i poprawiania każdego pliku.

Najpierw sprawdziłbym strony generujące największy ruch oraz najważniejsze podstrony ofertowe. Warto ustalić, które obrazy są faktycznie pobierane i ile ważą.

Dopiero później można zdecydować o masowej optymalizacji biblioteki.

Przy takiej operacji ważna jest kopia zapasowa. Szczególnie wtedy, gdy narzędzie ma zastępować oryginalne pliki zamiast tylko tworzyć ich dodatkowe warianty.

Nie zakładam też, że każdy stary obraz wymaga naprawy. Plik znajdujący się w bibliotece, ale niewykorzystywany na żadnej ważnej podstronie, nie wpływa na czas jej ładowania tylko dlatego, że istnieje na serwerze.

CDN dla zdjęć – kiedy zaczyna mieć sens?

CDN, czyli Content Delivery Network, może przejąć część pracy związanej z dostarczaniem obrazów.

W uproszczeniu pliki są dostarczane przez rozproszoną infrastrukturę, zamiast za każdym razem trafiać do użytkownika wyłącznie z głównego serwera strony.

Bardziej rozbudowane rozwiązania potrafią robić znacznie więcej. Image CDN może automatycznie zmieniać format, rozmiar i jakość obrazu zależnie od urządzenia oraz możliwości przeglądarki. Takie podejście jest również wskazywane jako skuteczna metoda optymalizacji dostarczania obrazów.

Czy mała strona lokalnej firmy potrzebuje rozbudowanej infrastruktury do obrazów?

Niekoniecznie.

Jeżeli witryna ma kilkanaście podstron i rozsądnie przygotowane fotografie, można osiągnąć bardzo dobre rezultaty bez komplikowania konfiguracji.

CDN zaczyna być szczególnie interesujący przy większej liczbie zdjęć, dużym ruchu albo użytkownikach pochodzących z różnych regionów świata.

Znowu obowiązuje więc ta sama zasada: rozwiązanie powinno odpowiadać problemowi.

Optymalizacja zdjęć a SEO

Szybkość strony nie jest jedynym powodem, dla którego warto uporządkować obrazy.

Zdjęcia są częścią całej strony internetowej. Powinny mieć sensowne nazwy, właściwy kontekst i prawidłowo przygotowane opisy alternatywne tam, gdzie są potrzebne.

Nie traktuję jednak pola ALT jako miejsca na upychanie słów kluczowych.

Tekst alternatywny ma przede wszystkim opisywać znaczenie obrazu. Jest istotny dla dostępności i pomaga zrozumieć zawartość grafiki wtedy, gdy użytkownik nie może jej zobaczyć.

Optymalizacja techniczna i optymalizacja SEO spotykają się więc w jednym miejscu.

Obraz powinien być użyteczny dla człowieka, zrozumiały w kontekście strony i dostarczony w możliwie efektywny sposób.

Jak w praktyce optymalizuję zdjęcia przed dodaniem do WordPressa?

Najpierw zastanawiam się, gdzie fotografia zostanie użyta.

Jeżeli ma być małym zdjęciem we wpisie blogowym, zmniejszam jej wymiary jeszcze przed przesłaniem. Jeżeli będzie główną fotografią szerokiej sekcji, zostawiam większą rozdzielczość.

Następnie wybieram format odpowiedni dla rodzaju grafiki. Fotografie nie powinny bez powodu trafiać na stronę jako ogromne pliki PNG.

Później wykonuję kompresję i sprawdzam obraz wizualnie.

Dopiero wtedy przesyłam go do WordPressa.

Po publikacji otwieram stronę, a nie tylko bibliotekę mediów. To ważna różnica. Interesuje mnie przecież plik dostarczany użytkownikowi, a nie sam oryginał znajdujący się na serwerze.

Sprawdzam, czy WordPress korzysta z responsywnych wariantów, czy nowoczesny format rzeczywiście jest serwowany i czy zdjęcia poza ekranem korzystają z lazy loadingu.

Na końcu patrzę na główny obraz strony. Upewniam się, że nie został przypadkiem potraktowany tak samo jak fotografie znajdujące się kilka ekranów niżej.

To prosta procedura, ale rozwiązuje większość typowych problemów.

Najczęstszy błąd? Optymalizowanie wyniku zamiast strony

Narzędzia mierzące wydajność są bardzo pomocne. PageSpeed Insights, Lighthouse czy raporty Core Web Vitals potrafią wskazać problemy, których trudno byłoby szukać ręcznie.

Nie powinny jednak zamieniać się w grę polegającą na zdobyciu idealnego wyniku.

Jeżeli fotografia jest ważną częścią oferty, nie zamienię jej w rozmazaną miniaturę tylko po to, żeby urwać kilka kilobajtów. Jeżeli duży obraz otwierający stronę buduje jej charakter, nie usunę go automatycznie tylko dlatego, że bez niego test pokaże lepszą liczbę.

Szukam kompromisu między wydajnością a funkcją strony.

Czasami problemem nie jest bowiem zdjęcie, ale jego absurdalnie duży oryginał. Innym razem niewłaściwy format. Jeszcze innym brak responsywnych wariantów albo lazy loading zastosowany do elementu, który powinien ładować się natychmiast.

Dlatego optymalizacja zdjęć WordPress nie powinna zaczynać się od instalowania kolejnej wtyczki.

Najpierw trzeba odpowiedzieć na prostsze pytania.

Jak duży obraz naprawdę jest potrzebny? Jaki plik otrzymuje użytkownik? Czy telefon pobiera to samo co duży monitor? Czy fotografie niewidoczne na początku czekają z pobieraniem? Czy najważniejsze zdjęcie nie jest przypadkiem opóźniane?

Gdy te elementy są uporządkowane, często okazuje się, że nie potrzebujemy żadnych magicznych sztuczek.

Dobrze przygotowane zdjęcie ma po prostu wyglądać dobrze, ważyć rozsądnie i pojawić się dokładnie wtedy, kiedy użytkownik go potrzebuje. I właśnie do tego sprowadza się skuteczna optymalizacja obrazów w WordPressie.

Efekt

Jaki jest efekt końcowy takiego przygotowania strony? Jeżeli mamy powiedzmy na stronie 3 zdjęcia w rozdzielczości 3-4 tyś pikseli i formacie PNG, to często jedno zdjęcie waży około 3500kb (z iphona czasem i 12mb). Po zmniejszeniu rozdzielczości do 1200 px jakości do 85% i formatu do WebP otrzymamy obraz ważący około 120 kb. Zdjęcia które mają zajmować na desktopie pół strony możemy spokojnie "odchudzić" do 30-60 kb. Więc w przypadku tych 3 zdjęć na naszej stronie z około 11 500 kb możemy zrobić 200-240 kb i to wszystko bez widocznej utraty jakości obrazu.