Kiedy wszyscy myśleli, że obrazy WebP zostały zrobione, wrócili w wielkim stylu. Obrazy WebP są w połowie ich historii powrotu, teraz, gdy Firefox i Microsoft Edge niedawno zaczęły wspierać obrazy WebP.
Czym jest WebP? Jest to najlepszy format obrazu, o którym nikt nie słyszał, ale to się zmieni.
W tym poście pokażę Ci, jak zacząć używać obrazów WebP w swojej witrynie WordPress. Omówimy, jak przekonwertować obrazy na WebP i jak je obsługiwać w kompatybilnych przeglądarkach. Pokażę Ci również, jak Smush Pro może się tym zająć, jeśli nie chcesz dostać się do kodu witryny.
Czym są obrazy nowej generacji?
Gify zostały wynalezione w 1987 roku. Pierwszy standard JPEG został wydany w 1992 roku, a PNG stał się rekomendacją W3C w październiku 1996 roku.
Wiem, że Lata 90. nie wyglądają tak dawno temu, ale minęło prawie 30 lat i nadal Używamy tych samych formatów obrazu! Czy to nie czas na ulepszenie?
Wprowadź nową generację formatów obrazów. JPEG 2000, JPEG XR i WebP to nowoczesne formaty obrazów z doskonałymi możliwościami kompresji i wyjątkową jakością, aby zadowolić internautów. Oznacza to, że produkują one znacznie mniejsze pliki obrazów, dzięki czemu można znacznie poprawić szybkość strony przy użyciu formatów następnej generacji.
WebP jest najbardziej szczupły i zazwyczaj osiąga 30% większą kompresję niż JPEG i JPEG 2000, więc to jest format, na którym dzisiaj się skupimy.
Czym jest WebP?
WebP to format obrazu open source firmy Google. Wykorzystują rozszerzenie pliku .webp
Istnieje kilka odmian obrazów WebP, jeden używa kompresji stratnej i jest porównywalny do obrazów JPEG, ale z 25-34% mniejszy rozmiar pliku. Stratne obrazy WebP obsługują również przezroczystość, czego JPEG nie może zrobić.
Drugi to bezstratny format WebP, który jest podobny do formatu obrazu PNG, ale z 26% mniejszym rozmiarem pliku.
Obrazy WebP są również wszechstronne, ponieważ mają możliwości GIF, JPEG i PNG w jednym formacie. Będziesz w stanie zoptymalizować oraz uprość. Jeśli to nie rozbudzi radości, nic tego nie zrobi.
WebP obsługuje następujące:
- Animacja
- Kompresja bezstratna
- Kompresja stratna
- Przezroczystość kanału alfa
Oznacza to, że możesz konwertować pliki png, gif i JPEG w jeden wygodny format, aby czerpać korzyści z wydajności.
Aby uzyskać bezpośrednie porównanie różnych formatów plików, sprawdź ten post. Nie zapomnij pobrać ściągawki do pobrania.
Darmowy WebP
Teraz zła wiadomość. Nie wszystkie przeglądarki obsługują jeszcze obrazy WebP. Ale to historia powrotu, pamiętasz? Mozilla weszła na rynek w grudniu 2018 r., więc zaledwie kilka miesięcy temu, i nadała obrazom WebP bardzo potrzebny impet. Teraz głównie czekamy na Safari, chociaż Internet Explorer i Firefox dla Androida również nie obsługują jeszcze WebP.
Mimo to, z takim behemotem jak Google zobowiązanym do szybszego tworzenia sieci i wspierania projektu, jest całkiem bezpiecznym zakładem, że obrazy WebP są przyszłością.
nsights-Nex-gen. png “alt=” zrzut ekranu Google sugerujący obrazy następnej generacji “width =” 600 “height=” 224 ” / > prawdziwe subtelne
W rzeczywistości, jeśli korzystałeś Ostatnio z Google PageSpeed Insights, być może zauważyłeś wiadomość o możliwości “serwuj obrazy w formatach następnej generacji”. To sposób Google ‘ a, aby zachęcić Cię do przyjęcia obrazów WebP. (Jeśli w usłudze Google PageSpeed Insights pojawi się komunikat “obrazy o prawidłowym rozmiarze”, spróbuj skalować obrazy.)
Jak dodać obrazy WebP do WordPress
Jeśli chcesz być wczesnym użytkownikiem i używać obrazów WebP w WordPress, zauważysz również, że biblioteka multimediów WordPress nie pozwala na przesyłanie obrazów WebP ze względów bezpieczeństwa. Nie daj się przestraszyć. To nie jest sytuacja SVG. WordPress.com pozwala na obrazy WebP i możesz włączyć tę funkcję na własnej hostowanej witrynie WordPress.
Istnieje wiele sposobów obejścia tych wczesnych problemów z adopcją w WordPress, dzięki czemu możesz zacząć używać obrazów WebP. Aby to zrobić, będziemy potrzebować rozwiązania, które będzie:
- Użyj konwertera WebP, aby przekonwertować istniejące obrazy w bibliotece multimediów na WebP, a także przyszłe przesyłanie
- Możliwość określenia, czy przeglądarka odwiedzającego obsługuje obrazy WebP
- Serwuj obrazy WebP, jeśli są obsługiwane lub starszy format pliku, taki jak PNG lub JPEG, jeśli nie jest
Spoiler alert, Jeśli nie chcesz przejść przez wszystkie te kroki i przejść przez trud modyfikowania plików witryny i optymalizacji obrazów, Smush Pro to kompleksowe rozwiązanie, które może konwertować obrazy na WebP w WordPress i serwować je do kompatybilnych przeglądarek z klapką kilku przełączników. Możesz uzyskać bezpłatny okres próbny, aby przetestować korzyści z wydajności, tutaj.
Konwersja obrazów do WebP dla WordPress
Chociaż możesz przekonwertować swoje obrazy do formatów następnej generacji przed przesłaniem do biblioteki multimediów WordPress, nie jest to praktyczne, jeśli masz dużo obrazów.
Jeśli musisz iść tą drogą (może chcesz przetestować wydajność różnych typów obrazów), możesz użyć konwertera WebP, takiego jak image.online-convert.com/convert-to-webp. wystarczy przesłać plik JPEG, PNG lub GIF, poczekać na utworzenie WebP, a następnie pobrać nowy obraz.
Adobe Photoshop domyślnie nie eksportuje plików w WebP, ale można dodać tę funkcję za pomocą wtyczki. To nie jest to samo, co Wtyczka WordPress. Jest to wtyczka, którą POBiERASZ i dodajesz do folderu Adobe Photoshop na swoim komputerze.
Możesz także pobrać i zainstalować WebPonize dla Mac lub Webpconv Dla Windows. Oba mogą wykonywać konwersje JPEG na WebP lub PNG Na WebP.
W przypadku obrazów WebP WordPress możesz użyć SFTP, aby przesłać pliki WebP bezpośrednio do folderu przesyłania, omijając w ten sposób bibliotekę multimediów.
Ze względu na wygodę możesz również zezwolić WebP w bibliotece multimediów WordPress, modyfikując plik funkcji witryny.
Hurtowa Konwersja obrazów WebP dla WordPress
Jeśli masz dojrzałą witrynę z dużą ilością obrazów do konwersji, będziesz potrzebował lepszego narzędzia, dzięki któremu możesz masowo konwertować obrazy do formatów następnej generacji.
Możesz użyć plugin taki jak Smush Pro do serwowania wersji WebP wszystkich obrazów z jej CDN. Smush pozostawia oryginalne obrazy nietknięte i dokonuje konwersji przed dostarczeniem obrazu. Oznacza to, że CDN Smush Pro nie modyfikuje bezpośrednio obrazów ani nie szkodzi im w żaden sposób. Jeśli wyłączysz opcję konwersji webp, serwer nie będzie już konwertować obrazów Na WebP, a witryna powróci do oryginalnego formatu pliku, który miał podczas przesyłania.
Smush Pro daje również możliwość konwertowania obrazów w innych folderach, aby na przykład zoptymalizować tło obrazu i ikony motywu.
Omówimy, jak skonfigurować Smush Pro CDN w dalszej części tego postu.
Możesz także użyć wiersza poleceń. Zobacz ten samouczek.
Jak obsługiwać obrazy w formatach nowej generacji
- Użyj JS, aby wykryć wsparcie dla WebP
- Użyj przeglądarki, aby zaakceptować nagłówki
- Modyfikować .plik htaccess w WP
- Serwuj z HTML5
Niektóre wtyczki do optymalizacji obrazów konwertują tylko obrazy do formatu WebP,ale nie biorą odpowiedzialności za dostarczanie odpowiedniego obrazu odwiedzającym. W tym celu może być konieczne użycie dodatkowej wtyczki lub wykonanie jednego z poniższych kroków.
Smush Pro, zajmuje się zarówno konwersją do formatu WebP w WordPress, jak i obsługą go w kompatybilnych przeglądarkach, dzięki czemu możesz pominąć te wszystkie bzdury.
1. Użyj JavaScript, aby wykryć wsparcie dla WebP
Możesz to zrobić, pisząc własny kod niestandardowy, który próbuje dekodować obraz WebP. Jeśli test się powiedzie, możesz wysłać dodatkowe obrazy WebP. Oto jeden sposób, aby to zrobić.
Możesz również użyć biblioteki JavaScript, takiej jak Modernizer, która wykrywa obsługę WebP w podobny sposób.
Testowanie rzeczywistych możliwości przeglądarek oszczędza również dodatkową pracę związaną z przepisaniem kodu, gdy niekompatybilne przeglądarki zaczną obsługiwać WebP. Na przykład, gdy Safari obsługuje obrazy WebP i przechodzi test dekodowania WebP, użytkownicy Safari otrzymają obrazy WebP bez konieczności przepisywania logiki kodu, aby uwzględnić Safari.
Przeglądarka odwiedzającego wyśle nagłówek żądania “Akceptuj”, wskazując, jakie formaty obrazów będzie akceptować z serwera www (love, Firefox).
Jeśli kiedykolwiek złożyłeś zamówienie na jedzenie z przyjacielem, zrobiłeś coś podobnego, gdy kazałeś im przynieść Ci makaron, ale nic z krewetkami, ponieważ jesteś uczulony. W tej analogii, twój przyjaciel jest serwerem, a Ty jesteś przeglądarką, która określa, co chcesz zaakceptować.
Jeśli przeglądarka wskazuje, że akceptuje obrazy WebP, serwer WWW wie, że może bezpiecznie wysyłać pliki WebP.
Jest to metoda, której używa Smush Pro CDN do wykrywania, które przeglądarki będą akceptować obrazy WebP.
3. Modyfikować dostęp hipertekstowy (.htaccess) plik w WordPress
Więc twój .plik htaccess znajduje się w katalogu głównym i jest to unikalny plik z kilku powodów:
- Zaczyna się od kropki (.) co oznacza, że jest to ukryty plik. Nie zobaczysz go, jeśli ukryte pliki nie są widoczne
- Nie ma rozszerzenia pliku
- Jeśli popełnisz błąd edytując go, twój serwer może poważnie uszkodzić, więc edytuj go tylko wtedy, gdy wiesz, co robisz!
W WordPress plik ten jest powszechnie używany do przepisywania adresów URL. W takim przypadku adres URL obrazu jest zmieniany i a .dodano rozszerzenie webp.
osiem= ” 335 ” / >to jest to, co .plik htaccess w WordPress zazwyczaj wygląda jak
Na przykład w kodzie Vincenta Orbacka na Githubie .plik htaccess został zmodyfikowany. Adresy URL obrazów JPEG i PNG są modyfikowane, jeśli w tym samym folderze znajduje się Wersja WebP i jeśli przeglądarka obsługuje WebP. Odpowiedzialność za podanie odpowiedniego obrazu w tym przypadku spada na serwer WWW Apache.
4. Obsługuj wiele rozmiarów i formatów za pomocą HTML 5
Jednym z lepszych sposobów serwowania obrazów WebP jest poleganie na przeglądarce, aby wybrać najlepszy obraz i za pomocą HTML5
Podczas gdy HTML obrazu będzie wyglądał mniej więcej tak:
Na
Zobacz jak jest zagnieżdżona w
element. W rzeczywistości,
jest wymogiem (lub obraz nie będzie renderować) i musi pojawić się jako ostatni.
Jak obsługiwać obrazy nowej generacji za pomocą Smush Pro
Jeśli jest to nad głową, istnieje łatwiejszy sposób na konwersję obrazów do WebP i serwowanie ich do kompatybilnych przeglądarek za pomocą Smush Pro.
Najpierw musisz aktywować Smush Pro CDN. W Ustawieniach Smush przejdź do sekcji CDN i wciśnij Rozpocznij guzik.
Po aktywacji CDN przewiń w dół do konwersji WebP w Ustawieniach CDN i włącz.
To jest to! Jeśli chcesz wypróbować Smush Pro bez ryzyka, Zarejestruj się na bezpłatny okres próbny.
Przejdź do optymalizacji
Bycie pionierem nie jest pozbawione wyzwań, dlatego ułatwiliśmy rozpoczęcie pracy z WebP bez całego dramatu. To tylko kwestia czasu, zanim obrazy WebP będą normą, więc równie dobrze możesz zacząć.
Nadęte obrazy są często odpowiedzialne za zmniejszenie prędkości strony. Twoi odwiedzający oczekują dużych, pięknych obrazów, które są wyraźne na ich masywnych urządzeniach do siatkówki, a także chcą, aby natychmiast się ładowały. Obrazy WebP mogą pomóc w osiągnięciu tego wysokiego poprzeczki.
Jeśli potrzebujesz pomocy w optymalizacji obrazów, sprawdź nasze inne posty na temat wyboru odpowiedniego formatu obrazu i skalowania obrazów. I zdecydowanie wypróbuj Smush Pro, Jeśli jeszcze tego nie zrobiłeś. Dodaliśmy wiele nowych funkcji, takich jak obsługa WebP, dzięki czemu możesz pozostać na bieżąco z optymalizacją obrazu.
Tagi:
