WebP czyli optymalizacja zdjęć

Dzięki pracy zespołu deweloperów z Google, w 2010 r. zaprezentowano nowy format dla zdjęć, czyli WebP, który charakteryzuje się niezwykle wydajnym stopniem kompresji (stratnej oraz bezstratnej). Oznacza to w praktyce, że możemy otrzymać plik ważący dużo mniej niż standardowy jpg lub png przy braku zauważalnych różnic w jakości zdjęcia. Nic więc dziwnego, że Google wprowadził ten format jako preferowany dla grafik wykorzystywanych na stronach internetowych. W końcu każdy kB danych oszczędzony przy otwieraniu strony, to także zaoszczędzone ułamki sekund, które są istotne ze względu na retencję użytkowników.

Oszczędności są naprawdę spore. W niektórych przypadkach dochodzą nawet do 85%. Dorzucając do tego „zachęcanie” ze strony Google w celu lepszego pozycjonowania strony, użycie tego rozwiązania wydaje się rozsądne.

Jak wypada WebP na tle innych formatów?

Jeśli Twoja przeglądarka obsługuje WebP, obrazki tutaj zamieszczone oglądasz właśnie w tym formacie. Dlatego więc jeśli także chcesz zacząć korzystać z tego dobrodziejstwa, zapraszam do dalszej części artykułu.

Jak utworzyć grafikę w WebP?

Metod jest kilka. Zacznijmy od tego, że sporo programów graficznych oferuje już eksport grafik w tym formacie, np. Pixelmator oraz GIMP, a także Photoshop poprzez użycie odpowiedniego plug-in’u.

Jeśli jednak korzystasz z programu który nie wspiera tego formatu, z łatwością możesz skonwertować grafikę zapisaną np. w png do WebP. W tym celu zainstaluj na początek pakiet webp za pomocą homebrew:

brew install webp

Po zainstalowaniu pakietu będzie on dostępny z poziomu terminala pod poleceniem cwebp. Aby skonwertować obrazek można użyć np. polecenia:

cwebp -q 50 -lossless picture.png -o picture.webp

Jak podglądnąć grafikę WebP?

Grafikę w formacie WebP można podglądnąć np. za pomocą przeglądarki Chrome, za pomocą drag-and-drop. Aby jednak usprawnić pracę z plikami, warto zainstalować rozszerzenie dla QuickLook które dodaje w nim obsługę WebP. Rozszerzenie dostępne jest tutaj.

Instalacja rozszerzenia

Rozszerzenie należy zainstalować przy użyciu Homebrew:

brew install WebPQuickLook

Akceptacja aplikacji

Jeśli używasz systemu w wersji Catalina lub nowszy, w momencie gdy otworzysz okno Findera lub spróbujesz otworzyć QuickLook, pojawi się komunikat o bezpieczeństwie (aplikacja nie jest podpisana certyfikatem). Należy wtedy otworzyć Preferencje Systemowe, zakładka Ochrona i prywatność, a następnie kliknąć w „Zezwól” obok informacji o nowo zainstalowanej wtyczce. Jeśli masz obawy co do bezpieczeństwa, kod dostępny jest publicznie na Github – wygląda w porządku.

Restart managera QuickLook

W kolejnym kroku wykonaj poniższą komendę w celu zrestartowania managera QuickLook:

qlmanage -r

Restart Finder

Następnie należy zrestartować Finder poprzez kliknięcie PPM na ikonę Finder w Dock’u z wciśniętym Option ⌥, a następnie wybranie „Uruchom ponownie”. Alternatywnie można zrestartować system.

Test

Po wykonaniu powyższych kroków, pogląd QuickLook powinien już działać. Jeśli pojawi się dodatkowe okno dialogowe z pytaniem o Otwarcie WebPQuickLook, należy wybrać „Otwórz”. W przypadku gdyby nadal występowały problemy, należy powtórzyć krok Restart Managera QuickLook oraz Restart Finder. W razie dalszych problemów, można skorzystać z podpowiedzi zawartych tutaj lub zostawić pytanie w komentarzu.

Automatyzacja konwertowania

Jeśli w swojej pracy często wykorzystujesz konwersję obrazów, warto utworzyć skrypt który zautomatyzuje tę pracę za Ciebie. Ja skorzystałem z dobrodziejstwa aplikacji Automator, w której utworzyłem „Szybką czynność”, która jest zapisywana następnie jako usługa możliwa do uruchomienia na zdjęciach. Gotowy skrypt zamieściłem w repozytorium na moim GitHub.

Alternatywnie możesz utworzyć własny skrypt w aplikacji Automator wg szczegółów zamieszczonych na poniższej grafice:

Obrazki WebP na WordPress

Jeśli używasz WordPress jako CMS dla swojej strony, polecam wtyczkę WebP Converter for Media, dzięki której grafikę na stronę wrzucamy w klasycznym formacie (jpg lub png), a wtyczka przy wykorzystaniu lokalnej maszyny przekonwrertuje obrazek do formatu WebP, zachowując także oryginalne zdjęcie. Ponadto wtyczka rozpozna czy przeglądarka użytkownika obsługuje format WebP i w zależności od tego zwróci odpowiednie zdjęcie. Co więcej, pomimo zwracania różnych zdjęć, ścieżka do zdjęcia będzie zachowana ta sama, dzięki czemu strona będzie zawsze działać poprawnie. Należy o tym pamiętać w przypadku testów strony po instalacji wtyczki. Zdjęcie nadal będzie w nazwie miało „starą końcówkę”, np. image.jpg, jednak zawartość będzie już w nowym formacie WebP.

Czy jest lepiej?

Te kilka sposobów pozwoli na wydajniejszą kompresję obrazów na Twojej stronie. Warto porównać wyniki za pomocą narzędzia PageSpeed od Google jakie były wyniki przed i po zastosowaniu zmian. Pochwalcie się swoimi osiągnięciami w komentarzach.