Jak korzystać z obrazów WebP w WordPress (3 metody)

Czy chcesz używać obrazów WebP w WordPress?

Obrazy WebP to nowoczesny format obrazu, który zapewnia lepszą kompresję obrazu dzięki zmniejszeniu rozmiaru pliku. Dzięki temu Twoja witryna ładuje się szybciej i oszczędza przepustowość.

W tym artykule pokażemy, jak łatwo używać obrazów WebP w WordPress.

Adding WebP images in WordPress

Co to jest WebP i dlaczego warto używać obrazów WebP w WordPress?

WebP to nowy format plików obrazów używanych w Internecie. Używając formatu obrazu WebP, Twoje obrazy będą o 25-34% mniejsze niż PNG i JPEG bez utraty jakości.

Jeśli obrazy spowalniają Twoją witrynę, konwersja ich do formatu WebP może poprawić wyniki testu szybkości ładowania strony .

Aby dowiedzieć się więcej na temat kompresji obrazu, zapoznaj się z naszym przewodnikiem jak optymalizować obrazy w sieci .

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

Czy należy używać obrazów WebP w WordPress?

Obrazy WebP mogą pomóc przyspieszyć działanie witryny WordPress . Zaleca się stosowanie najlepszych praktyk wraz z wtyczką buforującą WordPress, CDN i nie tylko.

Domyślnie WordPress nie obsługuje obrazów WebP, a przesłanie obrazu WebP spowoduje wyświetlenie błędu.

WebP image upload error in WordPress

Aby to naprawić, będziesz musiał użyć wtyczki do kompresji obrazu, aby przekonwertować obrazy na format obrazów WebP. Nadal będziesz przesyłać obrazy w formatach plików obsługiwanych przez WordPress, takich jak PNG, JPEG i GIF, aby można było ich użyć jako kopii zapasowej.

Jeśli Twoja witryna używa wielu obrazów i spowalniają one Twój blog WordPress , zdecydowanie powinieneś rozważyć użycie obrazów WebP.

Oto jak używać obrazów WebP w WordPress. Pokażemy Ci wiele metod, dzięki czemu możesz wybrać tę, która najlepiej Ci odpowiada:

Metoda 1. Używanie obrazów WebP w WordPress z EWWW Optimizer

Wtyczka EWWW Image Optimizer jest jedną z najlepszych wtyczek do kompresji obrazu WordPress , która umożliwia optymalizację obrazów WordPress. Obsługuje również obrazy WebP i może automatycznie wyświetlać je w obsługiwanych przeglądarkach.

Najpierw należy zainstalować i aktywować wtyczkę EWWW Image Optimizer . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress .

Po aktywacji przejdź do strony Ustawienia »EWWW Image Optimizer , aby skonfigurować opcje wtyczki. Zostaniesz powitany przez kreatora konfiguracji, ale możesz kliknąć link „Wiem, co robię”, aby wyjść z kreatora.

EWWW Wizard

Na następnym ekranie zobaczysz kilka opcji wtyczek. Przewiń w dół i zaznacz pole obok opcji „Konwersja WebP”.

WebP conversion in EWWW

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

Następnie należy przewinąć w dół do sekcji Konwersja WebP. Wtyczka pokaże teraz kilka reguł przepisywania z czerwonym obrazem podglądu.

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

Insert rewrite rules

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

WebP Delivery method successful

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

Po zakończeniu wróć do strony ustawień wtyczki i ponownie kliknij przycisk Zapisz zmiany. Jeśli obraz podglądu zmieni kolor na zielony, oznacza to, że pomyślnie włączyłeś dostarczanie obrazów WebP na swojej witrynie WordPress .

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

Konwertuj zbiorczo swoje stare obrazy do wersji WebP

EWWW Image Optimizer umożliwia łatwą konwersję wcześniej przesłanych plików graficznych do obrazów WebP. Po prostu przejdź do strony Media »Library i przejdź do widoku listy.

Select files in Media

Następnie kliknij przycisk Opcje ekranu i zmień „Liczbę elementów na stronę” na 999. Jeśli masz ponad 1000 obrazów, te obrazy pojawią się na następnej stronie.

W ten sposób będziesz mógł szybko wybrać dużą liczbę obrazów do optymalizacji zbiorczej. Następnie kliknij pole wyboru Wybierz wszystko u góry, aby zaznaczyć wszystkie obrazy.

Bulk Optimize

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

Na następnym ekranie wtyczka da ci opcję pominięcia kompresji obrazu i konwersji tylko do WebP. Możesz zaznaczyć tę opcję, jeśli obrazy są już zoptymalizowane.

Run optimization

Następnie kliknij przycisk „Skanuj w poszukiwaniu niezoptymalizowanych obrazów”, aby kontynuować. Wtyczka wyświetli liczbę znalezionych obrazów, więc możesz kliknąć przycisk Optymalizuj, aby kontynuować.

Twoje obrazy zostaną teraz zoptymalizowane, a optymalizator EWWW wygeneruje wersje WebP dla Twoich obrazów.

