Data publikacji: 8 października 2025 r.
Skrócenie czasu pobierania obrazów może poprawić postrzegany czas wczytywania strony i LCP.
Jakie są przyczyny niepowodzenia
Statystyki będą wyróżniać obrazy o niepotrzebnie dużych rozmiarach pobierania. Szacowane oszczędności w bajtach są obliczane przez porównanie rozmiaru pobierania obrazu z wydajnym stosunkiem bajtów do pikseli w przypadku danego formatu obrazu.
Jak skrócić czas pobierania obrazów
W zależności od wyświetlanego rozmiaru i formatu pliku obrazu ten trend zaleca kilka strategii, które mogą skrócić czas pobierania obrazu. Wdrożenie sieci CDN do obsługi obrazów może być niezwykle pomocne w przypadku wszystkich tych strategii.
Zwiększ współczynnik kompresji obrazu
Większość formatów obrazów obsługuje poziom kompresji, który można dostosować, aby zmniejszyć rozmiar pliku obrazu kosztem jakości obrazu. Aby zoptymalizować współczynnik kompresji obrazu, możesz użyć narzędzi do obsługi obrazów, takich jak ImageOptim, Squoosh i Imagemin.
Używanie nowoczesnych formatów obrazu
AVIF i WebP to formaty plików graficznych, które mają lepszą kompresję i jakość niż starsze formaty JPEG i PNG. Kodowanie obrazów w tych nowszych formatach to dobra strategia zmniejszania rozmiaru pobieranych obrazów.
Format AVIF jest obsługiwany w najnowszych wersjach wszystkich popularnych przeglądarek i oferuje mniejsze rozmiary plików w porównaniu z innymi formatami przy tych samych ustawieniach jakości. Więcej informacji o formacie AVIF znajdziesz w samouczku dotyczącym wyświetlania obrazów AVIF.
Format WebP jest obsługiwany przez wszystkie główne przeglądarki i zapewnia lepszą stratną i bezstratną kompresję obrazów w internecie. Więcej informacji o WebP znajdziesz w artykule Używanie obrazów WebP.
Używanie formatów wideo w przypadku treści animowanych
Duże pliki GIF są nieefektywnym sposobem dostarczania animacji w porównaniu z filmami. Proponujemy użyć zamiast nich filmów MPEG4/WebM (animacje) lub plików PNG/WebP (obrazy statyczne), aby zmniejszyć ilość przesyłanych danych.
Więcej informacji o zastępowaniu obrazów GIF filmami znajdziesz w artykule Zastępowanie animowanych GIF-ów filmami w celu przyspieszenia wczytywania stron.
Wyświetlanie obrazów o elastycznych rozmiarach
Najlepiej, aby strona nigdy nie wyświetlała obrazów większych niż wersja renderowana na ekranie użytkownika. Wszystko, co jest większe, to tylko zmarnowane bajty, które spowalniają wczytywanie strony.
Jedną ze strategii jest używanie formatów obrazów wektorowych, takich jak SVG. Obraz SVG może być skalowany do dowolnego rozmiaru przy użyciu ograniczonej ilości kodu. Więcej informacji znajdziesz w artykule Zastępowanie złożonych ikon plikami SVG.
Jeśli obrazy wektorowe nie są dostępne, najlepiej wyświetlać obrazy „elastyczne”. W przypadku obrazów elastycznych generujesz wiele wersji każdego obrazu, a następnie określasz, której wersji użyć w kodzie HTML lub CSS, korzystając z zapytań o media, wymiarów obszaru wyświetlania itp.
Na przykład element <img> ma atrybuty srcset i sizes, które mogą określać adresy URL obrazów o różnych rozmiarach:
Jeśli chcesz całkowicie zmienić obraz, możesz użyć elementu <picture>:
Więcej informacji znajdziesz w sekcjach Obrazy elastyczne i Element picture.
Wskazówki dotyczące konkretnych stosów
Ta informacja zawiera też wskazówki dotyczące stron korzystających z tych technologii:
AMP
- Sugerujemy wyświetlanie wszystkich komponentów
amp-imgw formatach WebP i podanie odpowiednich zasobów zastępczych dla innych przeglądarek. - W przypadku treści animowanych stosuj atrybut
amp-anim, by zminimalizować wykorzystanie procesora, gdy te treści znajdują się poza ekranem.
Drupal
- Sugerujemy używanie modułu, który automatycznie optymalizuje i zmniejsza pliki graficzne przesłane do witryny, zachowując ich jakość.
- Używaj wbudowanych stylów obrazów elastycznych dostępnych w Drupalu dla wszystkich obrazów renderowanych w witrynie.
Joomla
Możesz skorzystać z wtyczki lub usługi, która będzie automatycznie konwertować przesłane obrazy do optymalnych formatów.
Magento
Możesz użyć 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ść.