Jak używać obrazków WebP w WordPress (3 metody)

Rozumiemy, jak ważne jest zrównoważenie jakości obrazków z szybszym czasem ich wczytywania. Wielu właścicieli witryn internetowych pyta nas o najlepszy sposób wykorzystania obrazków WebP, aby to osiągnąć.

Obrazy WebP to nowoczesny format obrazu, który oferuje lepszą kompresję obrazu poprzez zmniejszenie rozmiaru pliku bez znacznego pogorszenia jakości obrazka. Dzięki temu twoja witryna internetowa wczytuje się szybciej i oszczędza przepustowość.

Problem polega na tym, że WordPress nie obsługuje natywnie przesyłania ani wyświetlania obrazków WebP.

W tym artykule pokażemy, jak łatwo korzystać z obrazków WebP w WordPress.

Co to jest WebP?

WebP to nowszy format plików dla obrazków do wykorzystania w sieci. Korzystając z formatu obrazków WebP, twoje obrazki będą o 25-34% mniejsze niż PNG i JPEG bez utraty jakości.

Jeśli obrazki spowalniają twoją witrynę internetową, konwersja ich do formatu WebP może poprawić wyniki testów szybkości wczytywania strony.

O kompresji obrazków dowiesz się z naszego przewodnika na temat optymalizacji obrazków na potrzeby sieci.

Ponieważ WebP jest nowym formatem plików, nie jest on jeszcze obsługiwany przez wszystkie przeglądarki. Jednak większość nowoczesnych przeglądarek, takich jak Google Chrome, Firefox i Microsoft Edge, obsługuje obrazki WebP.

Czy warto używać obrazków WebP w WordPress?

Obrazki WebP mogą pomóc przyspieszyć twoją witrynę internetową WordPress. Jest to zalecana najlepsza praktyka, którą należy stosować wraz z pamięcią podręczną WordPress, CDN i innymi.

Od wersji 5.8 WordPress domyślnie obsługuje obrazki WebP. Oznacza to, że możesz zapisywać i przesyłać swoje obrazki WebP do witryny internetowej WordPress bez użycia wtyczki.

Ale mimo to, nadal możesz chcieć użyć wtyczki do kompresji obrazków na twojej witrynie WordPress. Jeśli wielu twoich użytkowników korzysta z nieobsługiwanych przeglądarek, powinieneś rozważyć użycie wtyczki do kompresji obrazków.

Wtyczki do kompresji obrazów mogą konwertować twoje istniejące obrazy do formatu WebP i wyświetlać obrazy JPEG lub PNG jako opcję awaryjną w przeglądarkach, które nie mają jeszcze pomocy technicznej WebP.

Jeśli twoja witryna korzysta z wielu obrazków i spowalniają one działanie twojego bloga WordPress, to zdecydowanie powinieneś rozważyć korzystanie z obrazków WebP.

Oto jak używać obrazków WebP w WordPress. Pokażemy ci kilka metod, abyś mógł wybrać tę, która najbardziej ci odpowiada:

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz instrukcje pisemne, czytaj dalej.

Metoda 1: Korzystanie z obrazków WebP w WordPressie za pomocą EWWW Optimizer

EWWW Image Optimizer to jedna z najlepszych wtyczek do kompresji obrazków WordPress, która umożliwia optymalizację twoich obrazków WordPress. Obsługuje również obrazki WebP i może automatycznie wyświetlać je w obsługiwanych przeglądarkach. Zobacz naszą recenzję EWW Image Optimizer, aby uzyskać więcej szczegółów.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę EWW Image Optimizer. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do strony Ustawienia ” EWW Image Optimizer, aby skonfigurować opcje wtyczki. Zostaniesz powitany przez kreatora konfiguracji, ale możesz kliknąć odnośnik „Wiem, co robię”, aby wyjść z kreatora.

Na następnym ekranie zobaczysz kilka opcji wtyczki.

Przewiń w dół i zaznacz pole obok opcji „Konwersja WebP”.

Następnie kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Następnie należy przewinąć w dół do sekcji WebP Conversion. Wtyczka wyświetli teraz kilka reguł przepisywania z czerwonym obrazkiem podglądu.

Musisz kliknąć przycisk „Insert Rewrite Rules”, a wtyczka automatycznie spróbuje wstawić te reguły przepisywania do twojego pliku .htaccess.

Jeśli wtyczka pomyślnie doda te reguły, czerwony podgląd obrazka zmieni kolor na zielony z tekstem „WebP”.

Czasami wtyczka może nie być w stanie wstawić reguł. W takim przypadku należy skopiować reguły przepisywania ze strony ustawień wtyczki i ręcznie wkleić je na dole twojego pliku .htaccess.

Po zakończeniu wróć na stronę ustawień wtyczki i ponownie kliknij przycisk „Zapisz zmiany”. Jeśli obrazek podglądu zmieni kolor na zielony, oznacza to, że pomyślnie włączono dostarczanie obrazów WebP na twojej witrynie internetowej WordPress.

Alternatywnie możesz wybrać jedną z metod JS WebP Rewriting lub WebP Rewriting jako twoją opcję dostarczania WebP. Są one nieco wolniejsze niż metoda .htaccess, ale wykonają zadanie.

Zbiorcza konwersja twoich starych obrazków do wersji WebP

EWWW Image Optimizer umożliwia łatwą konwersję twoich wcześniej przesłanych plików obrazków na obrazki WebP. Wystarczy przejść do strony Multimedia ” Biblioteka i przełączyć się do widoku listy.

Następnie należy kliknąć przycisk „Opcje ekranu” i zmienić „Liczbę elementów na stronę” na 999. Jeśli masz ponad 1000 obrazków, pojawią się one na następnej stronie.

W ten sposób można szybko wybrać dużą liczbę obrazków do zbiorczej optymalizacji. Następnie kliknij pole wyboru Wybierz wszystko u góry, aby zaznaczyć wszystkie obrazki.

Następnie kliknij menu rozwijane „Działania zbiorcze” i wybierz opcję „Optymalizacja zbiorcza”. Na koniec kliknij przycisk „Zastosuj”.

Na następnym ekranie wtyczka daje możliwość pominięcia kompresji obrazków i przekonwertowania ich tylko do formatu WebP. Możesz zaznaczyć tę opcję, jeśli twoje obrazki są już zoptymalizowane.

Następnie kliknij przycisk „Scan for Unoptimized Images”, aby kontynuować. Wtyczka wyświetli następnie liczbę znalezionych obrazków, dzięki czemu można kliknąć przycisk „Optimize”, aby kontynuować.

Twoje obrazki zostaną teraz zoptymalizowane, a EWWW Optimizer wygeneruje dla nich wersje WebP.

Testowanie dostarczania twojego obrazka WebP

Po zoptymalizowaniu twoich obrazków, możesz przejść do wpisu na blogu zawierającego kilka obrazków.

Najedź myszką na dowolny obrazek i kliknij prawym przyciskiem myszy, aby otworzyć obrazek w nowej karcie.

Spowoduje to otwarcie obrazka w nowej karcie przeglądarki.

Będziesz mógł zobaczyć, że ma rozszerzenie .webp na pasku adresu.

Jeśli wtyczka nie jest w stanie obsłużyć obrazka WebP, można wrócić do strony ustawień wtyczki. W tym miejscu można zmienić opcję dostarczania WebP na metodę „JS WebP Rewriting” lub „WebP Rewriting”.

Metoda 2: Korzystanie z obrazków WebP w WordPressie za pomocą Imagely

Imagify to wtyczka do optymalizacji obrazków WordPress stworzona przez ludzi stojących za WP Rocket, najlepszą wtyczką do pamięci podręcznej WordPress. Umożliwia ona łatwą optymalizację i konwersję obrazków do formatu WebP. Zobacz naszą recenzję Imagify, aby dowiedzieć się więcej.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Imagify. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Ustawienia ” Imagify, aby skonfigurować ustawienia wtyczki. Następnie należy kliknąć przycisk „Create a Free API Key”, aby kontynuować.

Zostaniesz poproszony o wpisz służbowego adresu e-mail. Następnie możesz sprawdzić swoją skrzynkę odbiorczą w poszukiwaniu e-maila zawierającego twój klucz API. Skopiuj i wklej klucz na stronie ustawień wtyczki i kliknij przycisk „Zapisz zmiany”.

Następnie należy przewinąć w dół do sekcji Optymalizacja. Tam należy zaznaczyć opcje obok opcji „Utwórz wersje webp obrazków” i „Wyświetlaj obrazki w formacie webp na witrynie”.

Poniżej można wybrać jedną z dwóch metod dostarczania do wyświetlania obrazków WebP w WordPressie. Pierwszą z nich jest metoda .htaccess, a drugą użycie tagu.

