TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

68

Google jest dominującą wyszukiwarką wśród anglojęzycznych użytkowników. W związku z tym właściciele witryn WordPress poważnie kierują się wytycznymi i możliwościami pokazywanymi w narzędziu Google PageSpeed ​​Insights. Jednym z popularnych komunikatów ostrzegawczych w narzędziu PageSpeed ​​jest naprawianie obrazów serwowanych w tradycyjnym formacie na obrazy serwerów w formatach nowej generacji. W tym artykule wyjaśnimy, jak naprawić to ostrzeżenie w witrynach WordPress, aby zoptymalizować obrazy.

Powiązane: Jak naprawić skumulowane przesunięcie układu w WordPressie?

Ostrzeżenie w Google PageSpeed ​​Insights

Przejdź do strony narzędzia Google PageSpeed ​​Insights i przetestuj adres URL swojej strony internetowej. Powinieneś zobaczyć możliwość wyświetlania „Obrazy serwerów w formatach nowej generacji", jak poniżej. Możesz zobaczyć potencjalne oszczędności rozmiaru dla każdego obrazu i szacowane oszczędności czasu ładowania strony.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Ostrzeżenie PageSpeed ​​— wyświetlaj obrazy w formatach nowej generacji

Uwaga: Google twierdzi, że jest to okazja i nie wpłynie na wynik wydajności PageSpeed. Jednak usunięcie tego ostrzeżenia znacznie zwiększa wynik w rzeczywistości.

Formaty obrazów nowej generacji

Zanim przejdziemy dalej, musisz zrozumieć formaty obrazów. Istnieją trzy tradycyjne i popularne formaty obrazów:

  • Joint Photography Experts Group (JPEG lub JPG) – obsługuje kompresję stratną
  • Portable Network Graphics (PNG) – obsługuje przezroczystą i bezstratną kompresję oraz zastępowanie GIF
  • Graphics Interchange Format (GIF) – format bitmapy obsługuje zapętlenie wielu klatek.

Teraz pojawiły się nowe formaty nowej generacji zalecane dla stron internetowych:

  • WebP – opracowany przez Google dla lepszej kompresji
  • JPEG 2000 – udoskonalenie standardów JPEG w kompresji obrazu
  • JPEG XR – format rozszerzonego zakresu JPEG opracowany przez firmę Microsoft

Możesz sprawdzić galerię Google, aby wizualnie porównać różne obrazy. Formaty nowej generacji pomagają znacznie zmniejszyć rozmiar obrazów, zwiększając w ten sposób szybkość ładowania strony. Według Wikipedii 92% przeglądarek obsługuje format WebP, co czyni go obiecującym zamiennikiem tradycyjnego formatu. Dlatego musisz zacząć używać formatu WebP, aby pozbyć się ostrzeżeń wyświetlających obrazy w formatach nowej generacji w narzędziu PageSpeed ​​Insights.

Konwersja formatów obrazu

Chociaż Google promuje lekki format obrazu, nie są one zbyt popularne wśród twórców aplikacji. Wiele aplikacji nie obsługuje tworzenia obrazów w tych formatach. Na przykład SnagIt – popularne narzędzie do przechwytywania ekranu dla blogerów – nie oferuje żadnej opcji tworzenia obrazów w formacie nowej generacji. Możesz tworzyć w tradycyjnym formacie, takim jak PNG lub JPEG.

Teraz, gdy trudno jest znaleźć aplikację do tworzenia formatów graficznych nowej generacji. Zamiast tego możesz przesłać obrazy PNG lub JPEG na swoją witrynę WordPress i użyć wtyczki, aby przekonwertować je na jeden z formatów graficznych nowej generacji. Jest to skuteczny i łatwy sposób, ponieważ nie musisz zmieniać swojego modelu pracy.

Ponieważ Google jest zastrzeżonym właścicielem formatu WebP, wiele wtyczek obsługuje konwersję tradycyjnych obrazów do formatu WebP. Tutaj wyjaśnimy, jak przekonwertować obrazy do WebP i naprawić „serwuj obrazy w formacie nowej generacji” w narzędziu PageSpeed ​​Insights.

