Optymalizacja obrazów strony firmowej — jak WebP i AVIF skracają czas ładowania

Najczęstsza przyczyna wolno ładującej się strony firmowej to nie brak dobrego hostingu, nie skomplikowany kod i nie zły projekt. To zdjęcia. Plik JPEG prosto z aparatu lub telefonu potrafi ważyć 4–8 MB. Strona z kilkoma takimi plikami waży tyle co pokaźna aplikacja — i ładuje się odpowiednio długo. Czytelnik, który trafił z Google, zamknie okno zanim przeczyta pierwszą linijkę.

Problem jest bardziej powszechny niż się wydaje. Wiele stron MŚP ma zdjęcia wgrane bezpośrednio z aparatu — bez żadnej konwersji, bez zmiany rozdzielczości. Zdjęcie bohatera strony ważące kilka megabajtów, kilka kolejnych zdjęć w sekcji „o nas”, galeria produktów czy usług — i czas ładowania na telefonie idzie w górę, a wyniki Google PageSpeed Insights w dół.

Dostępne dziś nowoczesne formaty — WebP i AVIF — rozwiązują ten problem bez utraty widocznej jakości. W tym artykule pokazujemy konkretnie: jak duże są różnice w rozmiarze pliku między formatami, co możesz zmienić samodzielnie bez jednej linijki kodu i co nowoczesny framework strony (jak Astro) robi za Ciebie automatycznie.

Dlaczego obrazy spowalniają stronę — i jak to mierzy Google

Google ocenia wydajność strony przez kilka metryk. Najbardziej bezpośrednio powiązana z obrazami jest LCP, czyli Largest Contentful Paint — czas potrzebny do wyrenderowania największego widocznego elementu na stronie. W praktyce dla większości stron firmowych tym elementem jest właśnie duże zdjęcie: hero image, zdjęcie zespołu, foto produktu.

Google dzieli wyniki LCP na trzy kategorie:

• Dobry: 2,5 sekundy lub mniej
• Wymaga poprawy: między 2,5 a 4,0 sekundy
• Słaby: powyżej 4,0 sekundy

Pomiar odbywa się na 75. percentylu wśród rzeczywistych odwiedzających — co znaczy, że trzy czwarte użytkowników musi osiągać „dobry” wynik, żeby strona była uznana za szybką. Szczegółowy kontekst wszystkich metryk Core Web Vitals i ich wpływ na ranking opisaliśmy w artykule Core Web Vitals 2026 — co właściciel firmy musi wiedzieć.

Sam rozmiar pliku graficznego nie jest jedyną przyczyną wolnego LCP, ale jest przyczyną najczęstszą i najłatwiejszą do naprawienia. Zmiana formatu z JPEG na WebP lub AVIF to jeden z ruchów o najlepszym stosunku nakładu pracy do efektu — widoczny od razu w raportach PageSpeed Insights.

Telefon ładuje stronę inaczej niż laptop

Ważne rozróżnienie: Google stosuje mobile-first indexing, co oznacza, że jako podstawową traktuje wersję mobilną strony. Na urządzeniu mobilnym mamy wolniejsze połączenie, mniejszy ekran, czasem LTE zamiast WiFi. Obraz, który na szybkim laptopie załaduje się w sekundę, na starszym telefonie z 4G może potrzebować kilku sekund. Optymalizacja obrazów ma więc nieproporcjonalnie duży efekt właśnie na urządzeniach mobilnych — a to rosnąca większość ruchu na stronach MŚP.

JPEG, WebP i AVIF — ile naprawdę ważą pliki graficzne

Różnice w rozmiarze pliku między formatami przy tej samej widocznej jakości są duże i dobrze udokumentowane:

*Safari obsługuje WebP od wersji 14 (macOS Big Sur 11+).

To nie są różnice marginalne. Zdjęcie bohatera strony ważące w JPEG 900 KB po konwersji na WebP zajmie 600–700 KB, a na AVIF — około 450 KB. Gdy doliczyć kilka kolejnych zdjęć na podstronie „o nas” lub w galerii, łączna oszczędność potrafi sięgać kilku megabajtów — czyli realne kilkukrotne skrócenie czasu ładowania na słabym połączeniu mobilnym.

Kiedy WebP, a kiedy AVIF?

WebP to bezpieczny wybór dla większości stron. Obsługują go wszystkie nowoczesne przeglądarki i ma jedną ważną przewagę nad AVIF: progresywne renderowanie — przeglądarka może zacząć wyświetlać obraz zanim pobierze cały plik, co poprawia postrzegany czas ładowania. Dla stron firmowych, gdzie odwiedzający wciąż korzystają z różnych urządzeń i wersji przeglądarek, WebP oferuje najlepszą kombinację rozmiaru i zgodności.

