W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich nieskonwertowanych obrazów z potencjalnymi oszczędnościami w kibibajtach (KiB). Zoptymalizuj te obrazy, aby strona wczytywała się szybciej i wykorzystywała mniej danych:
Jak Lighthouse oznacza obrazy jako możliwe do zoptymalizowania
Lighthouse zbiera wszystkie obrazy JPEG lub BMP na stronie, ustawia poziom kompresji każdego obrazu na 85, a następnie porównuje wersję oryginalną z wersją skompresowaną. Jeśli potencjalne oszczędności wynoszą co najmniej 4 KiB, Lighthouse oznacza obraz jako możliwy do optymalizacji.
Jak optymalizować obrazy
Aby zoptymalizować obrazy, możesz wykonać wiele czynności, m.in.:
- Korzystanie z sieci CDN na potrzeby obrazów
- Kompresowanie obrazów
- Zastępowanie animowanych GIF-ów filmem
- Leniwe ładowanie obrazów
- Wyświetlanie obrazów elastycznych
- Wyświetlanie obrazów o prawidłowych wymiarach
- Korzystanie z obrazów WebP
Optymalizowanie obrazów za pomocą narzędzi GUI
Innym podejściem jest przepuszczenie obrazów przez optymalizator zainstalowany na komputerze i uruchamiany jako interfejs graficzny. Na przykład w przypadku ImageOptim obrazy są przeciągane i upuszczane w interfejsie, a następnie automatycznie kompresowane (bez zauważalnego pogorszenia jakości) obrazów. Ta opcja prawdopodobnie wystarczy, jeśli masz małą witrynę i możesz ręcznie optymalizować wszystkie obrazy.
Kolejna opcja to Squoosh. Squoosh jest obsługiwany przez zespół Google ds. relacji z programistami.
Wskazówki dotyczące poszczególnych zbiorów
Drupal
Sugerujemy używanie modułu, który automatycznie optymalizuje i zmniejsza rozmiary obrazów przesłanych do witryny, zachowując ich jakość. Należy też używać natywnych stylów obrazów elastycznych dostępnych w Drupal dla wszystkich obrazów renderowanych w witrynie.
Joomla
Rozważ skorzystanie z wtyczki do optymalizacji obrazów, która kompresuje obrazy, zachowując ich jakość.
Magento
Rozważ użycie rozszerzenia Magento innej firmy, które optymalizuje obrazy.
WordPress
Pomocna może być wtyczka WordPressa do optymalizacji obrazów, która kompresuje obrazy, zachowując ich jakość.