Kompletny przewodnik po korzystaniu z formatu obrazu WebP

WebP lub nieoficjalnie wymawiane jako weppy, to format obrazu wprowadzony przez Google Developers około 5 lat temu. jeśli jesteś projektantem stron internetowych lub programistą, który stara się zredukować i zoptymalizować rozmiar pliku obrazu, to co WebP jest w stanie wywołać uśmiech na twarzy.

W skrócie, oto kilka ważnych rzeczy, które musisz wiedzieć o tym niezbyt nowym, ale wciąż fajnym formacie obrazu:

• WebP przechodzi przez rozszerzenie pliku .webp.
• WebP wykorzystuje zarówno stratną, jak i bezstratną kompresję.
• Obrazy stratne WebP są potencjalnie 25-34% mniejsze niż JPEG.
• Bezstratne obrazy WebP są potencjalnie 25% mniejsze w porównaniu z PNG.
• WebP obsługuje bezstratną przezroczystość, tj. PNG z kanałem alfa.
• WebP obsługuje animację. tj. animowane pliki GIF.

W skrócie, WebP jest w stanie znacznie zmniejszyć rozmiar plików graficznych JPEG, GIF i PNG. Oto odświeżacz na WebP, który powinieneś sprawdzić, zanim przejdziemy do zabawnych rzeczy.

Eksperyment

Najlepsze w roszczeniach w sieci jest to, że zawsze możemy przeprowadzać eksperymenty, aby sprawdzić prawdziwość i autentyczność. Oto kilka eksperymentów, które zrobiłem, aby się dowiedzieć jak mały może potencjalnie uzyskać obraz po przekonwertowaniu z różnych formatów obrazu (JPEG, PNG i GIF) na WebP.

1. JPEG - Lossy Image

Oto losowy obraz JPEG, który pobrałem z Pexels. Oryginalny rozmiar pliku - 165kb. ↓

Obraz jest zoptymalizowany za pomocą JpegMini. Nowy rozmiar pliku - 101kb. ↓

Wreszcie ten sam obraz jest konwertowany na format WebP. Ostateczny rozmiar pliku - 70kb. ↓

Na marginesie: Oto różne pliki, jeśli ten sam obraz został przekonwertowany na następujące formaty:

• GIF - 285kb
• PNG 8 - 241,2 kb
• PNG 24 - 657,6 kb

2. PNG - Lossless Image

Teraz spróbujmy z PNG z przezroczystością. (Źródło). Oryginalny rozmiar pliku - 587kb. ↓

Oto obraz zoptymalizowany za pomocą tinypng. Nowy rozmiar pliku - 278kb. ↓

I wreszcie obraz przekonwertowany do formatu WebP. Ostateczny rozmiar pliku - 112kb. ↓

3. Animowany GIF

Po konwersji na WebP, obraz JPEG zmienił się ze 165 kb na 70 kb, podczas gdy obraz PNG przeszedł z 587 kb na 112 kb.

Zobaczmy, jak taryfy animowane GIF:

• Oryginalny rozmiar pliku - 6,8 MB
• Rozmiar plików WebP - 6,3 MB

Streszczenie:

Oto tabela podsumowująca cały eksperyment:

	Lossy (JPG)	Lossless (PNG)	Animowany gif
Oryginalny	165kb	587kb	6,8 mb
Zoptymalizowany za pomocą narzędzi	101kb	278kb	-
Format WebP	70kb	112kb	6,3 mb

Bez większego zastanawiania się nad obliczeniami matematycznymi, liczby te wskazują na znaczne zmniejszenie rozmiaru plików, a sądząc po obrazach, nie można naprawdę odróżnić jasności i rozdzielczości. Mniejsze, lżejsze rozmiary plików z tym samym poziomem jakości obrazu, na pewno warto zajrzeć do WebP.

Konwersja do WebP z narzędziami

Jeśli jesteś już na pokładzie i chcesz rozpocząć wydawanie obrazów w formacie WebP, zanurzmy się i spójrzmy, jak łatwo przekonwertować obrazy do tego formatu. Wszystkie wymienione poniżej metody różnią się pod względem kontroli, łatwości użycia i wygody. Wybierz swoją truciznę.

WebPonize dla Prochowiec

WebPonize to prawdopodobnie najprostszy i najszybszy sposób na konwersję obrazów do formatu WebP na komputerze Mac. Wszystko, co musisz zrobić, to przeciągnąć i upuścić swoje obrazy do WebPonize, a to zrobi konwersję. Otrzymasz ouput, rozmiar przed, rozmiar po i% redukcji oryginalnego pliku. [Pobierz WebPonize]

Webpconv dla Windows

Jeśli używasz Windows, Webpconv to aplikacja, którą powinieneś zainstalować. Jest również dostępny w wersji przenośnej, dzięki czemu można go uruchomić niezależnie na dysku flash. [Pobierz Webconv]

Konwersja za pomocą linii poleceń