Wtyczki WebP do WordPress

Istnieje wiele popularnych wtyczek dostępnych do konwersji WebP.

Optymalizator SG dla SiteGround

Jeśli hostujesz na SiteGround, najlepszą opcją jest użycie wtyczki SG Optimizer. Będzie to działać po wyjęciu z pudełka, aby konwertować i wyświetlać obrazy WebP z twojego serwera. Możesz wybrać poziom kompresji, aby kontrolować jakość przekonwertowanych obrazów przy zachowaniu wszystkich oryginalnych obrazów. Sprawdź nasz wcześniejszy artykuł na temat udostępniania obrazów WebP w SiteGround.

  • Możesz po prostu włączyć opcję „Generuj kopie nowych obrazów WebP” w sekcji „SG Optimizer> Image Optimization”.
  • Kliknij przycisk „Bulk Generate WebP Files”, aby wygenerować obrazy WebP dla wszystkich istniejących obrazów z bezstratnym lub wstępnie zdefiniowanym poziomem kompresji stratnej.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Opcja WebP we wtyczce SG Optimizer

Oferta SEO: Zoptymalizuj swoją witrynę dzięki specjalnej 14-dniowej bezpłatnej wersji próbnej Semrush Pro.

Smush Pro

Smush to kolejna popularna wtyczka do kompresji obrazu z ponad milionem aktywnych instalacji. Jednak WebP jest opcją premium w tej wtyczce i za korzystanie z tej funkcji musisz zapłacić 5 USD miesięcznie (abonament roczny).

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Opcja Smush Pro WebP

Autooptymalizacja

Ta wtyczka oferuje optymalizację obrazu w locie z konwersją WebP za pomocą usługi ShortPixel CDN. Chociaż jest to dobra opcja połączenia CDN i WebP, jest pewien haczyk. Masz limit bezpłatnego wyświetlania do 100 obrazów miesięcznie. Jeśli potrzebujesz więcej, musisz zapłacić 3,99 USD miesięcznie, aby rozpocząć plan premium na maksymalnie 5000 zdjęć. Będzie to kosztowna opcja, jeśli chcesz skompresować i wyświetlić dużą liczbę obrazów. Jeśli chcesz przetestować Autoptimize, po zainstalowaniu i aktywacji wtyczki przejdź do sekcji „Ustawienia > Autooptymalizacja > Obrazy”.

  • Zaznacz pole wyboru „Optymalizuj obrazy”.
  • Wybierz poziom optymalizacji obrazu jako błyszczący, bezstratny lub stratny.
  • Zaznacz pole „Załaduj WebP lub AVIF w obsługiwanych przeglądarkach?”
  • Włącz „Lazy-load images?” pole wyboru.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Ustawienia WebP we wtyczce Autooptimize

Kliknij przycisk „Zapisz zmiany” i przetestuj narzędzie PageSpeed ​​Insights swojej witryny. Powinieneś zobaczyć ostrzeżenie „Obsługuj obrazy w formatach nowej generacji” zniknęło teraz. Jednak zaczniesz widzieć komunikat ostrzegawczy w panelu administracyjnym WordPress, że Twój limit ShortPixel jest używany i prosząc o uaktualnienie planu.

Darmowe wtyczki WebP

Na szczęście dostępnych jest kilka darmowych wtyczek, takich jak WebP Express i WebP Converter for Media. W tym artykule wyjaśnimy proces z wtyczką WebP Converter for Media.

Zainstaluj WebP Converter dla wtyczki multimedialnej

Zaloguj się do panelu administracyjnego WordPress i przejdź do sekcji „Wtyczki > Dodaj nowy”. Wpisz „webp” w polu wyszukiwania, aby przefiltrować wyniki i znaleźć wtyczkę WebP Converter for Media. Kliknij przycisk „Zainstaluj”, a następnie aktywuj wtyczkę na swojej stronie.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Zainstaluj WebP Converter dla wtyczki multimedialnej

Włącz konwersję obrazu WebP

