Obrazki a SEO: jak optymalizować grafiki w WordPressie, by przyspieszyć stronę i zyskać dodatkowy ruch z wyszukiwarek

Sytuacja wyjściowa: grafiki w WordPressie, po co to robić

Dwa źródła zysku: szybciej i dodatkowy ruch z Google Grafika

W polskich realiach to częsty obraz: serwis na WordPressie, porządny hosting, ładny motyw, a mimo to strona główna i artykuły wczytują się ociężale. Winowajca? Zwykle nie pojedynczy skrypt, tylko suma nieoptymalnych grafik – zbyt duże wymiary, brak nowoczesnych formatów, zła kolejność ładowania, brak atrybutów. Optymalizacja obrazów to najkrótsza droga do poprawy Core Web Vitals, a przy okazji do pozyskania ruchu z Google Grafika i kart Odkryj.

Efekt dobrze przeprowadzonej optymalizacji bywa dwojaki. Po pierwsze, skracasz czas wczytywania i poprawiasz wskaźniki LCP/CLS/INP, co zwykle podnosi pozycje i konwersję. Po drugie, dzięki precyzyjnym altom, właściwym podpisom i dobrym nazwom plików, zdjęcia zaczynają rankować w wyszukiwarce grafiki, co tworzy dodatkowy lejek wejść na Twoją treść. Na konkurencyjnych rynkach to często „tani” kanał pozyskiwania odwiedzin.

Objawy, które zdradzają problem z obrazami

Typowe symptomy wyglądają tak: LCP pokazuje element zdjęcia lub slider; masz duże skoki układu (CLS), kiedy obraz doskakuje po chwili; narzędzia typu PageSpeed Insights grzmią o „optymalizacji obrazów” i „wydajnym kodowaniu”. W konsoli przeglądarki zobaczysz pobrania po 1–2 MB na pojedynczy plik JPG. W Google Search Console, w zakładce Wydajność po przełączeniu na typ wyszukiwania „Grafika”, ruch jest bliski zera mimo setek zdjęć w serwisie.

Co sprawdzić najpierw

• Czy największy element LCP to obraz? Jeśli tak – czy ma width/height i czy nie jest lazy-loadowany?
• Czy pliki mają nowoczesny format (WebP/AVIF)?
• Czy w srcset są właściwe rozmiary, a zdjęcie nie jest skalowane CSS-em z 3000 px do 700 px?
• Czy alt jest opisowy, unikalny i powiązany z frazami strony?

Jak obrazy wpływają na SEO i Core Web Vitals

LCP, CLS, INP – gdzie grafiki robią różnicę

LCP (Largest Contentful Paint) najczęściej wskazuje duży baner lub zdjęcie hero. Jeśli obraz jest ciężki, kompresja słaba, a format przestarzały – LCP skacze. Pomaga konwersja do WebP/AVIF, kompresja i prefetch/preload/fetchpriority=high dla kluczowego obrazu. CLS (Cumulative Layout Shift) rośnie, gdy element rezerwuje miejsce dopiero po załadowaniu. Rozwiązaniem jest ustawienie width/height i stylów wymuszających proporcje (w WordPressie od pewnego czasu to atrybuty szerokości/wysokości wstawiane automatycznie – ale wiele motywów je nadpisuje). INP cierpi, gdy po tapnięciu w galerię lub slider blokowane są główne wątki skryptami przetwarzającymi ogromne obrazy – warto dbać o leniwe ładowanie i lekkie lightboksy.

Ruch z Google Grafika i karty Odkryj

Zdjęcia z sensownymi altami, podpisami i w otoczeniu zgodnym tematycznie mają większe szanse na pozycje w Google Grafika. W praktyce działa to szczególnie dobrze w e-commerce (zdjęcia produktów), kulinariach (przepisy), turystyce (miejsca i mapy), wnętrzach i modzie. Odpowiednie wymiary i proporcje miniatur (np. 1200 × 628 px dla kart Odkryj/Open Graph) zwiększają CTR z kanałów społecznościowych i Google Discover, co pośrednio wspiera widoczność.

