Ten tekst przeczytasz w 3 minuty

Konwersja obrazów z JPG na WebP za pomocą wtyczki do WordPressa. WARTO!

Konwersja obrazów z JPG na WebP – dlaczego warto i jak to zrobić?

Aktualizacja PageSpeed Insights od Google przyniosła kilka nowości. Połączenie z narzędziem Lighthouse znacznie zwiększyło ilość zaawansowanych danych, które możemy otrzymać. Jedną ze zmian jest raport dotyczący formatów plików graficznych używanych na stronie. Warto się bliżej przyjrzeć, czym są i jak wykorzystać „formaty nowej generacji” na przykładzie jednego z nich – formatu WebP. 

Czym jest format WebP?

WebP to format plików graficznych dedykowany stronom internetowym. Charakterystyczną cechą, jaka wyróżnia WebP od swoich starszych poprzedników, a więc JPG i PNG, jest wyższy stopień kompresji obrazu. Mówiąc najprościej – tej samej jakości grafika zajmuje mniej miejsca na serwerze, a więc wczytuje się szybciej.

WebP nie jest już nowością. Światło dzienne ujrzał w 2010 roku, a szeroko zaczęto o nim mówić 3 lata później, kiedy format plików graficznych został wdrożony w Google Play. Kolejny raz o WebP zrobiło się głośno wraz z niedawną aktualizacją narzędzia PageSpeed Insights, w którym to Google zaznaczył, jak istotnym jest stosowanie na stronie internetowej obrazów w formatach nowej generacji.

konwersja jpg na webp

Dlaczego warto zwrócić uwagę na format WebP? Chociażby dlatego, że Google jest jego właścicielem, a jak wielokrotnie obserwowaliśmy w przeszłości, gigant z Mountain View faworyzuje technologie, które zakupił. Podobnie było chociażby z Google Analytics.

Pomimo swojego wieku WebP przyjmowany jest jednak w środowisku programistycznym nieco opornie. Objawia się to tym, że wciąż nie wszystkie przeglądarki go obsługują, co utrudnia implementację.  Tym samym przy konwertowaniu grafik musimy się odpowiednio zabezpieczyć.

Co daje konwersja obrazów z jpg na WebP w PageSpeed Insights?

Oczywiście poprawia wyniki! Optymalizacja grafik na stronie internetowej to jedna z najważniejszych (a także najłatwiejszych) czynności, które można wykonać w celu jej przyspieszenia. Konwersja JPG na WebP nie powinna więc stwarzać trudności. Możemy tego dokonać na kilka sposobów – w zależności od CMSa i stopnia dostępu, jaki posiadamy.

Konwersja obrazów z JPG na WebP

Możemy ręcznie przekonwertować obrazy za pomocą zewnętrznego programu, a następnie wgrać je na hosting. Jeśli nie chcemy jednak modyfikować ręcznie plików, a nasza strona zbudowana jest na popularnym WordPressie, najłatwiej będzie użyć wtyczki.

Prosta wtyczka WordPress do konwersji plików JPG i PNG na WebP

Wtyczek oferujących konwersję z JPG, PNG czy GIF na WebP jest wiele. Taką możliwość daje chociażby ShortPixel Image Optimizer.

Konwersja obrazów z JPG na WebP 2

ShortPixel Image Optimizer w wersji darmowej umożliwia konwersję ze starszych formatów na WebP do 100 zdjęć miesięcznie. Dodatkowo mamy do wyboru wykupienie opcji abonamentowej lub jednorazowe zasilenie konta.

Dla oszczędnych przewidziano opcje polecenia programu, dzięki któremu zarówno osoba polecająca, jak i rejestrującą się, otrzyma dodatkową możliwość jednorazowej kompresji dodatkowych 100 zdjęć.

Konwersja JPG na WebP krok po kroku

Wtyczkę ShortPixel Image Optimizer pobieramy jak wszystkie inne. Po jej włączeniu w panelu WordPressa zostaniemy poproszeni o wpisanie klucza API. Wystarczy zarejestrować się na stronie, podając dowolny e-mail, do którego mamy dostęp. W kilka sekund otrzymamy wiadomość z kluczem.

Podstawową funkcją wtyczki jest kompresja zdjęć w ramach tego samego formatu. Nas interesuje zamiana formatu z JPG, PNG czy GIF na WebP. W tym celu udajemy się do zakładki ADVANCE i zaznaczamy następujące opcje:

Konwersja obrazów z JPG na WebP 3

Jak już wspominaliśmy, format WebP nie jest obsługiwany przez wszystkie wyszukiwarki. Zaznaczenie powyższych opcji sprawi jednak, że zdjęcia wyświetlą się prawidłowo i w takim przypadku. Wtyczka automatycznie tworzy w pliku .htaccess funkcję, której celem będzie wyświetlenie nowego formatu zdjęć kompatybilnym przeglądarką, a starego tym, które WebP nie obsługują.

Konwersja obrazów na WebP page speed

Po zaznaczeniu opcji klikamy button i przechodzimy do ostatniej zakładki, w której widzimy, ile zdjęć może ulec konwersji na nowszy format. Posiadany darmowy limit 100 zdjęć powinien wystarczyć na mała wizytówkową stronę, jeśli jednak posiadamy więcej grafik lub chcemy również przekonwertować miniatury, będzie nam potrzeba kilku wiernych znajomych lub nieco gotówki.

page speed insights konwertowanie

Po naciśnięciu button nextprzechodzimy do procesu. W podglądzie widzimy każdy obraz, który wtyczka obecnie konwertuje oraz w jakim stopniu jej rozmiar zostanie zredukowany.

przekonwertowane fotki

Po zakończonym procesie nie pozostaje nam już nic innego, jak wrócić do narzędzia PageSpeed Insights i ponownie przeskanować stronę. W tym przypadku narzędzie pokazało wzrost szybkości o 7 oczek. Piękny początek udanego pozycjonowania. 🙂 

wynik page speed insights

Audyt Google Ads

Dołącz do załogi ponad 30 000 subskrybentów!

Wyrusz w podróż do marketingowego świata pełnego ciekawostek o pozycjonowaniu stron, reklamie w Google, na Facebooku oraz YouTube!

Administratorem danych osobowych jest Verseo ADS spółka z ograniczoną odpowiedzialnością z siedzibą w Poznaniu (60 – 122), przy ul. Węglowej 1/3.Zobacz więcej... Dane osobowe są przetwarzane przez Administratora zgodnie z przepisami prawa, w tym w szczególności z ogólnym rozporządzeniem o ochronie danych osobowych 2016/679 („RODO”) w celu związanym ze świadczeniem usługi newsletter. Administrator gwarantuje spełnienie praw osób, których dane dotyczą. Więcej informacji o przetwarzaniu danych osobowych zawartych jest w Polityce prywatności.

Praktyczne porady i darmowe materiały otrzymasz w pakiecie.

Komentarze

  1. Boleń tropikalny

    Hmmm, Panie Jacku a czy zna Pan może podobne narzędzie na Joomli? Mam stronkę z odżywkami dla rybek akwariowych i ze względu na dużą liczbę obrazków także bym chciał we własnym zakresie zoptymalizować opublikowane grafiki. Dodam od razu, że nie zamierzam przenosić strony na WordPress co sugerował mi inny pozycjoner, ze względu na to że mamy rodzinny biznes, który prowadzą rodzice i trudno byłoby mi teraz ich nauczyć obsługi nowego cms-a. Będę wdzięczny za wskazówki 🙂

    • Maciej Popiołek

      Odpowiedź od Jacka:
      „W przypadku Joomli można skorzystać z zewnętrznych narzędzi (np. bezpłatne smush it do optymalizacji obrazów). Można też skorzystać z dodatku JCHOptimize. Jest to dodatek, który w wersji bezpłatnej może przyspieszyć cachowanie, włączyć minifikację plików HTML, usprawnić kompresję plików CSS i JS. Wersja Premium dodatkowo pozwala włączyć wsparcie CDN czy optymalizować obrazy.”
      Mamy nadzieję, że to pomoże. 🙂

  2. Jacek Blaumann – Fotografia

    dzięki!

  3. fabryka śłubów

    Czas optymalizacji – ruszamy zobaczymy jakie efekty sie pojwia

Jak pozyskać klienta? 3 sposoby!
Maciej Popiołek

Jak pozyskać klienta? Daj się znaleźć! Biznes ruszył, koncepcja jest, strona stoi. Przed Tobą pytanie, jak pozyskać klienta? Wcześniej jednak […]

pozycjonowanie witryny
Pozycjonowanie witryny
Barbara Oleszek

Czy pozycjonowanie witryny jest konieczne, żeby móc znaleźć ją w internecie? Nie jest – jeśli tylko dopuścisz roboty sieciowe do […]

Co to jest marketing internetowy?
Dominika Słomka

Żeby „przebić się” do klientów, potrzebujesz czegoś więcej niż dobrego produktu i świetnej jakości obsługi. Twoja grupa docelowa odbiorców musi […]

Marketing internetowy – pdf poradnik AdBook 2018
Artykuł gościnny

Marketing internetowy – pdf poradnik od Verseo!  Problematyka marketingu internetowego jest dość szeroka, dlatego dobrze jest postarać się o przegląd […]

Raport Interaktywnie.com: Marketing w wyszukiwarkach 2017
Artykuł gościnny

Marketing w wyszukiwarkach internetowych – raport! Chcesz wiedzieć więcej na temat szeroko pojmowanego marketingu w wyszukiwarkach? Zapraszamy do lektury raportu […]

hosting a seo
Hosting a SEO: czy wybór usługi hostingowej ma wpływ na organiczne pozycje w wyszukiwarkach?
Artykuł gościnny

Czym jest hosting oraz jakie są rodzaje? Hosting to usługa, która odpowiada za całodobowe utrzymanie stron internetowych w sieci. Taka […]