Optymalizuj obrazy dla Core Web Vitals

# Jak optymalizacja obrazów wpływa na Core Web Vitals Core Web Vitals Google to trzy metryki, które bezpośrednio wpływają na pozycje w wyszukiwarce. A obrazy? Wpływają na wszystkie trzy. ## LCP (Largest Contentful Paint) **Cel: < 2,5 s** Twój obraz bohaterski jest zazwyczaj elementem LCP. Aby zoptymalizować: 1. **Wstępnie załaduj** obraz LCP: `` 2. **Użyj WebP** — o 30% mniejszy = o 30% szybszy ładowanie 3. **Responsywne obrazy** — nie serwuj obrazu 2000px na telefon 4. **Wskazówki priorytetowe** — `fetchpriority="high"` na obrazach bohaterskich ## INP (Interaction to Next Paint) **Cel: < 200 ms** Intensywne przetwarzanie obrazów na głównym wątku blokuje interakcje: 1. **Leniwe ładowanie** obrazów poniżej linii zgięcia 2. **Dekoduj asynchronicznie** — `decoding="async"` 3. **Użyj naszych narzędzi przeglądarkowych** — przetwarzanie odbywa się poza głównym wątkiem przez Web Workers ## CLS (Cumulative Layout Shift) **Cel: < 0,1** Obrazy bez wymiarów powodują przesunięcia układu: 1. **Zawsze podawaj szerokość/wysokość** — w HTML lub CSS 2. **Użyj pudełek z proporcji** — zarezerwuj miejsce przed załadowaniem obrazu 3. **Unikaj wstrzyknięć treści** — nie ładuj obrazów nad istniejącą treścią ## Wpływ w świecie rzeczywistym Przed optymalizacją: - LCP: 4,2 s ❌ - CLS: 0,25 ❌ - INP: 380 ms ❌ Po optymalizacji obrazów: - LCP: 1,8 s ✅ - CLS: 0,02 ✅ - INP: 120 ms ✅ ## Przewaga AmberPic Nasze narzędzia pomagają: - Kompresować obrazy przed przesłaniem (mniejszy LCP) - Konwertować do nowoczesnych formatów (szybsze dekodowanie) - Masowo zmieniać rozmiar dla responsywnych punktów przerwania (odpowiednie wymiary) --- *Zoptymalizuj swoje obrazy, zanim trafią do CDN — [wypróbuj AmberPic](/pl/compress/).*