Optymalizacja zdjęć WordPress – konwersja jpg i png do webp
Wykonałeś test swojej strony internetowej np. za pomocą narzędzia Google PageSpeed Insights i otrzymałeś komunikat że możliwością optymalizacji dla niej jest wyświetlanie obrazów w formatach nowej generacji lub użycie efektownego kodowania obrazów? Dziś zainstalujemy gotowe narzędzie do WordPressa, które pomoże rozwiązać Nam ten problem i sprawdzimy jak wpłynie na optymalizację naszej strony.
Na początek kwestia samej optymalizacji zdjęć – bez różnicy czy wykonujesz ją ręcznie, czy za pomocą np. Adobe Photoshop, czy narzędziami online, czy też masz na serwisie opartym o WP zainstalowane narzędzia typu np. WP Smush czy EWWW Image Optimizer – sama konwersja zdjęć do formatu webp to nieco inna kwestia.
Nasze dzisiejsze narzędzie z każdego zdjęcia z naszego serwisu wygeneruje nowy jego format – webp i zaserwuje taki obraz użytkownikowi jeśli tylko jego przeglądarka wspiera taką funkcjonalność.
Sprawdzimy również czy nasze zdjęcia w nowym formacie są lżejsze, czy Google PageSpeed Insights spojrzy łaskawiej na nasz serwis jeśli je zastosujemy i czy rzeczywiście strona załaduje się szybciej. Dodam iż takich narzędzi jest więcej, widziałem również że funkcjonalność konwersji jpg/png do webp jest wbudowana w niektóre wtyczki takie jak np. WP Rocket. My skorzystamy z innego narzędzia, które służy wyłącznie do tego i będzie to WebP Express autorstwa Bjørn Rosell.
Krótko o wtyczce – na dzień dzisiejszy ma ponad 100 tysięcy aktywnych instalacji, działa z WordPressami od wersji 4.0 w górę (oczywiście również z najnowszym) i jest na bieżąco aktualizowana.
Wyświetlanie obrazów w formatach nowej generacji
Na początek na testowym serwisie dodałem kilka przykładowych zdjęć w formacie jpg (ich waga po wygenerowaniu miniatur):
- zdjęcie las o wadze 182 kb
- zdjęcie jezioro o wadze 95 kb
- zdjęcie dom o wadze 83 kb
i wykonałem testy narzędziem Google PageSpeed Insights. Tak jak się domyślałem narzędzie to dostrzegło możliwość konwersji zdjęć np. do formatu webp i wyświetliło następujący komunikat:
Zapisałem sobie wyniki punktowe dla wersji mobilnej i desktopowej. Biorę się za instalację wtyczki.
Po instalacji wtyczka dodała swoją 'pod’ zakładkę w panelu WordPressa w sekcji Ustawienia -> WebP Express:
przechodzimy do wstępnej konfiguracji.
Ustawienia konwertera jpg/png do webp
1. Tryb pracy – nie korzystam z CDN tak więc zostawiam opcje domyślną jaką jest 'Varied image responses’.
2. Ustawienia generalne :
– zakres pracy – ustawienia pozwalające wybrać zakres zdjęć jakie wtyczka ma konwertować – w moim przypadku wybieram uploadsy i themes (pliki wrzucone do biblioteki mediów i te osadzone bezpośrednio w motywach mojego serwisu),
– obsługiwany typ zdjęć – możemy wybrać czy chcemy konwertować png czy jpg, czy oba formaty – w moim przypadku wybieram same jpg (bo takowe przygotowałem do testów),
– folder docelowy – możemy wybrać czy przekonwertowane zdjęcia mają być przechowywane w oddzielnych folderach czy w tych samych co docelowe – wydaje mi się że to kwestia jedynie porządków na serwerze – w razie czego i tak można usunąć jednym kliknięciem wszystkie wygenerowane obrazy w formacie webp tak więc zostawiam opcję mieszane,
– rozszerzenia pliku – wybieram dodaj ’.webp’ ale jak kto woli, 🙂
– struktura docelowa – jak w przypadku folderu docelowego – osobiście wybieram 'Image root’,
– cache-control header – pozostawiam bez zmian, ponieważ na moim serwisie roboczym za cache odpowiada co innego, a jest to odrębny temat.
3. Reguły .htaccess:
W moim przypadku – czyli posiadam najnormalniejszy hosting oparty o apache nie ruszam tych ustawień. W przypadku tylko włączenia wtyczki jeśli cokolwiek z plikiem .htaccess będzie nieprawidłowo – wyświetli się nam komunikat. Dodatkowo przy każdej opcji w tej sekcji mamy podpowiedź po najechaniu na znaczek zapytania jak i możliwość kliknięcia przycisku 'Live test’ aby sprawdzić czy nasz serwer nie potrzebuje dodatkowych reguł i wszystko jest tak jak powinno. Zalecam po wdrożeniu tego narzędzia sprawdzić czy nie ma błędów z plikami, bądź linkami – np. ja to robię narzędziem Screaming Frog SEO Spider.
4. Konwersja:
– ustawienia konwersji – możemy zdefiniować w jakiej jakości mają być wygenerowane nasze zdjęcia w nowym formacie. Mnie zależy jedynie na samej bezstratnej konwersji jpg do webp tak więc nie ruszam tych ustawień,
– w sekcji metody konwersji widzimy jakie są dostępne na naszym serwerze i mamy możliwość ich przesuwania,
– możemy zaznaczyć checkbox, aby każde nowe zdjęcie dodawane na serwis było automatycznie konwertowane do webp (ja zaznaczam tę opcję),
– poniżej mamy wreszcie możliwość przeprowadzenia konwersji zdjęć, które znajdują się już na naszym serwisie. Po kliknięciu przycisku 'bulk convert’ pojawia się okienko, które po chwili przeliczy ile zdjęć musi przekonwertować. Klikamy 'start conversion’ i widzimy pracę konwertera. Od razu mamy informacje o ile procent dane zdjęcie jest lżejsze, a po najechaniu myszą na konkretny plik widzimy początkowe i docelowe konkretne wartości. Długość pracy konwertera zależy przede wszystkim od ilości naszych zdjęć oraz od wydajności serwera.
W moim przypadku było to 500 zdjęć i kompletna konwersja trwała około 10 minut. Musimy pamiętać że w przypadku zamknięcia okna konwertera, przy kolejnym razie trzeba włączyć je ponownie.
Po zakończeniu konwersji otrzymamy komunikat, że praca skończona oraz informację ile w całości udało się zredukować – w moim przypadku 49 %.
5. Podmiana HTML:
Osobiście zawsze wybieram opcję pierwszą, czyli 'Replace tags with
Zapisuje zmiany we wtyczce i wykonuje pierwszy test. Zaglądam do wpisu w którym dodałem zdjęcia do testów, sprawdzam źródło i rzeczywiście zdjęcia są automatycznie podmieniane na webp.
Sprawdzam teraz różnice w wadze plików w pełnych ich rozmiarach:
- zdjęcie las w formacie jpg ważyło 417 kb, a w formacie webp waży241 kb
- zdjęcie jezioro w formacie jpg ważyło 852 kb, a w formacie webp waży 753 kb
- zdjęcie dom w formacie jpg ważyło 425 kb, a w formacie webp waży299 kb
Czy warto wykonać konwersję jpg do webp?
Oczywiście że tak – załadowanie lżejszych zasobów (w tym konkretnym przypadku – zdjęć) pozwoli zużyć mniej danych a co za tym idzie załadować stronę szybciej.
Na koniec sprawdzam wyniki w Google PageSpeed Insights – w sekcji możliwości zniknęła podpowiedź o formatach zdjęć (przecież mamy już nowe, lepsze :)) oraz punkty podskoczyły nieco do góry.
0 komentarzy