Dostępność i semantyka a SEO

Alt tekst to nie ozdoba. Wspiera czytniki ekranowe i bywa brany pod uwagę przy rozumieniu treści strony. Zamiast frazy „zdjęcie1.jpg” użyj opisu: „kurtka puchowa męska granatowa z kapturem – model zimowy”. Gdy obraz jest czysto dekoracyjny – alt pusty (alt=””). Gdy niesie informację (np. wykres), alt powinien streszczać jego sens. To drobne zmiany, które oddziałują na satysfakcję użytkownika i sygnały jakościowe.

Workflow optymalizacji: od pliku na dysku do biblioteki mediów

Krok 1: dobierz format pliku świadomie

Format wybieraj według zawartości i celu. Pomoże prosta ściągawka:

Kryteria: jeśli masz zdjęcie – startuj z WebP, a w razie potrzeby trzymaj fallback JPG. Dla ilustracji, ikon i znaków firmowych – SVG lub PNG, ale często WebP też zadziała z mniejszym rozmiarem. AVIF daje świetne liczby, ale używaj z detekcją wsparcia i rozsądnym fallbackiem.

Krok 2: ustal wymiary i generuj warianty responsywne

Nie ładuj zdjęcia 4000 px, jeśli kolumna treści ma 720 px. W WordPressie skorzystaj z mechanizmu srcset/sizes: po wgraniu pliku generowane są różne rozmiary, a przeglądarka wybierze odpowiedni. Przed uploadem przytnij obraz do wymiarów docelowych: dla bloga często 1200 px szerokości dla zdjęć w treści wystarczy; dla hero bannerów na pełną szerokość – 1920 px (czasem 1600 px) to rozsądny sufit. W e-commerce ustaw precyzyjnie miniatury produktów, by sklep nie renderował gigantycznych zdjęć w siatce kart.

Krok 3: kompresja i ustawienia jakości

Skalibruj jakość tak, by pliki były małe, a obraz wciąż wyglądał naturalnie. Dla zdjęć w treści celuj zazwyczaj w rozmiary rzędu kilkudziesięciu–stu kilkudziesięciu kilobajtów; dla banera hero – tyle, ile trzeba, by uniknąć „kaszki”, ale zwykle bez przekraczania kilku setek KB. Wtyczki do WordPressa (np. EWWW, Imagify, ShortPixel, Optimole, Smush, TinyPNG) pozwalają ustawić poziom jakości i konwersję do WebP/AVIF. Zacznij od profilu „lossy” dla zdjęć i usuń zbędne metadane EXIF (zostaw profil kolorów/ICC). Jeśli grafika traci ostrość na cienkich liniach – przełącz tę konkretną ilustrację na PNG lub wyższy próg jakości.

Co sprawdzić: czy ustawienia dotyczą też miniatur; czy oryginał jest archiwizowany; czy konwersja nie podmienia plików używanych w motywie (logotypy, ikony).

Krok 4: wieloformatowość z elementem picture

Łącz AVIF/WebP z bezpiecznym fallbackiem. Dzięki elementowi picture przeglądarka wybierze najlepszy format, a starsze – wczytają JPG/PNG.

<picture>
  <source type="image/avif" srcset="/img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="/img/hero-1200.webp 1200w, /img/hero-1920.webp 1920w" sizes="100vw">
  <img src="/img/hero-1200.jpg"
       srcset="/img/hero-1200.jpg 1200w, /img/hero-1920.jpg 1920w"
       sizes="100vw"
       width="1920" height="1080"
       loading="eager"
       fetchpriority="high"
       decoding="async"
       alt="opis zdjęcia powiązany z treścią">
</picture>

