W WPBeginner stale oceniamy nowe technologie, które mogą pomóc użytkownikom WordPress tworzyć szybsze, lepiej działające strony internetowe. Obrazy WebP są już od jakiegoś czasu na naszym celowniku i chociaż jeszcze ich nie wdrożyliśmy na naszej własnej stronie, jesteśmy świadomi potencjału tego formatu.
To, co czyni WebP interesującym, to jego zdolność do zmniejszenia rozmiaru plików obrazów nawet o 35% bez zauważalnej utraty jakości. Widzieliśmy strony korzystające z WebP osiągające znaczące poprawy w szybkości ładowania i zaangażowaniu użytkowników.
Na podstawie naszego procesu badawczego i testowania pokażemy Ci, jak używać obrazów WebP w WordPress, aby skorzystać z zalet szybkości tego nowoczesnego formatu obrazu.
Co to jest WebP?
WebP to nowoczesny format obrazu opracowany przez Google specjalnie do użytku w internecie. Tym, co go wyróżnia, jest jego doskonała technologia kompresji. Obrazy WebP są zazwyczaj o 25-35% mniejsze niż pliki JPEG i PNG, zachowując jednocześnie identyczną jakość wizualną.
Dla porównania, jeśli Twój obecny obraz PNG ma 100 KB, ten sam obraz w formacie WebP będzie miał około 65-75 KB bez widocznej różnicy w jakości. Zmniejszenie rozmiaru bezpośrednio przekłada się na szybsze ładowanie stron i lepsze wrażenia użytkownika.
Format obsługuje zarówno kompresję stratną, jak i bezstratną, a także funkcje takie jak przezroczystość i animacja, co czyni go wszechstronnym zamiennikiem dla wielu tradycyjnych formatów.
Dowiedz się o kompresji obrazów w naszym przewodniku na temat optymalizacji obrazów dla sieci.
Obsługa przeglądarek: Czy WebP jest gotowy dla Twojej witryny?
Obecnie WebP cieszy się silnym wsparciem przeglądarek z ponad 95% globalnym zasięgiem. Wszystkie główne przeglądarki, w tym Chrome, Firefox, Safari (od iOS 14) i Edge, w pełni obsługują obrazy WebP.
Pozostałe 5% to głównie starsze wersje przeglądarek, których użycie szybko spada.
Czy powinieneś używać obrazów WebP w WordPress?
Dla większości stron WordPress odpowiedź brzmi tak. Implementacja WebP może znacząco przyspieszyć Twoją stronę WordPress i doskonale współpracuje z innymi optymalizacjami wydajności, takimi jak wtyczki do buforowania i sieci CDN.
Od WordPress 5.8, platforma posiada natywne wsparcie dla WebP, co oznacza, że możesz przesyłać i używać obrazów WebP bezpośrednio, bez żadnych wtyczek. Jednak to podstawowe wsparcie nie obejmuje automatycznej konwersji ani opcji zapasowych.
Aby uzyskać najlepsze rezultaty, zalecamy użycie dedykowanej wtyczki do optymalizacji obrazów. Te wtyczki automatycznie konwertują istniejące obrazy do formatu WebP i serwują tradycyjne wersje JPEG lub PNG dla niewielkiego odsetka użytkowników z nieobsługiwanymi przeglądarkami.
WebP jest szczególnie korzystne, jeśli Twoja witryna jest bogata w obrazy (jak blogi fotograficzne, sklepy internetowe lub portfolio) lub jeśli Twój blog WordPress obecnie boryka się z problemami powolnego ładowania z powodu dużych obrazów.
Oto jak używać obrazów WebP w WordPress. Pokażemy Ci wiele metod, abyś mógł wybrać tę, która działa najlepiej dla Ciebie:
- Używanie obrazów WebP w WordPress z EWWW Optimizer
- Używanie obrazów WebP w WordPress z Imagify
- Używanie obrazów WebP w WordPress z SG Optimizer
- Eksperckie poradniki dotyczące używania obrazów w WordPress
Samouczek wideo
Jeśli wolisz instrukcje pisemne, czytaj dalej.
Metoda 1: Używanie obrazów WebP w WordPress z EWWW Optimizer
EWWW Image Optimizer to jedna z najlepszych wtyczek do kompresji obrazów WordPress, która pozwala optymalizować obrazy w WordPress. Obsługuje również obrazy WebP i może automatycznie wyświetlać je w obsługiwanych przeglądarkach. Zobacz naszą recenzję EWWW Image Optimizer, aby uzyskać więcej szczegółów.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę EWWW Image Optimizer. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do strony Ustawienia » EWWW Image Optimizer, aby skonfigurować opcje wtyczki. Zostaniesz przywitany kreatorem konfiguracji, ale możesz kliknąć link „Wiem, co robię”, aby go zamknąć.
Na następnym ekranie zobaczysz szereg opcji wtyczki.
Przewiń w dół i zaznacz pole wyboru obok opcji „Konwersja WebP”.
Następnie kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.
Następnie musisz przewinąć w dół do sekcji Konwersja WebP. Wtyczka wyświetli teraz niektóre reguły 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 pliku .htaccess.
Jeśli wtyczce uda się dodać te reguły, czerwony podgląd obrazu zmieni kolor 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 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 stronie WordPress.
Alternatywnie, możesz wybrać metody przepisywania WebP za pomocą JS lub przepisywania WebP jako opcje dostarczania WebP. Są one nieco wolniejsze niż metoda .htaccess, ale wykonają zadanie.
Masowa konwersja starych obrazów do wersji WebP
EWWW Image Optimizer pozwala łatwo konwertować wcześniej przesłane pliki obrazów do formatu WebP. Po prostu przejdź do strony Media » Biblioteka i przełącz się na widok listy.
Następnie kliknij przycisk „Opcje ekranu” i zmień „Liczba elementów na stronie” na 999. Jeśli masz 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 masowej optymalizacji. Następnie kliknij pole wyboru „Zaznacz wszystko” u góry, aby zaznaczyć wszystkie obrazy.
Następnie kliknij menu rozwijane „Akcje masowe” i wybierz opcję „Optymalizuj masowo”. Na koniec kliknij przycisk „Zastosuj”.
Na następnym ekranie wtyczka da Ci możliwość pominięcia kompresji obrazów i tylko konwersji ich do formatu WebP. Możesz zaznaczyć tę opcję, jeśli Twoje obrazy są już zoptymalizowane.
Następnie kliknij przycisk „Skanuj nieoptymalizowane obrazy”, aby kontynuować. Wtyczka wyświetli liczbę znalezionych obrazów, więc możesz kliknąć przycisk „Optymalizuj”, aby przejść dalej.
Twoje obrazy zostaną teraz zoptymalizowane, a EWWW Optimizer wygeneruje wersje WebP dla Twoich obrazów.
Testowanie dostarczania obrazów WebP
Po zoptymalizowaniu obrazów możesz przejść do wpisu na blogu zawierającego kilka obrazów.
Najedź kursorem na dowolny obrazek i kliknij prawym przyciskiem myszy, aby otworzyć obrazek w nowej karcie.
Spowoduje to otwarcie obrazu w nowej karcie przeglądarki.
Zobaczysz, że ma rozszerzenie .webp w pasku adresu.
Jeśli wtyczka nie może serwować obrazu WebP, możesz wrócić do strony ustawień wtyczki. Stamtąd możesz zmienić opcję dostarczania WebP na metody „Przekierowanie WebP przez JS” lub „Przekierowanie WebP”.
Metoda 2: Używanie obrazów WebP w WordPress z Imagify
Imagify to wtyczka do optymalizacji obrazów WordPress stworzona przez ludzi stojących za WP Rocket, najlepszą wtyczką buforującą WordPress. Pozwala łatwo optymalizować i konwertować obrazy do formatu obrazów WebP. Zobacz naszą recenzję Imagify, aby dowiedzieć się więcej.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Imagify. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić stronę Ustawienia » Imagify, aby skonfigurować ustawienia wtyczki. Stamtąd kliknij przycisk „Utwórz darmowy klucz API”, aby kontynuować.
Zostaniesz poproszony o podanie służbowego adresu e-mail. Następnie możesz sprawdzić swoją skrzynkę odbiorczą w poszukiwaniu wiadomości e-mail zawierającej Twój 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 zaznaczyć opcje obok „Utwórz wersje webp obrazów” 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. Pierwsza to metoda .htaccess, a druga to użycie tagu.
Metoda .htaccess jest szybsza, ale nie działa, jeśli korzystasz z usługi CDN. Metoda tagów działa również z CDN, ale może zepsuć niektóre motywy WordPress.
Możesz wybrać jeden z nich, który dobrze sprawdzi się w Twojej witrynie. Następnie kliknij przycisk „Zapisz i przejdź do masowego optymalizatora” na dole.
Spowoduje to przejście do strony Media » Optymalizacja masowa.
Wtyczka automatycznie rozpocznie optymalizację wszystkich Twoich obrazów WordPress w tle.
Jeśli masz dużo obrazów, może to potrwać chwilę. 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 wpis 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.
Będziesz mógł zobaczyć rozszerzenie .webp w pasku adresu.
Metoda 3: Używanie obrazów WebP w WordPress z SG Optimizer
Ta metoda jest zalecana, jeśli jesteś użytkownikiem SiteGround.
SiteGround to jedna z najlepszych firm hostingowych WordPress. Oferują swoim użytkownikom darmową wtyczkę SG Optimizer, która pozwala zoptymalizować wydajność WordPressa. Zawiera ona 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 zatytułowaną „SG Optimizer”. Kliknięcie jej 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 WebP nowych obrazów”.
Poniżej zobaczysz opcję „Masowe generowanie plików WebP”.
Kliknięcie przycisku przełączania tej opcji rozpocznie generowanie kopii WebP dla wszystkich plików obrazów w Twojej bibliotece multimediów WordPress.
Po zakończeniu Twoja witryna WordPress zacznie serwować obrazy WebP.
Testowanie obrazów WebP w SG Optimizer
Aby sprawdzić, czy Twoja witryna serwuje obrazy WebP, musisz otworzyć stronę w swojej witrynie z kilkoma obrazami.
Następnie kliknij prawym przyciskiem myszy i wybierz narzędzie Inspekcja. Spowoduje to otwarcie konsoli deweloperskiej, gdzie musisz przełączyć się na kartę Sieć.
Stąd kliknij zakładkę „img”, a następnie przeładuj stronę (CTRL+R w systemie Windows i Command+R na Macu). Gdy Twoja strona zostanie przeładowana, zobaczysz wszystkie obrazy załadowane w konsoli deweloperskiej.
Eksperckie poradniki dotyczące używania obrazów w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak używać obrazów WebP w WordPress. Możesz również zapoznać się z innymi poradnikami dotyczącymi używania obrazów na swojej stronie WordPress:
- Jak prawidłowo dodawać obrazy w WordPressie (krok po kroku)
- Jak dodać obrazy wyróżniające lub miniatury postów w WordPress
- WebP vs. PNG vs. JPEG: Najlepszy format obrazu dla WordPressa
- Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
- Porównanie najlepszych wtyczek do kompresji obrazów WordPress
- Narzędzia do tworzenia lepszych obrazów do Twoich wpisów na blogu
- Świetne wtyczki WordPress do zarządzania obrazami (zaktualizowane)
- Tekst alternatywny obrazu a tytuł obrazu w WordPress – jaka jest różnica?
- Gdzie WordPress przechowuje obrazy na Twojej stronie?
- Jak łatwo leniwie ładować obrazy w WordPressie
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Olaf
Kiedy pojawia się pytanie, jak przyspieszyć stronę internetową, multimedia są jednym z obszarów, w których prawie zawsze jest miejsce na optymalizację. Praktycznie każdy użytkownik WordPress, chyba że jest profesjonalistą, przesyła obrazy na stronę w takiej postaci, w jakiej są zapisane na jego komputerze, często niepotrzebnie duże zarówno pod względem wymiarów, jak i rozmiaru pliku. Ciekawie jest zobaczyć, jak bardzo może poprawić się szybkość strony internetowej tylko poprzez dostosowanie mediów, a konkretnie przez kompresję obrazów do innego formatu. Lubię WebP, ponieważ nadal oferuje wystarczającą jakość, jednocześnie zachowując znacznie mniejsze rozmiary plików w porównaniu do oryginału. W przypadku istniejących stron internetowych z dziesiątkami obrazów, przydatna jest wiedza o metodzie masowego przetwarzania, i wtedy poradniki takie jak ten są niezwykle cenne.
Paul
Postępowałem zgodnie z podanymi krokami, ale podczas testowania nowa karta, która otwiera się po wybraniu „Otwórz obraz w nowej karcie”, nie kończy się na webp, jak pokazujesz, ale na oryginalnym rozszerzeniu pliku. Jednak po wybraniu „Zapisz obraz jako…” pokazuje webp. Nie jestem do końca pewien, co to oznacza. Czy obraz jest naprawdę webp i czy jest tak wyświetlany? Używam najnowszej wersji Chrome, więc nie powinien pobierać obrazu zastępczego. Używam wtyczki do buforowania, ale wyczyściłem pamięć podręczną przed testowaniem.
Wsparcie WPBeginner
Używasz obrazów WebP, jeśli tak właśnie widzisz podczas zapisywania. Zależałoby to od używanego narzędzia, ale istnieje przekierowanie WebP dla adresu URL, dzięki czemu zachowujesz adres URL, ale wyświetlasz wersję obrazu WebP, aby zapobiec błędom 404.
Admin
MOINUDDIN WAHEED
Szukałem jakiegoś mechanizmu do konwersji moich obrazów WordPress na format WebP, ponieważ zauważyłem ogromną różnicę w rozmiarze plików między obrazami PNG i JPG a obrazami WebP.
Posiadanie obrazów WebP z pewnością pomoże w szybszym ładowaniu strony internetowej. Poprawi to szybkość i wydajność strony.
Dziękuję za poradnik dotyczący konwersji istniejących obrazów WordPress do formatu WebP.
Wsparcie WPBeginner
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk
Zazwyczaj generuję obrazy WebP w zewnętrznym edytorze. Czy jednak lepszą praktyką jest przesyłanie obrazów w formacie PNG do sieci, a następnie generowanie ich do WebP? Mam na myśli, czy lepiej mieć oba formaty do wyboru dla przeglądarki, czy nie? Obawiam się, że ktoś może nadal używać starej przeglądarki, która nie obsługuje WebP, a wtedy te obrazy nie wyświetlą się na mojej stronie dla tego użytkownika.
Wsparcie WPBeginner
Jeśli konkretnie chcesz obraz zastępczy, najlepszą opcją będzie pozwolenie wtyczkom na konwersję obrazów. Tworzenie obrazów WebP za pomocą edytora byłoby zalecanym sposobem na zaoszczędzenie miejsca na Twojej stronie.
Admin
Jiří Vaněk
Dziękuję za odpowiedź. Nadal mam mnóstwo miejsca na moim FTP (100 GB), więc na podstawie Twojej odpowiedzi, raczej użyję wtyczki, aby mieć więcej formatów obrazów na stronie internetowej, zapewniając, że działa ona dobrze nawet dla starszych przeglądarek, które nie obsługują WebP. Wiem, że takich przeglądarek jest bardzo mało, ale nadal istnieją. Dzięki za radę.
emir
Używaliśmy kilku obrazów w formacie webp w WooCommerce, podczas tworzenia kopii zapasowej WooCommerce na innym serwerze, obrazy webp nie zostały przeniesione, wróciliśmy ponownie do formatu jpeg.
Wsparcie WPBeginner
Dziękujemy za podzielenie się swoimi doświadczeniami z obrazami webp. Jeśli skontaktujesz się z pomocą techniczną swojego narzędzia do tworzenia kopii zapasowych, zazwyczaj istnieją fragmenty kodu lub inne sposoby rozwiązania tego problemu!
Admin
Ashikur Rahman
jeśli wykonam krok 1, będę miał stare pliki w formacie jpg/png, prawda? to stworzy bałagan w folderze przesyłania. mają opcję usunięcia oryginalnego pliku, jeśli z niej skorzystam. czy to zepsuje moje obrazy w poście?
i co najważniejsze, jeśli dezaktywuję/usunę wtyczkę eww, czy usunie ona również skonwertowany obraz webp?
co powinienem zrobić?
Wsparcie WPBeginner
Wtyczka obecnie przechowuje stare obrazy dla przeglądarek, które nie obsługują obrazów WebP i tworzy obraz WebP tylko wtedy, gdy ma lepszy rozmiar niż jpg/png. Usunięcie oryginału nie spowoduje awarii Twojej witryny, ale jeśli większość Twoich odwiedzających korzysta ze starszych przeglądarek, które nie obsługują WebP, może to być dla tych użytkowników problematyczne.
Musiałbyś skontaktować się z pomocą techniczną wtyczki w celu uzyskania aktualnego statusu utworzonych obrazów po usunięciu wtyczki.
Admin
Rebecca
Cześć, zauważyłem, że niektóre wtyczki, takie jak wp-optimize, oferują opcję zachowania danych EXIF podczas konwersji do formatu WebP. Czy te dane są konieczne do zachowania?
Dziękuję z góry
Wsparcie WPBeginner
Nie jest to wymagane, ale jest przydatne dla stron, które wykorzystują te informacje.
Admin
Theo
oto czego szukam,
Bardzo pomocne
Wsparcie WPBeginner
Cieszymy się, że nasz przewodnik był pomocny!
Admin
Kim
Dziękuję bardzo za szybką odpowiedź!
Wsparcie WPBeginner
Glad we could help
Admin
Kim
To świetna wskazówka, mam tylko 1 pytanie… czy będę musiał uruchamiać optymalizator EWWW za każdym razem, gdy przesłuję nowy obrazek (PNG, JPG)?
Wsparcie WPBeginner
The plugin will automate the process for new uploads
Admin