Wyświetlanie obrazów w formatach nowej generacji WebP
Optymalizacja obrazów na stronie internetowej jest kluczowa do osiągniecia dobrych wyników wydajnościowych. Jeżeli twoja strona korzysta z WordPress`a i na testach PageSpeed otrzymałeś ten komunikat to ten artykuł jest dla Ciebie.
Wytłumaczę Ci w nim w jaki sposób możesz serwować użytkownikom Twojej witryny grafiki w formacie WebP w taki sposób, aby starsze wersje przeglądarek, które nie obsługują formatu WebP nie miały problemu z wyświetleniem Twoich zdjęć.
Formaty nowej generacji
Formatami nowej generacji są AVIF i WebP. Są to formaty obrazów, które mają lepsze parametry kompresji i jakości w porównaniu ze starszymi odpowiednikami JPEG i PNG.
AVIF
Format AVIF pojawił się dość niedawno przez co nie jest jeszcze wspierany przez wszystkie przeglądarki. Ten nowoczesny format jest oparty o AV1. Posiada lepszą kompresje niż WebP i w niedalekiej przyszłości możliwe jest, że zastąpi inne formaty. Aktualnie AVIF konkuruje z JPEG XL, który ma podobną jakość kompresji i jest ogólnie postrzegany jako bogatszy w funkcje niż AVIF.
WebP
Format WebP został poraz pierwszy zaprezentowany w 2010 roku. Jest wspierany przez wszystkie nowsze przeglądarki. Zapewnia bardzo dobrą kompresję stratną i bezstratną obrazów w Internecie. Jest oparty o VP8. W niedalekiej przyszłości możliwe, że zostanie zastąpiony przez AVIF i JPEG XL. Na ten moment dobrze jest stosować ten format ze względu na lepszą kompatybilność z przeglądarkami niż AVIF.
Kompatybilność z przeglądarkami
Tutaj możesz sprawdzić z jakimi przeglądarkami aktualnie kompatybilne są dane formaty:
Ciekawostka
Co ciekawe narzędzia do testowania wydajności witryn oparte o Lighthouse biorą obraz BMP, JPEG i PNG na stronie, następnie konwertują go do WebP i szacują rozmiar w formacie AVIF. W ten sposób zgłaszają ewentualne oszczędności jakie można uzyskać wykorzystując inne formaty obrazów.
Ceny za stronę internetową zaczynają się już od 499 złotych!
Skorzystaj z darmowej wyceny strony www. W ciągu 48 godzin skontaktuję się z Tobą i przedstawię Ci moją ofertę.
Zalety formatów nowej generacji – WebP
- format ten zajmuję mało miejsca oferując zarówno dobrą jakość zdjęć
- format pozwala na zapis grafik animowanych
- format obsługuję przezroczystość podobnie jak PNG
- format potrafi kodować obrazy w trybie statycznym i bezstratnym
Wady formatów nowej generacji – WebP
- brak wsparcia przez starsze wersje przeglądarek
Jak obsługiwać format WebP
W wyświetlaniu obrazów w formatach nowej generacji dobrze się sprawdza wtyczka WebP Converter for Media. Przekonwertuje zarówno wszystkie obrazy na stronie do nowego formatu jak i później dodawane do biblioteki multimediów.
Instalacja i aktywacja wtyczki
- Zainstaluj wtyczkę
Wejdź do kokpitu na swojej stronie WordPress > Wtyczki > Dodaj nową > WebP Converter for Media - Aktywuj wtyczkę
- Aktywuj wtyczkę
Wtyczki > WebP Converter for Media > Aktywuj
Konfiguracja wtyczki
- Przejdź do ustawień wtyczki
Ustawienia > WebP Converter
- Zaznacz rekomendowane ustawienia
Image Loading Mode:
Via .htaccess – jeżeli korzystasz z serwera Apache
Pass Thru – jeżeli korzystasz z serwera Nginx
- Zapisz zmiany
- Przekonwertuj wszystkie zdjęcia i grafiki
Zaznacz force all images again > Kliknij Regenerate All
- Sprawdź czy zdjęcia na stronie ładują się poprawnie
Potrzebujesz pomocy z optymalizacja witryny?
To wszystko
Jeżeli udało ci się zainstalować i skonfigurować wtyczkę to bardzo się cieszę. Możesz teraz sprawdzić w jaki sposób następujące zmiany wpłynęły na wydajność twojej witryny za pomocą bezpłatnego narzędzia PageSpeed.
Optymalizacja strony internetowej jest to wieloetapowy proces. Jeżeli twoja strona mimo starań nadal działa wolno to zachęcam do zainteresowania się innymi poradami na moim blogu.