W edytorze blokowym WordPressa możesz dodać picture przez bloki/wtyczki lub motyw; jeśli nie masz tej opcji, wtyczka konwersji zwykle wstrzykuje odpowiednie źródła automatycznie.

Co sprawdzić: czy fallback naprawdę istnieje; czy sizes odzwierciedla układ (np. „(max-width: 720px) 100vw, 720px”).

Krok 5: priorytet ładowania, lazy i stabilność

Obraz LCP powinien ładować się jak najszybciej: loading=eager, fetchpriority=high i bez lazy. Dla reszty użyj loading=lazy oraz decoding=async. Jeśli używasz preloada, daj go tylko dla jednego–dwóch krytycznych obrazów, inaczej zablokujesz kolejkę. Zabezpiecz układ przez width/height lub CSS aspect-ratio, by nie było „podskoków”.

Typowe potknięcie: motyw nadaje loading=lazy wszystkim obrazom, w tym hero – trzeba wyłączyć lazy dla pierwszego, widocznego kadru. W nowszych WordPressach heurystyka często robi to sama, ale motywy i page buildery potrafią ją nadpisać.

Co sprawdzić: czy LCP nie ma lazy; czy ma width/height; czy nie preloadujesz miniatur i ikon.

Krok 6: obrazy tła i slidery

Grafika tła w CSS nie ma alt ani srcset. Jeśli to kluczowy wizual na górze strony – zamień go na obraz w HTML (img/picture). Gdy tło musi zostać, użyj image-set w CSS, by dostarczać różne rozdzielczości i formaty, oraz zarezerwuj proporcje kontenera.

background-image: image-set(
  url('/img/hero-1600.avif') type('image/avif') 1x,
  url('/img/hero-1600.webp') type('image/webp') 1x,
  url('/img/hero-1600.jpg') type('image/jpeg') 1x
);

Slidery i galerie często ładują wszystkie slajdy od razu. Ustaw leniwe ładowanie slajdów poza kadrem i generuj miniatury dopasowane do widoku. Trzy pierwsze slajdy zwykle wystarczą „na start”.

Co sprawdzić: czy CSS nie skaluje tła z 4000 px do 1200 px; czy slider nie wciąga oryginałów 1:1.

Tekstowe sygnały obrazu: nazwy, alty, podpisy, dane

Krok 7: nazwa pliku, alt, podpis i kontekst

Nazwa pliku wspiera rozumienie treści: „kurtka-puchowa-meska-granatowa.jpg” jest lepsze niż „IMG_8347.jpg”. Alt opisuje to, co jest na zdjęciu, a nie to, co „chcesz pozycjonować” – naturalny opis zwykle zawiera kluczowe słowa bez upychania fraz. Podpis (caption) bywa czytany i pojawia się blisko obrazu, co pomaga zarówno użytkownikovi, jak i wyszukiwarce.

W WordPressie ustaw: tytuł media, tekst alternatywny, podpis i – jeśli ma sens – opis. Unikaj powielania tych samych altów na dziesiątkach zdjęć produktu; różnicuj je kontekstem („widok z boku”, „detal zamka”).

Co sprawdzić: czy alt nie dubluje podpisu słowo w słowo; czy obraz dekoracyjny ma alt pusty; czy wokół obrazu jest akapit tematycznie zgodny.

Krok 8: dane strukturalne i miniatury dla Discover/OG

Dla typów treści jak Produkt, Przepis czy Artykuł dołóż dane strukturalne ze wskazaniem głównego obrazu (ImageObject z url, width, height). Popularne wtyczki SEO generują to automatycznie – zweryfikuj w Rich Results Test. Dla Google Discover, kart społecznościowych i podbić CTR przygotuj obraz 1200×628 lub większy, zgodny z wytycznymi Open Graph/Twitter Cards; trzymaj wagę rozsądną, ale nie kosztem jakości miniatury.

Co sprawdzić: czy w JSON-LD jest width/height; czy obraz OG nie jest przypadkową miniaturą 300 px.

