Po co optymalizować zdjęcia na stronie?
Zdjęcia, tak jak i inne grafiki umieszczone na stronie internetowej, przed wyświetleniem muszą zostać pobrane na komputer lub urządzenie przenośne. Im więcej zajmują pliki z grafikami, tym dłużej będą pobierane. W skrajnych przypadkach, jeżeli umieszczasz na stronie zdjęcia w oryginalnych rozmiarach, mogą zajmować nawet kilka do kilkunastu megabajtów.
Odbiorcy treści umieszczanych w internecie z reguły nie lubią czekać. Często nawet trzy sekundy oczekiwania to wartość graniczna, po której ładowanie zostanie przerwane przez użytkownika. Bardziej zdeterminowani zapewne poczekają dłużej, ale dziesięć czy piętnaście sekund to wartość zaporowa, nawet dla najwytrwalszych.
Nawet jeżeli prowadzisz bloga fotograficznego i jakość zdjęć jest dla Ciebie istotna, nie ma potrzeby wyświetlania zbyt dużych plików. Zdjęcia docelowo są skalowane do szerokości kontenera, w którym znajdują się na stronie, ostatecznie — do szerokości ekranu. Prawdopodobnie nigdy nie zostaną wyświetlone w oryginalnym rozmiarze. Warto więc przesyłać je na serwer odpowiednio zmniejszone.
O tym, dlaczego optymalizacja zdjęć i obrazów jest wartościowa, możesz również przeczytać na zaprzyjaźnionym blogu w linkowanym studium przypadku.
Na rozmiar pliku graficznego ma także wpływ zastosowana kompresja. Choć mocniejsza kompresja zwykle oznacza spadek szczegółowości obrazów i pojawienie się nieprzyjemnych artefaktów (paskowanie, posteryzacja, widoczne bloki wynikające z kompresji), istnieją skuteczne metody optymalizacji minimalizujące utratę jakości.
W tym artykule pokażę Ci dwa darmowe narzędzia, które sprawią, że proces optymalizacji plików graficznych w WordPress będzie automatyczny.
Najpierw zmniejsz rozmiar plików graficznych przesyłanych na serwer
WordPress od wielu lat radzi sobie całkiem nieźle z prezentacją grafik za sprawą wewnętrznego silnika, który automatycznie tworzy mniejsze wersje oryginałów przesłanych do zakładki Media. Domyślne trzy miniatury (thumbnail, medium, large), których wymiary możesz personalizować w ustawieniach CMS, mogą być łatwo rozszerzone o wartości zakodowane we wtyczkach lub motywach — zarówno tych darmowych, jak i komercyjnych. Pozwala to wyświetlać w treści strony tylko tak duże grafiki, jak duży jest ich kontener. Niestety nie wszystkie wtyczki i nie wszystkie motywy korzystają w stu procentach z tej techniki i zdarza się, że w niektórych miejscach wyświetlane są oryginały, które użytkownik przesłał na serwer.
WordPress domyślnie nie skaluje oryginałów. Jeżeli więc przesłałeś na serwer plik JPEG o rozdzielczości 6000 × 4000 pikseli i rozmiarze 12 MB to taki plik zostanie zapisany i może zostać wyświetlony w treści strony. Możesz tego uniknąć, każdorazowo zmieniając rozmiar pliku przed jego wysłaniem, ale… Komu by się chciało robić to ręcznie?Zamiast tego można posłużyć się darmową wtyczką Imsanity, która automatycznie skaluje wszystkie pliki JPEG oraz PNG przesyłane do zakładki Media do mniejszych rozmiarów. Domyślne ustawienia tej wtyczki to 2048 pikseli na długim boku, ale nic nie stoi na przeszkodzie, aby była to wartość np. 1920 pikseli lub jeszcze mniej.
Imsanity posiada także funkcjonalność przetwarzania wsadowego — tzn. potrafi przeskalować wszystkie grafiki już istniejące na Twojej stronie. Warto więc skorzystać z tego rozwiązania w pierwszej kolejności — zanim przystąpisz do dalszej optymalizacji z wykorzystaniem kompresji. Pamiętaj o zrobieniu kopii folderu /wp-content/uploads/ przed skorzystaniem z przetwarzania wsadowego — wtyczka nie tworzy kopii zapasowej oryginałów.
Wtyczka działa z ustawieniami domyślnymi po instalacji i aktywacji. Jeżeli chcesz zmienić jej ustawienia, możesz to zrobić na zapleczu WordPress, kierując się do menu Ustawienia, następnie Imsanity.
Zainstaluj i skonfiguruj wtyczkę LiteSpeed Cache dla WordPress do optymalizacji obrazów
Na temat wtyczki LiteSpeed Cache pisałem w osobnym artykule. Przypomnę tylko, że to kompletne rozwiązanie do optymalizacji WordPress, które wymaga serwera LiteSpeed do uruchomienia funkcji odpowiedzialnych za obsługę pamięci podręcznej. Na szczęście, autorzy wtyczki postanowili udostępnić większość jej funkcji dla wszystkich użytkowników. Oznacza to, że rozbudowany moduł optymalizacji obrazów jest dostępny dla każdego.
Najważniejsze cechy wyróżniające optymalizację obrazów LiteSpeed Cache na tle rozwiązań konkurencyjnych
Możliwości wtyczki są imponujące i jeśli przyjrzeć się rozwiązaniom konkurencyjnym — to zdumiewające, że autorzy postanowili udostępnić wszystkie te funkcjonalności nieodpłatnie. Być może ten stan ulegnie zmianie w przyszłości, ale na chwilę obecną, wtyczka pod względem funkcji związanych z optymalizacją obrazów oferuje:
- Brak limitów — możesz optymalizować dowolną liczbę zdjęć, bezpłatnie;
- Optymalizacja wszystkich miniatur — LiteSpeed Cache optymalizuje wszystkie miniatury generowane przez WordPress;
- Opcjonalne generowanie plików WEBP i przesyłanie ich przeglądarkom obsługującym ten format, również dla wszystkich miniatur;
- Proces optymalizacji obsługiwany przez zewnętrzne serwery — nie obciąża środowiska hostingowego;
- Generowanie kopii zapasowych z możliwością ich usunięcia;
- Opcjonalna optymalizacja bezstratna — zmniejszenie wielkości obrazu przy zachowaniu jakości oryginału;
- Możliwość zachowania metadanych, w tym EXIF i profili barwnych;
- Możliwość uruchomienia ładowania grafik z opóźnieniem z unikatową techniką responsywnych obrazów zastępczych, które nie rozsuwają układów kafelkowych.
Instalacja i konfiguracja wstępna LiteSpeed Cache
Zainstaluj i włącz wtyczkę LiteSpeed Cache w swoim WordPress, następnie na zapleczu, zlokalizuj menu LiteSpeed Cache i przejdź do zakładki Ustawienia główne. Przejdź do zakładki [7] Media i zapoznaj się z dostępnymi ustawieniami.
Wiele ustawień w zakładce Media ma ścisły związek z procesem optymalizacji grafik wywoływanym z osobnego menu LiteSpeed Cache — Optymalizacja obrazów. Warto rozważnie dobrać ustawienia w tej zakładce, ponieważ zmiana wielu z nich będzie związana z koniecznością zniszczenia danych optymalizacji oraz wykonania jej na nowo. Przykładowo, jeżeli w przyszłości zdecydujesz się na zachowanie danych EXIF lub optymalizację bezstratną — dotychczas zoptymalizowane obrazy będą musiały zostać zoptymalizowane od nowa.
Lazy Load Obrazków
Domyślnie przeglądarka rysuje stronę internetową od góry do dołu, z uwzględnieniem wszystkich obiektów. Oznacza to, że pełne narysowanie treści w przypadku stron bogatych w obrazki może być czasochłonne. Obrazy muszą zostać pobrane, nierzadko przeskalowane i umieszczone w odpowiednich relacjach z innymi obiektami. Zamiast tego można ładować tylko te obrazy, które aktualnie znajdują się na ekranie, a dla pozostałych wstawić zaślepkę do czasu przewinięcia strony. W tym miejscu możesz włączyć lub wyłączyć ładowanie obrazów z opóźnieniem.
Rekomendowane:
Włączone. Wyłączone, jeżeli występuje konflikt z motywem lub innymi wtyczkami.
Wykluczone obrazki Lazy Load
Doładowanie obrazu w treści strony nie powinno stanowić problemu. Gorzej, jeżeli przy każdym otwarciu strony zamiast logo w nagłówku najpierw pojawia się szary prostokąt. Możesz tego uniknąć, podając w tym polu wyjątki będące nazwami plików, np. nazwę pliku logo. Pamiętaj, że nazwy plików mogą być szczątkowe — jeżeli więc ładowanie z opóźnieniem powoduje problemy np. ze slajdami, możesz w nazwach plików przeznaczonych do slidera dodawać słowo „slider” – podanie tego samego słowa kluczowego w polu wykluczeń sprawi, że wszystkie obrazy, które w nazwie zawierają taki ciąg znaków, będą ładowane bez optymalizacji. Ważna uwaga, Piksel Facebooka to też obrazek — rozważ dodanie odpowiedniego wyjątku, aby LiteSpeed Cache nie zamienił go na zaślepkę.
Rekomendowane:
Nazwy plików logo lub ikony widoczne na górze każdej podstrony. Obrazy umieszczone w sliderach lub innych miejscach, które generują konflikt z modułem Lazy Load.
Obraz zastępczy Lazy Load
Domyślną zaślepką dla obrazu czekającego na załadowanie jest szary prostokąt o wymiarach jednego piksela. Jeżeli chcesz, aby był to obraz w innym kolorze lub przezroczysty PNG, możesz tutaj podać ciąg zakodowany w base64. W ten sposób możesz wykorzystać dowolny plik PNG, konwertując go za pomocą tego narzędzia online – https://www.base64-image.de/. Po wprowadzeniu responsywnych zaślepek to ustawienie powinno być traktowane jako awaryjne, ponieważ jest używane w przypadku kiedy zaślepki responsywne nie są dostępne (np. po wyczyszczeniu cache, przed wygenerowaniem nowych zaślepek).
Rekomendowane:
Ustawienie domyślne.
Responsywny element zastępczy
Standardowa zaślepka jest ładowana w postaci pliku o wielkości 1 × 1 piksela. Oznacza to, że różne obrazy docelowe w treści strony będą wstępnie ładowane z kwadratową zaślepką, co w wielu przypadkach może doprowadzić do przeformatowania treści lub do zaburzenia działania skryptów odpowiedzialnych np. za układy kafelkowe (masonry, isotope). Aby temu zaradzić, zaślepki muszą mieć takie same proporcje, jak obraz który zostanie załadowany. W tym miejscu możesz włączyć responsywne zaślepki, a dalej — ustawić ich wygląd oraz warunki generowania.
Rekomendowane:
Włączone — szczególnie jeżeli korzystasz z układów kafelkowych.
Responsywny kolor tła elementu zastępczego
Zamiast podawać kod base64 dla zaślepki, możesz po prostu wybrać kolor. Jeśli chcesz, możesz też napisać style CSS, które spowodują, że proces zamiany obrazów będzie animowany. Przykład został opisany w pomocy LiteSpeed Cache.
Rekomendowane:
Spójne z wyglądem strony.
Wygeneruj responsywny symbol zastępczy w tle
To ustawienie działa podobnie, jak generowanie krytycznego CSS — albo responsywna zaślepka jest generowana przez serwer LiteSpeed w tle, a pierwszy użytkownik widzi standardową zaślepkę (dopóki serwer nie wygeneruje poprawnej i nie zamieni jej w kolejnych sesjach). Albo pierwszy użytkownik (jeżeli responsywna zaślepka nie jest dostępna) czeka na wygenerowanie odpowiedniego pliku. Pamiętaj, że zbyt długi czas oczekiwania na wyświetlenie strony może mieć negatywny wpływ na konwersję.
Rekomendowane:
Włączone.
Lazy Load Iframeów
Iframe to obiekt HTML będący „stroną w stronie”. Jeżeli w treści strony umieszczasz filmy z YouTube, mapy Google, wpisy z Facebooka lub Twittera, prawdopodobnie są one ładowane w oknie iframe. Ponieważ iframe to „strona w stronie”, ich ładowanie może być bardzo powolne, a nad tym procesem nie masz kontroli. Dlatego rozsądnie jest ładować ramki tylko wtedy, kiedy pojawiają się w polu widoku.
Rekomendowane:
Włączone.
Biblioteka Inline Lazy Load Images
Opóźnione ładowanie obrazów oraz innych obiektów nie jest domyślnie wspierane przez przeglądarki, dlatego wymaga biblioteki JavaScript. Włączenie tego ustawienia spowoduje umieszczenie kodu w nagłówku strony, co może przyspieszyć jej ładowanie oraz zwiększyć punktację w serwisach typu PageSpeed Insights.
Rekomendowane:
Włączone.
Optymalizuj automatycznie
Optymalizacja obrazów przez wtyczkę LiteSpeed Cache jest procesem półautomatycznym. Oznacza to, że administrator musi każdorazowo zlecić optymalizację zestawu obrazów. Po osiągnięciu odpowiednio wysokiego poziomu optymalizacji i uzyskaniu 1200 kredytów istnieje możliwość automatycznego zlecania optymalizacji nowo przesłanych obrazów przez zadanie cron.
Rekomendowane:
Włączone.
Cron optymalizacji
Oprócz zlecania optymalizacji serwerowi LiteSpeed niezbędne jest ich pobranie, kiedy ten skończy optymalizować pliki. Normalnie jest to obsługiwane przez cron WordPress, ale jeżeli chcesz mieć nad tym procesem pełną kontrolę — możesz wyłączyć cron odpowiedzialny za pobieranie zoptymalizowanych plików.
Rekomendowane:
Włączone.
Optymalizuj oryginalne obrazki
Po przesłaniu obrazów do działu Media WordPress automatycznie generuje zestaw miniatur wymaganych przez motyw oraz wtyczki. W zależności od konfiguracji strony tych miniatur może być od kilku do nawet kilkudziesięciu. Ten mechanizm został zaprojektowany po to, aby nie ładować oryginalnych (dużych) obrazów, kiedy potrzebne są ich mniejsze wersje (np. ikony wpisów). Niektóre motywy korzystają jednak z oryginałów, np. jako tła do elementów blokowych. Włączenie tego ustawienia pozwala również na optymalizację oryginałów.
Rekomendowane:
Włączone.
Usuń oryginalne kopie zapasowe
Optymalizując obrazy, LiteSpeed Cache zapisuje ich kopie zapasowe. Dzięki temu po zmianie ustawień optymalizacji lub po wprowadzeniu nowych algorytmów możesz zoptymalizować oryginały ponownie. Jeżeli biblioteka obrazów jest bardzo duża i obawiasz się o zajmowane miejsce, możesz skorzystać z tego ustawienia w celu usunięcia kopii zapasowych.
Rekomendowane:
Wyłączone.
Optymalizuj wersje WebP
WebP jest nowoczesnym formatem zapisu zdjęć (zastępującym PNG oraz JPEG). Wtyczka LiteSpeed Cache może wygenerować wersje WebP obrazów, co sprawi, że w przeglądarkach wspierających ten standard, proces ładowania strony będzie jeszcze szybszy.
Rekomendowane:
Włączone, jeżeli nie powoduje konfliktów z konfiguracją motywu, wtyczek oraz serwera.
Zoptymalizuj bezstratnie
Domyślnie wszystkie obrazy są kompresowane za pomocą algorytmów stratnych. Oznacza to, że dla zmniejszenia obrazów, część danych jest usuwana bezpowrotnie. Zwykle utrata jakości jest niezauważalna. Jeżeli jednak jakość obrazów jest priorytetem, możesz skorzystać z kompresji bezstratnej.
Rekomendowane:
Wyłączone.
Zachowaj dane EXIF
W celu jak najefektywniejszego przeprowadzenia optymalizacji metadane są usuwane z plików. Jeżeli chcesz je zachować — możesz włączyć to ustawienie. W ramach metadanych przechowywane są również profile barwne zdjęć.
Rekomendowane:
Wyłączone.
Zamiennik obrazów WebP
Jeżeli zdecydowałeś się na wygenerowanie obrazów w formacie WebP podczas optymalizacji, włączenie tego ustawienia spowoduje, że dla przeglądarek wspierających ten standard, WordPress wyświetli wersje bardziej zoptymalizowane.
Rekomendowane:
Włączone, jeżeli nie powoduje konfliktów z konfiguracją motywu, wtyczek oraz serwera.
Atrybut WebP do zastąpienia
W tym polu masz możliwość dodania atrybutów HTML, w których LiteSpeed Cache ma zamieniać źródła JPEG na WebP. Domyślne ustawienia powinny działać w większości przypadków.
Rekomendowane:
Ustawienia domyślne.
WebP For Extra srcset
LiteSpeed Cache zamienia pliki na ich wersje w formacie WebP, analizując elementy srcset korzystające z logiki WordPress. Jeżeli z jakiegoś powodu chciałbyś rozszerzyć działanie wtyczki w taki sposób, aby analizowała srcset wygenerowany poza logiką WordPress, możesz skorzystać z tego ustawienia.
Rekomendowane:
Ustawienia domyślne.
Zoptymalizuj zdjęcia w serwisie z wykorzystaniem LiteSpeed Cache dla WordPress
Kiedy już uporałeś się z konfiguracją, możesz przejść do dedykowanego menu poświęconego procesowi zlecania optymalizacji i odbierania zoptymalizowanych plików. Na zapleczu strony przejdź do menu LiteSpeed Cache, następnie wybierz Optymalizacja obrazów.
Zobaczysz panel z przyciskiem Zainicjuj optymizację. Kliknięcie tego przycisku spowoduje wygenerowanie unikatowego klucza witryny oraz umożliwi przesyłanie i odbieranie plików graficznych.
Optymalizacja oparta jest o poziomy, na które awansuje się, zdobywając kredyty za pomyślnie przesłane i odebrane pliki. Cały proces jest darmowy — kredyty są wykorzystywane do diagnozowania ewentualnych błędów podczas transmisji oraz, od odpowiedniego poziomu, odblokowują możliwość automatycznej optymalizacji obrazów.
Po rozpoczęciu optymalizacji, w nagłówku panelu, powinieneś zobaczyć komunikat z informacją o pomyślnym przesłaniu 1 grupy (x obrazów), oraz o akceptacji 1 grupy (x obrazów).
Grupa odnosi się do oryginału oraz wszystkich miniatur generowanych przez Twoją instalację WordPress. Za pierwszym razem system testuje proces, przesyłając jedną grupę – jeżeli wszystko się powiedzie, będziesz mógł korzystać z puli 100 kredytów dostępnych na 1 poziomie tak długo, jak długo nie osiągniesz kolejnego poziomu, co zwiększy liczbę dostępnych kredytów i umożliwi jednorazowe przesyłanie większej liczby plików.
Panel sterowania procesem optymalizacji obrazów LiteSpeed Cache po zakończeniu optymalizacji wszystkich mediów.
Obserwuj dane generowane przez wtyczkę w obszarze Obecny status etapu. Znajdziesz tam informację o obecnym poziomie oraz liczbie dostępnych kredytów.
Optymalizację musisz zlecać ręcznie (klikając przycisk Wyślij żądanie optymalizacji) do osiągnięcia poziomu 3, czyli 1200 kredytów. Od tego momentu optymalizacja będzie realizowana automatycznie przez działanie cron w tle.
Co zrobić, jeśli podczas optymalizacji obrazów wystąpią błędy?
Jeżeli nie udało się pobrać wszystkich obrazów z serwera LiteSpeed Image Optimization, możesz wyczyścić niedokończone dane, klikając w przycisk Wyczyść niedokończone dane, a następnie ponownie przesłać żądanie optymalizacji.
Ponieważ wtyczka LiteSpeed Cache domyślnie wykonuje kopie zapasowe obrazów, nic nie stoi na przeszkodzie, aby przeprowadzić proces od nowa. W tym celu możesz kliknąć przycisk Zniszcz wszystkie dane optymalizacji i zacząć od początku.
Z uwagi na fakt, że optymalizacja obrazów LiteSpeed oparta jest o zadania działające w tle oraz o komunikację z serwerem zewnętrznym, może zdarzyć się tak, że parametry Twojego hostingu będą niewystarczające, co uniemożliwi wykorzystanie tego narzędzia. W takim wypadku zachęcam Cię do przeczytania mojego poradnika pt. Jak wybrać najlepszy hosting dla WordPress. Warto wiedzieć, że nowoczesne firmy hostingowe, mające w swojej ofercie serwery LiteSpeed, oferują pomoc w konfiguracji takich narzędzi jak LiteSpeed Cache.
Wtyczka LiteSpeed Cache jest aktywnie rozwijana i posiada dobre wsparcie. Warto sprawdzić oficjalną dokumentację wtyczki (dostępną w języku angielskim) oraz dział wsparcia w oficjalnym repozytorium (również dostępny w języku angielskim).
Jeżeli potrzebujesz pomocy w optymalizacji Twojej strony internetowej wykonanej w technologii WordPress, możesz skorzystać z oferty komercyjnej i zlecić prace optymalizacyjne specjaliście.
Podsumowanie
LiteSpeed Cache to rozwojowe, darmowe narzędzie będące konkurencją nawet dla rozwiązań dedykowanych, płatnych. Skutecznie radzi sobie z optymalizacją zdjęć na stronach internetowych opartych o najpopularniejszy CMS na świecie.
Optymalizacja stron internetowych nie zawsze oznacza proces karkołomny i kosztowny, ale jest ściśle związana ze zwiększeniem dostępności do oferowanych przez nas treści. Warto prowadzić działania optymalizacyjne, ponieważ przyczyniają się do zwiększenia ruchu na stronie, zadowolenia użytkowników i konwersji. Nie tylko dlatego, że tak chce Google.
Łukasz Szmigiel
Powiązane artykuły
wpDiscuz