WebP image conversion finished

Testowanie dostarczania obrazu WebP

Po zoptymalizowaniu obrazów możesz przejść do posta na blogu lub strony zawierającej kilka obrazów. Najedź myszą na dowolny obraz i kliknij prawym przyciskiem myszy, aby otworzyć obraz w nowej karcie.

checking image

Spowoduje to otwarcie obrazu w nowej karcie przeglądarki i zobaczysz, że ma rozszerzenie .webp na pasku adresu.

Verify WebP image is served

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

Metoda 2. Używanie obrazów WebP w WordPress z Imagify

Imagify to wtyczka do optymalizacji obrazu WordPress stworzona przez ludzi stojących za WP Rocket , najlepszą wtyczką buforującą WordPress . Umożliwia łatwą optymalizację i konwersję obrazów do formatu obrazu WebP.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Imagify . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress .

Po aktywacji musisz odwiedzić stronę Ustawienia »Imagify , aby skonfigurować ustawienia wtyczki. Stąd. kliknij przycisk „Utwórz bezpłatny klucz API”, aby kontynuować.

Create Imagify API key

Zostaniesz poproszony o wpisanie firmowego adresu e-mail , po czym możesz sprawdzić, czy w skrzynce odbiorczej znajduje się wiadomość e-mail zawierająca 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 musisz zaznaczyć opcje obok opcji „Utwórz wersje webp obrazów” i „Wyświetlaj obrazy w formacie webp w witrynie”.

Imagify WebP Settings

Poniżej możesz wybrać jedną z dwóch metod dostarczania do wyświetlania obrazów WebP w WordPress. Pierwsza to metoda .htaccess, a druga to użycie tagu .

Metoda .htaccess jest szybsza, ale nie działa, jeśli używasz usługi CDN . Metoda tagu działa również z sieciami CDN, ale może zepsuć niektóre motywy WordPress.

Możesz wybrać jedną, która dobrze pasuje do Twojej witryny. Następnie kliknij przycisk „Zapisz i przejdź do optymalizatora zbiorczego” u dołu.

Save settings and start image optimizer

Spowoduje to przejście do strony Media »Bulk Optimization . Wtyczka automatycznie rozpocznie optymalizację wszystkich obrazów WordPress w tle.

Optimization status

Jeśli masz dużo obrazó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 obrazu.

Testowanie obrazów WebP w WordPress

Po zakończeniu optymalizacji możesz odwiedzić stronę lub post zawierający kilka obrazów. Najedź kursorem myszy na obraz, a następnie kliknij prawym przyciskiem myszy, aby wybrać „Otwórz obraz w nowej karcie”.

checking image

Spowoduje to otwarcie obrazu w nowej karcie przeglądarki i będzie można zobaczyć rozszerzenie .webp na pasku adresu.

Verify WebP image is served

Metoda 3. Używanie obrazów WebP w WordPress z SG Optimizer

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

SiteGround jest jedną z najlepszych firm hostingowych WordPress . Oferują swoim użytkownikom bezpłatną wtyczkę SG Optimizer, która pozwala zoptymalizować wydajność WordPress. Zawiera również opcję optymalizacji obrazów WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę SG Optimizer .

Po aktywacji wtyczka doda nową pozycję menu do paska bocznego administratora, oznaczoną „SG Optimizer”. Kliknięcie go przeniesie Cię na stronę ustawień wtyczki.

SG Optimizer settings

Tutaj możesz włączyć ustawienia buforowania, jeśli chcesz używać wbudowanego systemu buforowania SiteGround .

Następnie możesz przejść do zakładki Optymalizacja mediów i włączyć opcję „Generuj kopie nowych obrazów w protokole WebP”.

Enable WebP images in SG Optimizer

Poniżej zobaczysz opcję „Generuj zbiorczo pliki WebP”. Kliknięcie go rozpocznie generowanie kopii WebP dla wszystkich plików graficznych w Twojej bibliotece multimediów WordPress.

Bulk generate WebP images

Po zakończeniu Twoja witryna WordPress zacznie udostępniać obrazy WebP.

Testowanie obrazów WebP w SG Optimizer

Aby sprawdzić, czy Twoja witryna obsługuje obrazy WebP, musisz otworzyć stronę w witrynie zawierającą kilka obrazów.

Następnie kliknij prawym przyciskiem myszy i wybierz narzędzie Sprawdź. Otworzy się konsola programisty, w której musisz przełączyć się na kartę Sieć.

Viewing WebP Images in developer tools

W tym miejscu kliknij kartę „img”, a następnie załaduj ponownie stronę (CTRL + R w systemie Windows i Command + R na komputerze Mac). Gdy Twoja witryna zostanie ponownie załadowana, zobaczysz wszystkie obrazy załadowane w konsoli programisty.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się korzystać z obrazów WebP w WordPress. Możesz również chcieć zobaczyć nasz przewodnik , jak utworzyć biuletyn e-mailowy , oraz nasze porównanie najlepszych usług telefonicznych dla firm dla Twojej witryny.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .