Ulepsz dostarczanie obrazów

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

Statystyka ta wskazuje obrazy, które mają niepotrzebnie duże rozmiary 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.

Statystyki Narzędzi deweloperskich dotyczące ulepszania dostarczania obrazów.

Jak skrócić czas pobierania obrazów

Ten trend zaleca kilka strategii, które mogą skrócić czas pobierania obrazu w zależności od jego wyświetlanego rozmiaru i formatu pliku. 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ść w porównaniu ze starszymi formatami 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 o 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 lub WebM (animacje) albo plików PNG lub 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, powoduje tylko marnowanie bajtów i spowalnia wczytywanie strony.

Jedną ze strategii jest używanie formatów obrazów wektorowych, takich jak SVG. Obraz SVG można skalować do dowolnego rozmiaru za pomocą skończonej 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 widocznego obszaru 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

Zawiera też wskazówki dotyczące konkretnych stosów technologii w przypadku stron korzystających z tych technologii:

AMP

  • Sugerujemy wyświetlanie wszystkich komponentów amp-img w formatach WebP i podanie odpowiednich zasobów zastępczych dla innych przeglądarek.
  • W przypadku treści animowanych stosuj atrybut amp-anim, aby 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 automatycznie konwertuje 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ść.

Zasoby