Dostarczanie i porządki w WordPressie

Krok 9: CDN obrazów i transformacje po stronie serwera

CDN skraca drogę do użytkownika i odciąża serwer. Usługi z transformacjami (np. Cloudflare Images, ImageKit, Cloudinary, KeyCDN, Bunny) potrafią serwować obrazy w AVIF/WebP, przycinać, nakładać formaty i cache’ować warianty na krawędzi. Integruj ostrożnie: wyłącz podwójną kompresję (we wtyczce i w CDN jednocześnie), ustaw długie nagłówki cache dla wariantów i dopilnuj parametrów w URL-ach, by każda kombinacja rozmiaru/formatu była jednoznaczna.

Co sprawdzić: czy CDN nie serwuje WebP ze złym Content-Type; czy nie ma pętli przekierowań http/https; czy obrazy mają Cache-Control na tygodnie, a HTML krótszy.

Porządkowanie biblioteki mediów i kontrola rozmiarów

Krok 10: wyłącz zbędne rozmiary i ustaw własne

Motywy i wtyczki potrafią tworzyć dziesiątki wariantów, których nigdy nie użyjesz. Wyłącz je i zdefiniuj konkretne, dopasowane do layoutu (kolumna treści, siatka kart, hero, miniatury).

// functions.php lub wtyczka "mu-plugin"
add_action('after_setup_theme', function () {
  // Usuń domyślne, których nie używasz
  remove_image_size('medium_large'); // często zbędny
  // Dodaj rozmiary pod realny układ
  add_image_size('content-720', 720, 0, false);
  add_image_size('content-1200', 1200, 0, false);
  add_image_size('card-360', 360, 360, true);     // siatka produktu/karty
  add_image_size('hero-1920', 1920, 1080, true);  // nagłówek/baner
});

// Zatrzymaj generowanie niechcianych "intermediate sizes"
add_filter('intermediate_image_sizes_advanced', function ($sizes) {
  unset($sizes['thumbnail'], $sizes['medium'], $sizes['large']);
  // Zostaw tylko własne i ewentualnie te, które faktycznie są używane
  return $sizes;
});

Jeśli builder/motyw dodaje własne rozmiary, przejrzyj dokumentację – często da się je odhaczyć w ustawieniach albo odpiąć hookami.

Co sprawdzić: które rozmiary realnie występują w szablonach; czy karty/listy nie pobierają rozmiaru „full”.

Krok 11: regeneracja miniatur bez zatykania dysku

Po zmianach rozmiarów zregeneruj tylko brakujące pliki. WP‑CLI zrobi to najszybciej, bez timeoutów w panelu.

# Tylko brakujące, bez zostawiania starych
wp media regenerate --only-missing --yes

# Jeśli zmieniasz wymiary i chcesz pozbyć się starych
wp media regenerate --skip-delete=0 --yes

W panelu użyj wtyczki „Regenerate Thumbnails (Advanced)”, ale ustaw batchowanie i limit procesów, by nie zakorkować hostingu współdzielonego. Przed czyszczeniem starych miniaturek sprawdź kopię bezpieczeństwa oraz to, czy motyw nie linkuje do konkretnych plików po nazwie.

Co sprawdzić: czy katalog uploads nie puchnie od nieużywanych rozmiarów; czy cron nie próbuje w kółko generować tych samych wariantów.

Krok 12: próg „dużego obrazu” i warianty 2×

WordPress automatycznie skaluje bardzo duże pliki („big_image_size_threshold”). Zamiast globalnie to wyłączać, ustaw próg rozsądnie – unikniesz wgrywania gigantów i utraty kontroli nad jakością.

// Ogranicz automatyczne skalowanie do 1920 px
add_filter('big_image_size_threshold', function () { return 1920; });

