Pojedynczy niezoptymalizowany obraz hero może ważyć więcej niż cały HTML, CSS i JavaScript strony razem. Obrazy stanowią mniej więcej 50% całkowitej wagi bajtowej przeciętnej strony internetowej, co czyni je największą dźwignią poprawy wydajności. Mimo to optymalizacja obrazów pozostaje jednym z najbardziej niezrozumianych aspektów tworzenia stron i treści.
Wpływ wykracza daleko poza szybkość ładowania. Rozmiar obrazów wpływa na pozycje w wyszukiwarkach, rachunek za hosting, plany danych użytkowników, a nawet współczynniki konwersji.
Połączenie z wydajnością: Core Web Vitals i LCP
Core Web Vitals Google to zestaw metryk, które bezpośrednio wpływają na pozycje w wyszukiwarkach. Wśród nich Largest Contentful Paint (LCP) mierzy, jak długo zajmuje wyrenderowanie największego widocznego elementu na ekranie. W większości przypadków tym elementem jest obraz.
Google uznaje LCP poniżej 2,5 sekundy za „dobry". Między 2,5 a 4 sekundami to „wymaga poprawy". Powyżej 4 sekund to „słaby". Obraz hero o rozmiarze 3 MB na standardowym połączeniu może łatwo przekroczyć próg 4 sekund, ciągnąc całą stronę do kategorii „słaby".
Konsekwencje są namacalne:
- Spadek pozycji SEO — Core Web Vitals to sygnał rankingowy; wolne strony tracą pozycje
- Wyższy współczynnik odrzuceń — 53% mobilnych odwiedzających opuszcza stronę, jeśli ładuje się dłużej niż 3 sekundy
- Niższe konwersje — każda dodatkowa sekunda ładowania zmniejsza konwersje o około 7%
Zasada 100 KB Dla obrazów treściowych na stronie internetowej celuj w poniżej 100 KB na obraz. Dla obrazów hero na pełną szerokość nie przekraczaj 200 KB. Te cele są osiągalne przy nowoczesnych formatach i odpowiedniej kompresji bez widocznej utraty jakości.
Stratna vs. bezstratna: zrozumienie kompromisu
Cała kompresja obrazów dzieli się na dwie kategorie, a wybór niewłaściwej jest częstą przyczyną rozdętych plików.
Kompresja bezstratna zmniejsza rozmiar pliku, znajdując wydajniejsze sposoby kodowania tych samych danych. Każdy piksel jest zachowany dokładnie. Redukcja jest umiarkowana — zazwyczaj 10-30%. PNG używa kompresji bezstratnej.
Kompresja stratna odrzuca informacje, których ludzkie oko raczej nie zauważy. Precyzja kolorów w gradientach, drobne szczegóły tekstur i subtelne różnice tonalne są upraszczane. Redukcja jest dramatyczna — zazwyczaj 70-90%. JPEG i WebP (w trybie stratnym) używają tego podejścia.
Kluczowe spostrzeżenie: kompresja stratna na jakości 80-85% jest wizualnie nieodróżnialna od oryginału dla fotografii. Perceptualna różnica jest w zasadzie zerowa, ale różnica w rozmiarze pliku jest ogromna.
| Podejście | Redukcja rozmiaru | Utrata jakości | Najlepsze dla |
|---|---|---|---|
| Bezstratna (PNG) | 10-30% | Brak | Logo, zrzuty ekranu, grafiki z dużą ilością tekstu |
| Stratna 85% (JPEG/WebP) | 70-85% | Niezauważalna | Zdjęcia, ilustracje, tła |
| Stratna 60% (JPEG/WebP) | 85-95% | Zauważalna przy zbliżeniu | Miniatury, obrazy dekoracyjne |
Błąd, który popełnia wiele osób, to używanie kompresji bezstratnej dla treści fotograficznych lub kompresji stratnej o zbyt niskiej jakości dla ważnych elementów wizualnych.
Format ma znaczenie: ten sam obraz, drastycznie różne rozmiary
Wybór formatu obrazu ma taki sam wpływ jak poziom kompresji. Zdjęcie zapisane jako PNG może być 5 do 10 razy większe niż ten sam obraz zapisany jako JPEG przy jakości 85%, bez zauważalnej różnicy.
JPEG pozostaje uniwersalnym standardem dla fotografii. Jest obsługiwany wszędzie i oferuje doskonałą kompresję stratną dla treści fotograficznych.
WebP oferuje o 25-35% mniejsze pliki niż JPEG przy równoważnej jakości wizualnej, z dodatkową zaletą obsługi przezroczystości. Wszystkie nowoczesne przeglądarki go obsługują. To najlepszy format ogólnego przeznaczenia dla sieci dzisiaj.
AVIF to najnowszy kandydat, oferujący jeszcze lepszą kompresję niż WebP (około 20% mniej), ale wsparcie przeglądarek i szybkość kodowania nadal nadrabiają zaległości.
PNG jest właściwym wyborem tylko dla obrazów wymagających dokładnej reprodukcji pikseli — logo, ikony, zrzuty ekranu z tekstem lub obrazy wymagające przezroczystości, gdy WebP nie jest opcją.
Przepustowość i pamięć: ukryte koszty
Dla osobistych blogów i małych stron koszty przepustowości mogą wydawać się znikome. Ale skalują się szybko:
- Strona z 2 MB obrazów, przeglądana 10 000 razy miesięcznie, przesyła 20 GB danych obrazowych miesięcznie
- Zoptymalizuj te obrazy do 400 KB łącznie, a przesyłasz 4 GB — redukcja o 80%
- Dla stron na hostingu z pomiarem bezpośrednio przekłada się to na niższe rachunki
Pamięć też się sumuje. Sklep internetowy z 5000 produktów, każdy z 4 niezoptymalizowanymi obrazami po 2 MB, używa 40 GB samych zdjęć produktów. Zoptymalizowane do 200 KB każdy, spada to do 4 GB.
Obrazy responsywne i problem urządzeń
Obraz o szerokości 1920 pikseli wyświetlany na ekranie telefonu o szerokości 375 pikseli marnuje ponad 96% swoich pikseli. Przeglądarka pobiera pełny obraz, a potem odrzuca większość danych, żeby zmieścić go na ekranie.
Rozwiązaniem są obrazy responsywne — serwowanie różnych rozmiarów obrazów różnym urządzeniom. Odwiedzający z telefonu otrzymuje obraz o szerokości 400px; odwiedzający z komputera otrzymuje wersję o szerokości 1200px.
Leniwe ładowanie: nie pobieraj tego, co nie jest widoczne
Obrazy poniżej złamania strony — te niewidoczne bez przewijania — nie muszą się ładować natychmiast. Leniwe ładowanie opóźnia ich pobieranie do momentu, gdy użytkownik przewinie w ich pobliże. Nowoczesne przeglądarki obsługują natywne leniwe ładowanie za pomocą jednego atrybutu HTML.
CDN-y: serwowanie obrazów z krawędzi
Content Delivery Network przechowuje kopie twoich obrazów na serwerach rozproszonych po całym świecie. Odwiedzający w Tokio otrzymuje obrazy z pobliskiego serwera zamiast twojego serwera źródłowego w Paryżu. To zmniejsza opóźnienia, poprawia czasy ładowania i obniża obciążenie twojej infrastruktury.
Wiele nowoczesnych CDN-ów oferuje również transformację obrazów w locie — automatyczną konwersję do WebP, zmianę rozmiaru dla różnych urządzeń i stosowanie optymalnej kompresji bez dotykania oryginalnych plików.
Dowiedz się więcej
Optymalizacja obrazów to temat, w którym małe usprawnienia kumulują się w znaczące rezultaty. Jeśli chcesz poeksperymentować z poziomami kompresji i zobaczyć kompromis jakość-rozmiar w czasie rzeczywistym, toolk.io oferuje Kompresor obrazów, który przetwarza wszystko w twojej przeglądarce. Na stronie dostępne są również tutoriale dotyczące kompresji obrazów i konwersji między formatami.