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
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
MOINUDDIN WAHEED says
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support says
You’re welcome, glad you found our guide helpful
Administrator
Jiří Vaněk says
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support says
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Administrator
emir says
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support says
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Administrator
Ashikur Rahman says
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support says
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Administrator
Rebecca says
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support says
It is not required but is useful for the sites that use that information.
Administrator
Theo says
here’s what I’m looking for,
Very helpful
WPBeginner Support says
Glad our guide was helpful!
Administrator
Kim says
Thanks so much for the quick reply!
WPBeginner Support says
Glad we could help
Administrator
Kim says
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support says
The plugin will automate the process for new uploads
Administrator