Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie niezoptymalizowane obrazy, które można zaoszczędzić na kibibajtach (KiB). Zoptymalizuj te obrazy, aby strona wczytywała się szybciej i zużywała mniej danych:
Jak Lighthouse oznacza obrazy jako możliwe do optymalizacji
Lighthouse gromadzi 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 oznaczy zdjęcie jako możliwe do optymalizacji.
Jak zoptymalizować obrazy
Aby zoptymalizować obrazy, możesz:
- Korzystanie z sieci CDN na potrzeby obrazów
- Kompresowanie obrazów
- Zastępowanie animowanych GIF-ów filmami
- Leniwe ładowanie obrazów
- Wyświetlanie elastycznych obrazów
- Wyświetlanie obrazów o prawidłowych wymiarach
- Korzystanie z obrazów WebP
Zoptymalizuj obrazy za pomocą narzędzi GUI
Możesz też użyć optymalizatora, który zainstalujesz na komputerze i uruchomi jako GUI. Na przykład ImageOptim pozwala przeciągać i upuszczać obrazy w interfejsie, a następnie automatycznie kompresować je bez zauważalnego obniżenia jakości. Jeśli masz małą witrynę i możesz ręcznie optymalizować wszystkie obrazy, ta opcja prawdopodobnie jest odpowiednia.
Squoosh to kolejna opcja. Squoosh zarządza zespół Google Web DevRel.
Wskazówki dotyczące stosu
Drupal
Rozważ użycie modułu, który automatycznie optymalizuje i zmniejsza rozmiar obrazów przesyłanych do witryny przy zachowaniu ich jakości. Upewnij się też, że we wszystkich obrazach renderowanych w witrynie używasz wbudowanych w Drupal funkcji stylów obrazów elastycznych (dostępnych w wersji 8 i nowszych).
Joomla
Możesz skorzystać z wtyczki do optymalizacji obrazów, która kompresuje obrazy, zachowując ich jakość.
Magento
Rozważ użycie rozszerzenia Magento do optymalizacji obrazów.
WordPress
Możesz użyć wtyczki do optymalizacji obrazów WordPress, która kompresuje obrazy, zachowując ich jakość.