Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Adding WebP images in 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.

EWWW Wizard

Na następnym ekranie zobaczysz kilka opcji wtyczki.

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

WebP conversion in EWWW

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.

Insert rewrite rules

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”.

WebP Delivery method successful

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.

Select files in Media

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.

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 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.

Run optimization

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.

WebP image conversion finished

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.

checking image

Spowoduje to otwarcie obrazka w nowej karcie przeglądarki.

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

Verify WebP image is served

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ć.

Create Imagify API key

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”.

Imagify WebP Settings

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.

Save settings and start image optimizer

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

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

Optimization status

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”.

checking image

Spowoduje to otwarcie obrazka w nowej karcie przeglądarki.

Rozszerzenie .webp będzie widoczne na pasku adresu.

Verify WebP image is served

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.

SG Optimizer settings

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”.

Enable WebP images in SG Optimizer

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.

Bulk generate WebP images

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ć.

Viewing WebP Images in developer tools

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:

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

17 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    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!

  2. MOINUDDIN WAHEED

    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

      You’re welcome, glad you found our guide helpful :)

      Administrator

  3. Jiří Vaněk

    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

      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

  4. emir

    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

      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

  5. Ashikur Rahman

    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

      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

  6. Rebecca

    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

      It is not required but is useful for the sites that use that information.

      Administrator

  7. Theo

    here’s what I’m looking for,
    Very helpful

    • WPBeginner Support

      Glad our guide was helpful!

      Administrator

  8. Kim

    Thanks so much for the quick reply!

    • WPBeginner Support

      Glad we could help :)

      Administrator

  9. Kim

    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

      The plugin will automate the process for new uploads :)

      Administrator

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.