AVIF daje najlepszą kompresję — Alliance for Open Media, która stoi za formatem, dokumentuje znaczące redukcje rozmiaru w porównaniu zarówno z JPEG, jak i WebP. Jedno ograniczenie: plik musi być pobrany w całości, zanim przeglądarka go wyświetli. Dlatego stosujemy AVIF zawsze razem z fallbackiem na WebP: przeglądarka bez obsługi AVIF automatycznie sięgnie po plik WebP.

PNG zostaje dla logo, ikon i grafik z przezroczystością (alpha channel). Dla zdjęć fotograficznych PNG jest nieefektywny i zajmuje więcej miejsca niż WebP.

SVG to osobna kategoria: dla prostych ikon i logotypów jest formatem wektorowym, który nie traci jakości przy żadnej rozdzielczości i waży kilka kilobajtów. Jeśli logo jest w pliku PNG — warto pomyśleć o wersji SVG.

Uwaga: obrazy Open Graph (tzw. zdjęcia podglądu widoczne przy udostępnianiu linku na Facebooku, LinkedIn, Messengerze) powinny pozostać w formacie JPEG lub PNG. Wiele platform społecznościowych nie obsługuje WebP w metatagu og:image. Używaj WebP i AVIF do obrazów na samej stronie — OG image eksportuj zawsze jako JPEG.

Co możesz zrobić samodzielnie — bez żadnego kodu

Poniższe kroki nie wymagają wiedzy programistycznej. Większość można wykonać w 30–60 minut.

1. Sprawdź obecny stan — Google PageSpeed Insights

Wejdź na pagespeed.web.dev i wpisz adres swojej strony. W sekcji Opportunities zobaczysz listę zaleceń posortowanych według potencjalnego efektu. Jeśli widoczne jest zalecenie „Serve images in next-gen formats” — to właśnie o WebP/AVIF chodzi. Google pokaże konkretną liczbę kilobajtów lub megabajtów, które możesz zaoszczędzić.

Warto też sprawdzić sekcję Diagnostics → Properly size images — Google identyfikuje tam konkretne obrazy, które mają większą rozdzielczość niż faktycznie wyświetlana. Wyniki testu PageSpeed podzielone są na wersję mobilną i desktop — skupiaj się na wynikach mobilnych, bo to te Google bierze pod uwagę w rankingu.

2. Konwertuj i kompresuj — Squoosh lub TinyPNG

Squoosh (squoosh.app) to darmowe narzędzie Google działające w przeglądarce — bez instalacji. Wgrywasz zdjęcie, wybierasz format docelowy (WebP lub AVIF), ustawiasz poziom kompresji i pobierasz wynik. Podgląd na żywo pozwala ocenić jakość przed zapisaniem.

Typowa operacja: zdjęcie z aparatu w JPEG (kilka MB), po zmniejszeniu rozdzielczości do 1920 pikseli i konwersji na WebP z jakością 75 — wynik jest kilkukrotnie mniejszy niż oryginał, przy niezauważalnej różnicy wizualnej.

TinyPNG (tinypng.com) to prostsze narzędzie z automatyczną kompresją bez ręcznej konfiguracji. Obsługuje JPEG, PNG i WebP. Dla mniej technicznych użytkowników to dobry punkt startowy — przeciągnij plik, pobierz skompresowaną wersję.

Oba narzędzia są bezpłatne i działają bezpośrednio w przeglądarce.

3. Zmniejsz rozdzielczość do faktycznie wyświetlanej

Częsty błąd: wgranie zdjęcia w rozdzielczości 4000×3000 pikseli, podczas gdy na stronie wyświetla się ono w szerokości 800 pikseli. Przeglądarka pobiera pełne 4000 pikseli szerokości i skaluje obraz w dół — marnując przepustowość i czas.

Zasada: zmniejsz zdjęcie do maksymalnej szerokości wyświetlania, pomnożonej przez 2 (dla ekranów Retina / wysokiej gęstości). Dla hero image na pełnej szerokości: 1920 pikseli. Dla zdjęcia w bocznej kolumnie lub kafelku: 800 pikseli. Do zmiany wymiarów wystarczy Paint (Windows), Preview (macOS) lub jedno z wielu bezpłatnych narzędzi online.

4. Wyróżnij obraz nagłówkowy — wyłącz lazy loading dla hero

Większość optymalizacji zachęca do lazy loadingu (leniwego ładowania) — obrazy poza ekranem ładują się dopiero gdy użytkownik do nich dotrze. To dobra praktyka dla galerii i sekcji niżej na stronie.

Wyjątek: główny obraz widoczny od razu po załadowaniu strony (hero image, logo, zdjęcie nagłówkowe). Ten obraz powinien ładować się jak najszybciej, bez opóźnienia. Jeśli masz bezpośredni dostęp do kodu HTML, dodaj do niego loading="eager" i fetchpriority="high". Jeśli używasz CMS-a — sprawdź, czy wtyczka do optymalizacji obrazów ma opcję oznaczenia obrazu jako „krytyczny” lub „above the fold”.

