W artykule:
Czy chcesz używać obrazów WebP w WordPress?
Obrazy WebP to nowoczesny format obrazu, który oferuje lepszą kompresję obrazu poprzez zmniejszenie rozmiaru pliku. Dzięki temu Twoja strona ładuje się szybciej i oszczędza przepustowość.
W tym artykule pokażemy, jak łatwo korzystać z obrazów WebP w WordPress.
Co To jest WebP & Dlaczego używać obrazów WebP w WordPress?
WebP to nowy format plików do wykorzystania w Internecie. Korzystając z formatu obrazu WebP, obrazy będą o 25-34% mniejsze niż PNG i JPEG bez utraty jakości.
Jeśli obrazy spowalniają witrynę, konwersja ich do formatu WebP może poprawić wyniki testu prędkości ładowania strony.
Aby dowiedzieć się więcej na temat kompresji obrazów, zapoznaj się z naszym przewodnikiem dotyczącym optymalizacji obrazów w Internecie.
Ponieważ WebP jest nowym formatem plików, 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 w przyspieszeniu witryny WordPress. Jest to zalecana najlepsza praktyka do stosowania wraz z wtyczką buforującą WordPress, CDN i innymi.
Od WordPress 5.8, WordPress obsługuje obrazy WebP domyślnie. Oznacza to, że możesz zapisywać i przesyłać obrazy WebP do witryny WordPress bez użycia wtyczki.
Ale powiedziawszy to, nadal możesz chcieć użyć wtyczki do kompresji obrazu w swojej witrynie WordPress. Jeśli wielu użytkowników korzysta z nieobsługiwanych przeglądarek, powinieneś rozważyć użycie wtyczki do kompresji obrazu.
Wtyczki do kompresji obrazów mogą konwertować istniejące obrazy do formatu WebP i wyświetlać obrazy JPEG lub PNG jako opcję awaryjną w przeglądarkach, które jeszcze nie obsługują WebP.
Jeśli Twoja witryna używa wielu obrazów i spowalniają twój blog WordPress, zdecydowanie powinieneś rozważyć użycie obrazów WebP.
Oto jak korzystać z obrazów WebP w WordPress. Pokażemy Ci wiele metod, abyś mógł wybrać tę, która najlepiej Ci odpowiada:
- Korzystanie z obrazów WebP w WordPress z EWWW Optimizer
- Korzystanie z obrazów WebP w WordPress z wp Rocket
- Korzystanie z obrazów WebP w WordPress z SG Optimizer
Metoda 1. Korzystanie z obrazów WebP w WordPress z EWWW Optimizer
Wtyczka EWWW Image Optimizer jest jedną z najlepszych wtyczek do kompresji obrazu WordPress, która pozwala zoptymalizować obrazy WordPress. Obsługuje również obrazy WebP i może automatycznie wyświetlać je w obsługiwanych przeglądarkach.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę EWWW Image Optimizer. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do Ustawienia ” EWWW Image Optimizer strona do konfiguracji opcji wtyczki. Zostaniesz powitany przez kreatora konfiguracji, ale możesz kliknąć link „wiem, co robię”, aby wyjść z Kreatora.
Na następnym ekranie zobaczysz kilka opcji wtyczek. Przewiń w dół i zaznacz pole obok opcji „Konwersja WebP”.
Następnie kliknij przycisk Zapisz zmiany, aby zapisać ustawienia.
Następnie musisz przewinąć w dół do sekcji konwersji 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 twojego.plik htaccess.
Jeśli wtyczka pomyślnie dodała te reguły, czerwony podgląd obrazu zmieni się na zielony z tekstem „WebP”.
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 na dole .plik htaccess ręcznie.
Po zakończeniu wróć do strony ustawień wtyczki i ponownie kliknij przycisk Zapisz zmiany. Jeśli podgląd obrazu zmieni kolor na zielony, oznacza to, że pomyślnie włączyłeś dostarczanie obrazu WebP w swojej witrynie WordPress.
Alternatywnie możesz wybrać metody przepisywania JS WebP lub < picture> WebP jako opcje dostawy WebP. Są one nieco wolniejsze niż.htaccess metoda, ale to będzie zadanie wykonane.
Masowa Konwersja starych obrazów do wersji WebP
EWWW Image Optimizer pozwala łatwo konwertować wcześniej przesłane pliki obrazów do obrazów WebP. Po prostu przejdź do Media ” Biblioteka strona i Przełącz do widoku listy.
Następnie musisz kliknąć przycisk Opcje ekranu i zmienić „liczbę elementów na stronie” 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 wybrać wszystkie obrazy.
Następnie kliknij menu rozwijane akcje zbiorcze i wybierz opcję Optymalizacja Zbiorcza. Na koniec kliknij przycisk Zastosuj.
Na następnym ekranie wtyczka daje możliwość pominięcia kompresji obrazu i konwersji tylko na WebP. Możesz zaznaczyć tę opcję, jeśli Twoje obrazy są już zoptymalizowane.
Następnie kliknij przycisk „Scan for Unoptimized Images”, aby kontynuować. Wtyczka pokaże ci liczbę znalezionych obrazów, dzięki czemu możesz kliknąć przycisk optymalizacji, aby kontynuować.
Twoje obrazy zostaną zoptymalizowane, a EWWW optimizer wygeneruje wersje WebP dla Twoich obrazów.
Testowanie Dostarczania Obrazu WebP
Po zoptymalizowaniu zdjęć możesz przejść do posta na blogu lub strony zawierającej kilka obrazów. Najedź myszką na dowolny obraz i kliknij prawym przyciskiem myszy, aby otworzyć obraz w nowej karcie.
Spowoduje to otwarcie obrazu w nowej karcie przeglądarki, a będziesz mógł zobaczyć, że ma .rozszerzenie webp w pasku adresu.
Jeśli wtyczka nie jest w stanie obsłużyć obrazu webp, możesz wrócić do strony ustawień wtyczki. Stąd możesz zmienić opcję dostarczania WebP na metody’ js WebP Rewriting 'lub’ <picture> WebP Rewriting’.
Metoda 2. Korzystanie z obrazów WebP w WordPress z Imagify
Imagify to wtyczka do optymalizacji obrazu WordPress stworzona przez ludzi stojących za WP Rocket, najlepszą wtyczką do buforowania WordPress. Pozwala łatwo optymalizować i konwertować obrazy do formatu obrazu WebP.
Pierwszą rzeczą, którą musisz zrobić,to zainstalować i aktywować wtyczkę Imagify. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Ustawienia ” Imagify strona do konfiguracji ustawień wtyczki. Stąd. kliknij przycisk „Utwórz bezpłatny klucz API”, aby kontynuować.
Zostaniesz poproszony o podanie firmowego adresu e-mail, po czym możesz sprawdzić skrzynkę odbiorczą pod kątem wiadomości e-mail zawierającej klucz API. Skopiuj i wklej klucz na stronie ustawień wtyczki i kliknij przycisk Zapisz zmiany.
Następnie musisz przewinąć w dół do sekcji Optymalizacja. Tam musisz sprawdzić Opcje obok opcji „Utwórz wersje obrazów webp” i „wyświetlaj obrazy w formacie webp na stronie”.
Poniżej możesz wybrać jedną z dwóch metod dostarczania obrazów WebP w WordPress. Pierwszy jest .metoda htaccess, a druga polega na użyciu znacznika <picture>.
The .metoda htaccess jest szybsza, ale nie działa, jeśli korzystasz z usługi CDN. < picture > metoda tag działa również z CDN, ale może złamać niektóre motywy WordPress.
Możesz wybrać jeden, który działa dobrze dla Twojej witryny. Następnie kliknij przycisk „Zapisz i przejdź do optymalizacji zbiorczej” na dole.
To doprowadzi Cię do Media ” Optymalizacja Zbiorcza strona. Wtyczka automatycznie rozpocznie optymalizację wszystkich obrazów WordPress w tle.
Jeśli masz dużo zdjęć, może to trochę 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 na obraz, a następnie kliknij prawym przyciskiem myszy, aby wybrać opcję „Otwórz obraz w nowej karcie”.
Spowoduje to otwarcie obrazu w nowej karcie przeglądarki i będzie można go zobaczyć .rozszerzenie webp w pasku adresu.
Metoda 3. Korzystanie z 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ą 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 nowy element menu na pasku bocznym administratora oznaczony jako „SG Optimizer”. Kliknięcie na niego przeniesie Cię do strony ustawień wtyczki.
Stąd możesz włączyć ustawienia buforowania, jeśli chcesz korzystać z wbudowanego systemu buforowania SiteGround.
Następnie możesz przejść do zakładki Optymalizacja mediów i włączyć opcję „Generuj kopie nowych obrazów WebP”.
Poniżej zobaczysz opcję „zbiorcze generowanie plików WebP”. Kliknięcie na niego rozpocznie generowanie kopii WebP dla wszystkich plików graficznych w bibliotece multimediów WordPress.
Po zakończeniu witryna WordPress rozpocznie obsługę obrazów WebP.
Testowanie obrazów WebP w SG Optimizer
Aby sprawdzić, czy Twoja witryna obsługuje obrazy WebP, musisz otworzyć stronę w witrynie z kilkoma obrazami.
Następnie kliknij prawym przyciskiem myszy i wybierz Inspect tool. Spowoduje to otwarcie Konsoli programisty, w której musisz przejść do karty sieć.
Kliknij tutaj zakładkę „img”, a następnie przeładuj stronę (CTRL+R w systemie Windows i Command+R na komputerze Mac). Podczas przeładowywania witryny zobaczysz wszystkie obrazy załadowane w konsoli dewelopera.
Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się używać obrazów WebP w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia biuletynu e-mailowego oraz naszym porównaniem najlepszych usług telefonicznych dla Twojej witryny.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