Metoda .htaccess jest szybsza, ale nie działa w przypadku korzystania z usługi CDN. Metoda tagów działa również z CDN, ale może uszkodzić niektóre motywy WordPress.

Możesz wybrać jedną z tych opcji, która będzie odpowiednia dla Twojej witryny. Następnie kliknij przycisk „Zapisz i przejdź do Bulk Optimizer” u dołu strony.

Spowoduje to przejście do strony Media ” Bulk Optimization.

Wtyczka automatycznie rozpocznie optymalizację wszystkich twoich obrazków WordPress w tle.

Jeśli masz dużo obrazków, może to chwilę potrwać. Nie martw się, możesz zamknąć stronę i wrócić do niej później, ponieważ zamknięcie strony nie zatrzyma procesu optymalizacji obrazków.

Testowanie twoich obrazków WebP w WordPressie

Po zakończeniu optymalizacji możesz przejść na stronę lub wpis zawierający kilka obrazków. Najedź myszką na obrazek i kliknij prawym przyciskiem myszy, aby wybrać opcję „Otwórz obrazek w nowej karcie”.

Spowoduje to otwarcie obrazka w nowej karcie przeglądarki.

Rozszerzenie .webp będzie widoczne na pasku adresu.

Metoda 3: Korzystanie z obrazków WebP w WordPressie za pomocą SG Optimizer

Ta metoda jest zalecana, jeśli jesteś użytkownikiem SiteGround.

SiteGround jest jedną z najlepszych firm hostingowych WordPress. Oferują swoim użytkownikom darmową wtyczkę SG Optimizer, która pozwala zoptymalizować wydajność twojego WordPressa. Obejmuje ona również opcję optymalizacji obrazków WordPress.

Najpierw należy zainstalować i włączyć wtyczkę SG Optimizer.

Po włączaniu wtyczka doda nowy utwórz menu do twojego panelu bocznego oznaczonego jako „SG Optimizer”. Kliknięcie go spowoduje przejście do strony ustawień wtyczki.

W tym miejscu możesz włączyć ustawienia buforowania, jeśli chcesz korzystać z wbudowanego systemu buforowania SiteGround.

Następnie można przejść do karty Optymalizacja multimediów i włączyć opcję „Generuj kopie WebP nowych obrazków”.

Poniżej znajduje się opcja „Bulk Generate WebP Files”.

Kliknięcie przycisku przełączania tej opcji spowoduje rozpoczęcie generowania kopii WebP dla wszystkich plików obrazków w twojej bibliotece multimediów WordPress.

Po zakończeniu twoja witryna WordPress zacznie obsługiwać obrazki WebP.

Testowanie obrazków WebP w SG Optimizer

Aby sprawdzić, czy twoja witryna obsługuje obrazy WebP, musisz otworzyć stronę w witrynie z kilkoma obrazkami.

Następnie kliknij prawym przyciskiem myszy i wybierz narzędzie Inspect. Spowoduje to otwarcie konsoli programisty, w której należy przełączyć się na kartę Sieć.

W tym miejscu kliknij kartę „img”, a następnie przeładuj stronę (CTRL+R w systemie Windows i Command+R w systemie Mac). Gdy twoja witryna internetowa zostanie przeładowana, w konsoli programisty zobaczysz wszystkie wczytywane obrazki.

Przewodniki ekspertów na temat używania obrazków w WordPressie

Teraz, gdy już wiesz, jak korzystać z obrazków WebP w WordPressie, być może spodoba ci się kilka innych przewodników dotyczących korzystania z obrazków na twojej witrynie WordPress:

• Jak prawidłowo dodawać obrazki w WordPress (krok po kroku)
• Jak dodać wyróżniające się obrazki lub miniaturki wpisów w WordPress?
• WebP vs. PNG vs. JPEG: Najlepszy format obrazków dla WordPressa
• Jak zoptymalizować obrazki pod kątem wydajności w sieci bez utraty jakości?
• Porównanie najlepszych wtyczek WordPress do kompresji obrazków
• Narzędzia do tworzenia lepszych obrazków do twoich wpisów na blogu
• Świetne wtyczki WordPress do zarządzania obrazkami (aktualizacja)
• Tekst alternatywny obrazka a tytuł obrazka w WordPress – jaka jest różnica?
• Gdzie WordPress przechowuje obrazki na twojej witrynie?
• Jak łatwo wczytywać obrazki w WordPressie?

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się korzystać z obrazków WebP w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia newslettera e-mail i wyborem najlepszych usług telefonii biznesowej dla twojej witryny internetowej.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.