Po aktywacji wtyczki zobaczysz komunikat jak poniżej i klikniesz przycisk „Przyspiesz moją stronę”. Alternatywnie możesz przejść do menu „Ustawienia > WebP Converter”, aby przejść do strony ustawień wtyczki.

  • Wybierz tryb ładowania obrazu jako „przez .htaccess (zalecane)”.
  • Wybierz JPEG, JPG i PNG dla obsługiwanych rozszerzeń plików.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Tryb ładowania obrazu i rozszerzenia plików

  • Aby wyświetlić listę obsługiwanych katalogów, wybierz opcję „/uploads”. Upewnij się, że udostępniasz obrazy z domyślnego folderu przesyłania WordPress. Jeśli przeniosłeś swoje obrazy do subdomeny, wybierz ten katalog, aby wtyczka działała poprawnie.
  • Jako metodę konwersji wybierz opcję „GD (zalecane)”.
  • Na koniec wybierz jakość obrazu zgodnie z potrzebami. Wtyczka używa 85% jako domyślnej wartości jakości konwersji WebP.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Konwersja i jakość katalogów

Wtyczka wykorzystuje również dodatkowe funkcje do dodatkowej optymalizacji obrazu. Możesz pozostawić wartości domyślne bez zmian lub sprawdzić i włączyć/wyłączyć potrzebne wartości zgodnie z potrzebami. Na przykład możesz wybrać buforowanie przeglądarki dla plików WebP, które zalecamy i wybrać usuwanie większych plików WebP. Kliknij przycisk „Zapisz zmiany” po wybraniu wszystkich opcji.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Dodatkowe cechy

Regeneruj obrazy

Wtyczka WebP Converter for Media oferuje również opcję regeneracji wszystkich obrazów w celu konwersji ich do formatu WebP. Jest to przydatne, jeśli masz zdjęcia przesłane na stronę przed zainstalowaniem wtyczki.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Regeneruj obrazy WebP

Sprawdź w Google Chrome

Po zregenerowaniu wszystkich istniejących obrazów możesz otworzyć witrynę w Google Chrome i sprawdzić. Powinieneś zobaczyć, że obrazy WebP są udostępniane z sekcji narzędzi programistycznych. Możesz zapoznać się z tym artykułem, jak sprawdzić, czy obrazy WebP są wyświetlane w przeglądarce Chrome. Jeśli włączyłeś buforowanie przeglądarki, po prostu skopiuj adres URL obrazu i zobacz, że nazwa pliku zawiera .webp.

Problem z obsługą serwera

Niestety nie wszystkie serwery internetowe obsługują konwersję WebP. Możesz to znaleźć, jeśli sekcja „Metoda konwersji” jest wyłączona w ustawieniach wtyczki. Twój serwer powinien mieć zainstalowaną bibliotekę GD lub Imagick, aby obsługiwać format WebP. W przeciwnym razie wtyczka wyświetli błąd i nie powinieneś być w stanie użyć konwersji WebP. O ile przetestowaliśmy, współdzielone serwery hostingowe Bluehost nie obsługują konwersji WebP i zobaczysz komunikat o błędzie podobny do poniższego.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Błąd konfiguracji serwera dla WebP

W takim przypadku musisz porozmawiać z hostem, aby włączyć niezbędną obsługę obrazów WebP.

Włącz buforowanie obrazów WebP za pomocą WP Rocket

Jak wspomniano, wtyczka WebP Converter for Media oferuje opcję włączenia buforowania przeglądarki dla obrazów WebP. Pomoże to przyspieszyć ładowanie strony, instruując przeglądarki, aby buforowały obrazy, gdy użytkownik ponownie otworzy te same obrazy. Jednak ta opcja nie jest dostępna w wielu innych wtyczkach i powinieneś połączyć ją z ustawieniami wtyczki buforującej. Na przykład, jeśli używasz WP Rocket, upewnij się, że zaznaczyłeś pole wyboru dla buforowania przeglądarki w sekcji "Obrazy". Umożliwi to wtyczce buforowanie obrazów WebP i wyświetlanie ich w obsługiwanych przeglądarkach.

Jak naprawić problem z wyświetlaniem obrazów w formatach nowej generacji w WordPress?

Włącz obsługę WebP w WP Rocket

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów