Optymalizacja zdjęć na stronie firmowej: WebP, lazy load i rozmiary (2026)

Jak optymalizować zdjęcia na stronie firmowej: WebP/AVIF, lazy load, atrybut sizes, kompresja i wpływ na Core Web Vitals oraz konwersję na mobile.

Jak optymalizować zdjęcia na stronie firmowej: WebP/AVIF, lazy load, atrybut sizes, kompresja i wpływ na Core Web Vitals oraz konwersję na mobile.
Na wielu stronach firmowych największy „ciężar” to nie kod, tylko zdjęcia — hero, realizacje, galeria, zespół. Bez optymalizacji strona wolno się ładuje na mobile, rośnie bounce rate, a Google pokazuje gorsze Core Web Vitals. Poniżej praktyczny minimum w 2026, które wdrażamy u klientów SynthIT.
Nowoczesne formaty dają ten sam efekt wizualny przy mniejszym pliku. W Next.js możesz użyć komponentu Image z automatyczną konwersją — użytkownik dostaje lekki format, Ty nie musisz ręcznie robić 5 wersji każdego pliku.
Kontekst wydajności: Core Web Vitals, Next.js vs WordPress.
Zasada: pierwszy ekran ładuje się od razu (priority), reszta obrazów — lazy. Galeria realizacji, zdjęcia w stopce i „czytaj więcej” nie powinny konkurować o bandwidth z hero.
sizes — nie wysyłaj 2000 px na telefonPrzeglądarka wybiera rozmiar na podstawie sizes i viewportu. Bez tego często pobiera za duży plik. Przykład: na mobile ~100vw, na desktopie kolumna 50% — to realnie obniża LCP.
Quality 75–85 zwykle wystarczy dla stron firmowych. Unikaj PNG dla zdjęć (zostaw PNG/SVG dla logo i ikon). Case study z dobrymi zdjęciami: jak pisać realizacje, portfolio SynthIT.
Obrazy z tego samego hosta co strona (lub CDN) skracają TTFB i unikają problemów z CORS. Przy migracji sprawdź przekierowania starych URL-i grafik: przekierowania 301, domena i hosting.
Lżejsze zdjęcia to szybsza strona, lepsze SEO i więcej konwersji na mobile. Chcesz audyt wydajności i wdrożenie pod Core Web Vitals — napisz do SynthIT. Strony i platformy, blog.
Zobacz inne wpisy, które mogą Cię zainteresować.
Kiedy warto zrobić redesign strony w 2026: sygnały techniczne i biznesowe, różnica między kosmetyką a przeprojektowaniem, SEO przy migracji i kiedy wystarczy doposażenie.
Realistyczny timeline wdrożenia strony w 2026: brief, design, development, QA przed startem i pierwsze dni po publikacji — co wpływa na czas projektu.
Dostępność WCAG na stronie firmowej bez przesady: kontrast, linki, alt, formularze oraz powiązanie z SEO, Core Web Vitals i konwersją w 2026.