Nie dubluj obrazów „@2x”, jeśli i tak korzystasz z srcset – przeglądarka wybierze gęstszy wariant sama. Dla ikon i logo preferuj SVG, a jeśli musi być rastrowe, przygotuj jeden plik o docelowej gęstości i pozwól srcset dobrać odpowiedni rozmiar.

Co sprawdzić: czy na stronach mobilnych nie idą pliki 1920 px; czy logo nie jest bitmapą 3000 px skalowaną w CSS do 120 px.

Krok 13: sprzątanie duplikatów i plików nieużywanych

Po latach pracy biblioteka potrafi skrywać setki osieroconych obrazów. Narzędzia w rodzaju Media Cleaner lub skryptów WP‑CLI pomogą je znaleźć, ale testuj na stagingu i wyklucz katalogi motywu/wtyczek.

• Krok 1: zrób kopię zapasową uploads i bazy.
• Krok 2: przeskanuj i przejrzyj listę kandydatów do usunięcia.
• Krok 3: usuń partiami i przejdź po najważniejszych szablonach.

Co sprawdzić: czy nie skasowałeś zasobów tła w CSS; czy pola ACF/galerii nie wskazują na usunięte ID.

Monitorowanie efektów i szybkie diagnozy

Krok 14: Core Web Vitals z perspektywy obrazów

Wykres LCP w Search Console powie, czy zmiany faktycznie pomogły. Jeśli LCP nadal „siedzi” na obrazie, zobacz raport PSI: najczęstsze wskazówki to „Properly size images”, „Efficiently encode images” i „Preload the largest contentful paint image”. Gdy LCP to tło CSS, rozważ przeniesienie go do HTML (picture/img) – zyskasz alt, srcset i priorytety ładowania.

Co sprawdzić: czy wskazany „Largest Contentful Paint element” to oczekiwany obraz; czy nie blokujesz go zbędnym preloadem innych plików.

Krok 15: DevTools – czy przeglądarka dostaje to, co trzeba

W zakładce Network porównaj „Resource size” z „Transferred”. Jeśli różnica jest mała, kompresja HTTP działa słabo – dotyczy to głównie PNG/SVG bez gzip/br. Sprawdź też nagłówki:

• Content-Type: image/avif, image/webp, image/jpeg – bez pomyłek.
• Cache-Control: długie dla obrazów (dni/tygodnie), krótkie dla HTML.
• Vary: Accept – przy negocjacji formatów na krawędzi/CDN.

W Elements przejrzyj atrybuty width/height i rzeczywisty box. Gdy naturalny rozmiar obrazu znacznie przekracza renderowany, doprecyzuj srcset/sizes lub użyj mniejszego wariantu.

Co sprawdzić: czy AVIF/WebP nie trafia do Safari 13 bez fallbacku; czy lazy nie dotyczy LCP.

Krok 16: mapy obrazów i sygnały odkrywania

Zadbaj, by ważne grafiki były widoczne dla robotów: mapy witryny z tagami obrazu ułatwiają ich wykrycie, zwłaszcza w galeriach i wpisach z wieloma mediami. Większość wtyczek SEO dodaje image:image automatycznie – sprawdź, czy trafiają tam właściwe URL‑e (kanoniczne, nie z parametrów podglądu).

<url>
  <loc>https://twojadomena.pl/wpis-ze-sesja-zdjeciowa/</loc>
  <image:image>
    <image:loc>https://twojadomena.pl/uploads/2026/07/portret-webp.webp</image:loc>
    <image:title>Portret w świetle dziennym</image:title>
  </image:image>
</url>

Jeśli kluczowe grafiki są tylko w CSS, dodaj również wersję w HTML lub link referencyjny w treści – same tła bywają pomijane przez crawle obrazów.

Co sprawdzić: czy robots.txt/zasady hotlinkingu na CDN nie blokują dostępu do katalogu uploads; czy mapy nie wskazują miniaturek zamiast pełnych wersji.

Krótka checklista przed publikacją wpisu