5. Sprawdź efekt ponownie

Po wgraniu zoptymalizowanych plików uruchom ponownie test w PageSpeed Insights. Porównaj wyniki przed i po — zmiana powinna być widoczna w sekcji Opportunities i w samym wyniku LCP. Regularne sprawdzanie (np. raz na kwartał) pozwala wychwycić nowe, nieskompresowane zdjęcia przed tym, jak zaczną realnie spowalniać stronę.

Jak Astro automatyzuje optymalizację obrazów

Jeśli Twoja strona jest zbudowana w Astro — frameworku, który coraz częściej wybieramy przy projektowaniu stron firmowych MŚP — opisana powyżej praca dzieje się automatycznie przy każdym wdrożeniu.

Astro udostępnia wbudowany komponent <Image />, który przy buildzie strony:

• Generuje wersję AVIF, WebP i oryginalny format jako fallback — komponent <Picture /> tworzy znacznik HTML z trzema źródłami; przeglądarka automatycznie wybiera najlepszy format, który obsługuje.
• Ustawia atrybuty width i height automatycznie — zapobiega CLS (Cumulative Layout Shift, przeskok treści podczas ładowania), który jest odrębną metryką Core Web Vitals wpływającą na UX i ranking.
• Dodaje loading="lazy" i decoding="async" domyślnie — obrazy poza ekranem ładują się dopiero gdy użytkownik do nich dotrze, nie przy pierwszym wczytaniu strony.
• Generuje srcset — przeglądarka dostaje zestaw wersji w różnych rozmiarach i wybiera optymalną dla aktualnego urządzenia.

Silnikiem optymalizacji jest Sharp — biblioteka znana z wysokiej jakości kompresji i szybkości działania. Transformacja odbywa się podczas budowania strony (build time), nie w czasie rzeczywistym — co daje najlepszą wydajność bez obciążenia serwera.

Praktyczny efekt: wgrywasz zdjęcie z aparatu w JPEG, Astro serwuje AVIF dla Chrome i Safari, WebP dla starszych przeglądarek, w rozdzielczości dostosowanej do telefonu lub monitora. Bez dodatkowej konfiguracji, bez osobnych narzędzi.

Szerzej o tym, kiedy warto wybrać Astro jako platformę dla strony firmowej MŚP — opisaliśmy w artykule Astro vs WordPress — kiedy warto migrować.

WordPress i inne CMS-y — opcje bez Astro

WordPress sam w sobie nie konwertuje obrazów do WebP domyślnie. Dostępne rozwiązania:

• Wtyczka (ShortPixel, Imagify, Smush) — automatyczna konwersja i kompresja przy wgrywaniu pliku. Konfiguracja zajmuje kilka minut, działa w tle.
• Cloudflare Polish (dostępny od planu Pro, ok. 20 USD/mies.) — jeśli strona stoi za Cloudflare, Polish automatycznie kompresuje obrazy JPEG i konwertuje do WebP na poziomie CDN, bez żadnych zmian w CMS-ie. Aktywuje się jednym przełącznikiem w panelu Cloudflare w sekcji Speed → Optimization.

Opcja z wtyczką daje więcej kontroli (możesz wybrać AVIF lub WebP, ustawić poziom kompresji), opcja z Cloudflare jest szybsza do wdrożenia i działa niezależnie od CMS-a.

Podsumowanie

• WebP redukuje wagę pliku o 25–35% względem JPEG przy zachowaniu jakości — obsługują go wszystkie nowoczesne przeglądarki.
• AVIF daje ok. 50% oszczędności vs JPEG — stosuj z fallbackiem WebP, bo brakuje mu progresywnego renderowania.
• LCP (czas ładowania największego elementu strony) powinien być ≤ 2,5 sekundy — optymalizacja obrazów to często najszybszy sposób na poprawę tego wyniku.
• Google PageSpeed Insights diagnozuje konkretnie, które obrazy spowalniają Twoją stronę i o ile — narzędzie bezpłatne, wyniki widoczne w 30 sekund.
• Squoosh lub TinyPNG konwertują i kompresują JPEG do WebP lub AVIF bez instalacji i bez kodu.
• Astro automatyzuje całość: konwersja formatów, odpowiednia rozdzielczość, lazy loading, srcset, zapobieganie CLS — wszystko w jednym wbudowanym komponencie.

Wskazówka: zacznij od PageSpeed Insights — darmowe narzędzie pokaże Ci w 30 sekund, o ile możesz przyspieszyć swoją stronę przez sam wybór formatów obrazów. Jeśli chcesz przeprowadzić pełen audyt wydajności i wdrożyć zmiany szybko, możemy to zrobić razem.