Wyświetlaj obrazy w nowoczesnych formatach

Sekcja Możliwości w raporcie Lighthouse zawiera listę wszystkich obrazów w starszych formatach, co pokazuje potencjalne oszczędności wynikające z wyświetlania wersji AVIF:

Zrzut ekranu przedstawiający kontrolę obrazów wyświetlanych przez Lighthouse w nowoczesnych formatach

Po co wyświetlać obrazy w formacie AVIF lub WebP?

AVIF i WebP to formaty obrazów o większej kompresji i jakości w porównaniu ze starszymi odpowiednikami JPEG i PNG. Kodowanie zdjęć w tych formatach zamiast JPEG lub PNG oznacza, że będą się one szybciej ładować i zużywać mniej komórkowej transmisji danych.

Format AVIF jest obsługiwany w przeglądarkach Chrome, Firefox i Opera i zapewnia mniejsze rozmiary plików w porównaniu z innymi formatami o takich samych ustawieniach jakości. Więcej informacji na temat formatu AVIF znajdziesz w artykule Udostępnianie obrazów w formacie AVIF.

WebP jest obsługiwany w najnowszych wersjach przeglądarek Chrome, Firefox, Safari, Edge i Opera oraz zapewnia lepszą stratną i bezstratną kompresję obrazów w internecie. Więcej informacji na temat WebP znajdziesz w artykule Nowy format graficzny w internecie.

Jak Lighthouse oblicza potencjalne oszczędności

Lighthouse gromadzi wszystkie obrazy w formacie BMP, JPEG i PNG na stronie, konwertuje je do formatu WebP i oszacowuje rozmiar pliku AVIF, raportując potencjalne oszczędności na podstawie liczby konwersji.

Zgodność z przeglądarką

WebP jest obsługiwany przez najnowsze wersje przeglądarek Chrome, Firefox, Safari, Edge i Opera, natomiast obsługa formatu AVIF jest ograniczona. Musisz przesłać zastępczy obraz PNG lub JPEG na potrzeby obsługi starszych przeglądarek. W artykule Jak mogę wykryć obsługę WebP w przeglądarce? znajdziesz omówienie technik zastępczych, a poniższa lista obsługi formatów obrazów w przeglądarkach.

Aby sprawdzić, jakie formaty są obecnie obsługiwane przez przeglądarki, zapoznaj się z poniższymi artykułami:

Wskazówki dotyczące stosu

AMP

Rozważ wyświetlenie wszystkich komponentów amp-img w formatach WebP oraz określenie odpowiedniej wartości zastępczej dla innych przeglądarek.

Drupal

Rozważ zainstalowanie i skonfigurowanie w swojej witrynie modułu, który będzie wykorzystywać formaty obrazów WebP. Takie moduły automatycznie generują wersję WebP przesłanych obrazów, aby zoptymalizować czas wczytywania.

Joomla

Możesz skorzystać z plugin lub usługi, która będzie automatycznie konwertować przesłane obrazy do optymalnych formatów.

Magento

Rozważ wyszukanie w Magento Marketplace rozszerzeń innych firm umożliwiających korzystanie z nowszych formatów graficznych.

iPhone

Pamiętaj, że pliki webp, avif i webm nie będą działać na iPhone'ach z systemem iOS 16.

WordPress

Możesz skorzystać z plugin lub usługi, która będzie automatycznie konwertować przesłane obrazy do optymalnych formatów.

Zasoby