• Krok 1: format i wymiary – WebP/AVIF + fallback, szerokość dopasowana do miejsca.
• Krok 2: kompresja – profil „lossy”, bez zbędnego EXIF, kontrola jakości cienkich linii.
• Krok 3: alt, podpis, kontekst w akapitach – unikasz powtórek i upychania fraz.
• Krok 4: picture/srcset/sizes – odpowiadają rzeczywistemu układowi.
• Krok 5: priorytety – LCP bez lazy, opcjonalny preload tylko dla jednego obrazu.
• Krok 6: tła i slidery – zamiana na img/picture albo image-set + rezerwacja proporcji.
• Krok 7: cache i CDN – długie TTL dla obrazów, brak podwójnej konwersji.
• Krok 8: podgląd w PSI i DevTools – sprawdzasz LCP, rozmiary transferu i Content-Type.

Konfiguracja bloków i atrybutów ładowania

Krok 17: priorytet dla obrazu LCP i świadome lazy-loading

Obraz, który staje się LCP, nie powinien być „lazy”. Dla miniatury wpisu (featured image), która często ląduje w nagłówku, ustaw wysoki priorytet i wyłącz lazy. Zrób to warunkowo, by nie rozgrzewać wszystkich grafik.

// Ustaw fetchpriority i loading dla miniatury wpisu (potencjalny LCP)
add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
  if (is_singular() && get_post_thumbnail_id() === $attachment->ID) {
    $attr['loading'] = 'eager';        // bez lazy dla LCP
    $attr['fetchpriority'] = 'high';   // sygnał priorytetu do przeglądarki
    $attr['decoding'] = 'async';       // nie blokuj dekodowania
  }
  return $attr;
}, 10, 3);

Jeśli używasz pierwszego obrazu w treści (a nie miniatury) jako hero, ustaw podobny warunek po klasie/bloku edytora (np. „is-style-hero”). Unikaj globalnego loading="eager" – wystarczy jeden element LCP.

Co sprawdzić: czy na stronach list/archiwów obrazy w siatkach nadal ładują się „lazy”; czy atrybut fetchpriority nie pojawia się masowo na obrazach poniżej zagięcia.

Krok 18: sizes dopasowane do Twojego układu, nie do „teorii”

Domyślne sizes z WordPressa bywają zbyt ogólne. Lepiej podać wartości wynikające z realnej szerokości kolumny treści i breakpointów motywu.

// Doprecyzuj atrybut sizes dla rozmiarów treści
add_filter('wp_calculate_image_sizes', function ($sizes, $size, $image_src, $attachment_id) {
  if (in_array($size, ['content-720', 'content-1200'], true)) {
    // Przykład: kolumna treści 100vw <= 768px, potem ok. 70vw, max 720 px
    return '(max-width: 768px) 100vw, (max-width: 1280px) 70vw, 720px';
  }
  return $sizes;
}, 10, 4);

W blokach obrazów nie usuwaj atrybutów width/height – to rezerwuje miejsce i ogranicza CLS. Gdy builder generuje tylko style inline, dopisz szer./wys. w HTML lub użyj CSS z aspect-ratio.

Co sprawdzić: czy reality check w DevTools nie pokazuje pobierania plików większych niż renderowany box; czy „sizes” nie zmuszają telefonu do ściągania szerokich wariantów desktopowych.

SVG, ikony i znaki towarowe – lekko i bezpiecznie

Krok 19: bezpieczne wgrywanie i sensowna semantyka

SVG pozwala zastąpić ciężkie PNG ikonami „ostrymi” na każdym ekranie. Zadbaj jednak o sanitację i poprawny opis.

• Krok 1: zezwól na SVG tylko zaufanym rolom i sanituj pliki.
• Krok 2: zapewnij viewBox zamiast sztywnych width/height – skalowanie będzie przewidywalne.
• Krok 3: dla ikon dekoracyjnych dodaj aria-hidden="true", dla znaczących – alt/tytuł.