Jeśli czujesz się dziwnie, prawdopodobnie chcesz przerobić konwersję za pomocą linii poleceń. cwebp konwertuje obrazy JPEG, PNG lub TIFF do formatu WebP i dwebp konwertuje je z powrotem do formatu PNG. Zobaczmy, jak to działa.

Uwaga: Poniższy przewodnik dotyczy systemu Mac OS X. Kliknij tutaj, aby uzyskać dostęp do użytkowników systemów Windows i Linux.

Konfigurowanie MacPorts na Mac OSX

Najpierw upewnij się, że masz zainstalowany Xcode, a następnie wykonaj następujące kroki:

1. Pobierz i zainstaluj MacPorts. Jeśli masz już zainstalowane MacPorts na swoim Macu, przejdź do kroku 2.
2. Uruchomić Terminal.
3. Rodzaj "sudo port selfupdate„i naciśnij Enter. Spowoduje to aktualizację MacPorts do najnowszej wersji.

   

4. Następnie wpisz „sudo port install webp„i naciśnij Enter. To się zainstaluje libwebp (WebP Library).

   

to jest to! Teraz spójrzmy na jak konwertować obrazy do WebP za pomocą linii poleceń.

Polecenia do konwersji / przywrócenia

Oto polecenia do:

I - Konwertuj pliki obrazów JPEG / PNG na format WebP

Format: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Przykład:

cwebp -q 80 example.png -o example.webp 

II - Ukryte pliki obrazów WebP z powrotem do PNG

Format: dwebp [WebP_filename] -o [PNG_filename]

Przykład:

dwebp image.webp -o image.png 

Więcej: Jeśli zmienisz konwersję za pomocą innych środków, oto instrukcje używania zadań Grunt i Gulp do konwersji plików JPG / PNG na WebP.

Konwertuj za pomocą narzędzi online

Jeśli nie chcesz instalować żadnych aplikacji w systemie operacyjnym w celu wykonania tego zadania, zamiast tego wybierz narzędzia online. Oto kilka, które poznałem:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Wskazówka: Jeśli google konwertuj webp online , prawdopodobnie znajdziesz więcej opcji.

Wtyczka Photoshop

Być może ucieszy Cię wiadomość, że dostępna jest również wtyczka Photoshop, która umożliwia zapisywanie obrazów w formacie WebP za pomocą programu Photoshop. Ta wtyczka obsługuje Mac OS X (CS 2- CS 6) i Windows (32-bitowy i 64-bitowy). [Pobierz wtyczkę tutaj.]

Uwaga: Pomyślałem, że powinieneś wiedzieć, że wypróbowałem go w Photoshopie CC. Nie działa tam.

Obsługa przeglądarki WebP

Na koniec porozmawiajmy o kompatybilności. Obecnie możesz wyświetlać obrazy w formacie WebP w następujących przeglądarkach (ref):

• Chrome / Chrome na iOS
• Opera / Opera Mini

Nie za dużo szczęścia FireFox i Safari, które nadal nie obsługują natywnie formatu WebP. Można jednak użyć biblioteki JavaScript WebPJS do konwertuj obrazy WebP na ciąg danych dataURI na stronie klienta.

Wróć do innych formatów obrazu

Zawsze warto skorzystać z funkcji powrotu, aby uniknąć wyświetlania błędów obrazu z powodu nieobsługiwanych przeglądarek. W tym przypadku powróci do obrazu w formacie JPG lub PNG. Oto jak to robisz.

  source srcset = "example.webp 1x" type = "image / webp">   

Dla tego kodu, images / complete-guide-to-using-webp-image-format_13.jpg zostanie załadowany, jeśli użytkownik użyje przeglądarki Firefox lub Safari.

Podgląd obrazów WebP

Możesz przeglądać obrazy WebP w przeglądarkach Chrome i Opera. Ale jeśli chcesz to zrobić lokalnie na swoim komputerze, potrzebujesz kilku narzędzi.

Użytkownicy komputerów Mac mogą używać WebPQuickLook do podglądu obrazów w formacie WebP za pomocą funkcji Quick Look (z zaznaczonym lub podświetlonym obrazem, naciśnij spację).

Dla użytkowników Windows, WebPCodec wyświetli podgląd miniatur obrazów WebP w Eksploratorze plików. Zostaną wyświetlone zarówno odpowiedniki WebP, jak i JPEG. W niektórych obsługiwanych systemach operacyjnych Windows (Vista, 7, 8) obraz WebP może być również wyświetlany w przeglądarce zdjęć systemu Windows.

Więcej: ReSCR.it automatycznie dostarcza obrazy w formacie WeBP i jest dostępny, jeśli przechowujesz swoje obrazy w MaxCDN. (Czytaj więcej)

Dalsze odniesienia

• Konwersja animowanego GIF na WebP
• Jak działa WebP
• Wdrażanie WebP przez Accept Content Negotiation
• Szybsza, mniejsza i piękniejsza sieć dzięki WebP
• Wdrażanie nowych formatów obrazów w Internecie
• Dokumentacja API WebP