Wyniki rozszerzone i podglądy w social media

Krok 20: obrazy dla Open Graph i Twitter Cards

Gdy link trafia na Facebooka, LinkedIna czy X, scraper pobiera og:image. Jeśli wskażesz tylko WebP/AVIF, część platform nie zrobi podglądu. Najpewniejszy wariant to JPG o proporcjach ok. 1.91:1 (np. 1200×630) – lekki i kompatybilny. URL musi być absolutny, publiczny, bez krótkiego TTL na CDN.

<meta property="og:image" content="https://twojadomena.pl/uploads/2026/07/hero-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://twojadomena.pl/uploads/2026/07/hero-1200x630.jpg">

Gdy korzystasz z CDN, unikaj linków z krótkotrwałymi tokenami – scraper nie wróci po nowy. Jeżeli wtyczka SEO tworzy kilka rozmiarów, wybierz jeden stabilny i kontroluj wagę (kompresja lossy + progresywne JPG, bez zbędnego EXIF).

Co sprawdzić: czy podgląd w narzędziach debuggera (Sharing Debugger, Card Validator) ładuje właściwy plik, a nie miniaturkę 300 px; czy og:image ma kod 200 i nie jest blokowany przez reguły hotlinkingu.

Krok 21: Discover/Article – duże obrazy w JSON‑LD i „max-image-preview”

Dla wyników Discover i kart artykułu Google preferuje obrazy co najmniej 1200 px szerokości oraz zezwolenie na duże podglądy. W praktyce pomagają dwa elementy: „image” w schema.org oraz meta robots z „max-image-preview: large”.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Tytuł wpisu",
  "image": [
    "https://twojadomena.pl/uploads/2026/07/hero-1200.jpg"
  ],
  "datePublished": "2026-07-15",
  "author": { "@type": "Person", "name": "Autor" },
  "mainEntityOfPage": { "@type": "WebPage", "@id": "https://twojadomena.pl/wpis/" }
}
</script>
<meta name="robots" content="max-image-preview:large">

Jeśli schema generuje wtyczka SEO, skontroluj, który obraz trafia do „image” – unikaj miniaturek, obrazów z parametrami podglądu i prywatnych URL‑i z krótkim podpisem.

Co sprawdzić: w Rich Results Test obraz ma pełny URL i minimum 1200 px szerokości; w kodzie strony nie ma konfliktu wielu bloków JSON‑LD z różnymi obrazami.

Produkty, galerie i duże zbiory

Krok 22: obrazy produktów w WooCommerce – priorytet i ostre kadry

Na stronie produktu LCP bywa główny obraz. Ustaw dla niego priorytet i upewnij się, że miniatury nie pobierają wersji „full”.

Najczęściej zadawane pytania (FAQ)

Jak przyspieszyć LCP w WordPressie, gdy największy element to obraz?

Krok 1: zmniejsz plik do realnych wymiarów (np. hero max 1600–1920 px, zdjęcie w treści 1000–1200 px) i skompresuj go do WebP lub AVIF. Krok 2: nadaj atrybuty width/height albo styl aspect-ratio, aby zarezerwować miejsce. Krok 3: dla obrazu LCP wyłącz lazy loading i ustaw loading=”eager” oraz fetchpriority=”high”; preloading stosuj tylko do tego jednego zasobu.

Typowy błąd: slider jako LCP z kilkoma ciężkimi kadrami ładowanymi od razu. Zastąp go jednym statycznym ujęciem na start lub ogranicz liczbę natychmiast ładowanych slajdów.

• Co sprawdzić: czy LCP w PageSpeed Insights wskazuje obraz i czy ma width/height.
• Co sprawdzić: brak loading=”lazy” przy elemencie LCP i obecny fetchpriority=”high”.
• Co sprawdzić: rozmiar pliku (często da się zejść poniżej 200–300 KB dla hero).