Jaki rozmiar powinien mieć obrazek wyróżniający w WordPressie?

Liczba, której większość ludzi szuka, to 1200 x 630 pikseli. To proporcje, których Facebook, LinkedIn i X używają do podglądów linków (1.91:1), i to właśnie taki powinien być obrazek Open Graph. Jeśli ustawiasz obrazek wyróżniający głównie po to, żeby udostępniane linki wyglądały dobrze, użyj 1200 x 630 i na tym poprzestań.

Ale ta liczba to nie to, co Twój szablon faktycznie wyświetla przy wpisie. WordPress rzadko pokazuje obrazek wyróżniający w oryginalnym rozmiarze. Szablon żąda konkretnego zarejestrowanego rozmiaru obrazka, a WordPress serwuje ten wygenerowany wcześniej kadr, który pasuje. Dlatego zdjęcie, które wygląda idealnie na Facebooku, może wyglądać nieostro, być rozciągnięte albo źle skadrowane w szablonie pojedynczego wpisu. „Poprawny” rozmiar zależy od szablonu, a nie od uniwersalnej reguły.

Dlaczego szablon nadpisuje tę liczbę

Kiedy przesyłasz zdjęcie, WordPress nie zapisuje jednego pliku. Uruchamia wp_generate_attachment_metadata() i tworzy wersję pochodną dla każdego zarejestrowanego rozmiaru obrazka: trzy domyślne (thumbnail, medium, large), rozmiar medium_large z edytora blokowego (szerokość 768px), plus każdy rozmiar zarejestrowany przez szablon lub wtyczkę za pomocą add_image_size().

Szablon, który chce mieć szeroki nagłówek w proporcji 16:9, zrobi coś takiego w functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Czwarty argument, true, oznacza twarde kadrowanie (hard crop). WordPress przytnie Twoje zdjęcie dokładnie do 1200 x 675, odrzucając wszystko, co nie mieści się w ramce 16:9. Jeśli obiekt znajduje się blisko górnej lub dolnej krawędzi kadru, zostanie obcięty. Ustawione na false (lub pominięte), zdjęcie jest skalowane proporcjonalnie, a końcowe wymiary mogą różnić się od tych, o które prosiłeś.

Następnie szablon decyduje, który rozmiar pobrać:

the_post_thumbnail( 'hero-featured' );

Cokolwiek zostanie przekazane do the_post_thumbnail(), to właśnie ten kadr się wyrenderuje. Zatem rzeczywisty rozmiar obrazka wyróżniającego na Twojej stronie jest zdefiniowany w dwóch miejscach, których nie napisałeś: w wywołaniu add_image_size() oraz w wywołaniu the_post_thumbnail() w szablonie. Przesłanie większego pliku nie zmienia żadnego z nich.

Jest jeszcze jedna warstwa. WordPress serwuje srcset, więc na mniejszych ekranach przeglądarka może załadować wersję medium lub large zamiast pełnego kadru. Wymiar, który widzisz w narzędziach deweloperskich, często nie jest tym, który przesłałeś.

Jak to naprawić, krok po kroku

1. Sprawdź, o co faktycznie prosi Twój szablon. Zanim zaczniesz zgadywać, zobacz każdy rozmiar, który WordPress generuje z Twojego zdjęcia, i który z nich jest przyciętym nagłówkiem. Wrzuć swoje zdjęcie do narzędzia do rozmiarów obrazków WordPress — pokaże każdą wersję pochodną, którą WP by utworzył, w dokładnych wymiarach pikselowych, żebyś mógł dopasować źródło do prawdziwego celu, a nie do mitycznego 1200x630.

2. Prześlij plik na tyle duży, by pokryć największy kadr. Jeśli nagłówek szablonu ma 1200 x 675, prześlij co najmniej tyle, a najlepiej 2x dla ekranów retina (2400 x 1350). WordPress zmniejsza obrazy czysto; nigdy ich nie powiększa. Zbyt małe źródło to najczęstsza przyczyna nieostrego obrazka wyróżniającego.

3. Dopasuj proporcje do kadru szablonu. Jeśli szablon twardo kadruje do 16:9, podaj mu materiał 16:9. Komponuj kadr z obiektem wyśrodkowanym, żeby twarde kadrowanie nikomu nie ucięło głowy.

4. Jeśli zarejestrowany rozmiar jest błędny, zmień go i zregeneruj miniaturki. Zmień wartości add_image_size() w szablonie potomnym, a następnie przebuduj istniejące miniaturki — nowe wymiary zadziałają tylko dla przyszłych plików, dopóki tego nie zrobisz:

wp media regenerate --yes

Nie masz WP-CLI? Wtyczka Regenerate Thumbnails robi to samo z poziomu kokpitu.

Czego nie robić

Nie przesyłaj po prostu zdjęcia 1200x630, zakładając, że zostanie odpowiednio obsłużone. Jeśli zarejestrowany rozmiar szablonu to 16:9, WordPress twardo przytnie Twoje zdjęcie 1.91:1 i stracisz górę oraz dół. Liczba dla Open Graph i liczba dla wyświetlania to dwa różne zadania.

Nie wyłączaj rozmiarów obrazków WordPressa, żeby „zachować oryginał”. Ludzie znajdują porady, żeby ustawić rozmiary pośrednie na 0 albo odpiąć the_post_thumbnail. Wtedy szablon zaczyna serwować pełnowymiarowy plik skalowany w przeglądarce — JPEG o szerokości 4000px wysyłany na telefon. To rujnuje czas ładowania i Core Web Vitals. Wersje pochodne istnieją nie bez powodu.

Nie ufaj „zalecanemu rozmiarowi” z wtyczki bardziej niż faktycznemu zarejestrowanemu rozmiarowi Twojego szablonu. Wtyczki SEO zalecają 1200x630 dla tagu OG, co jest poprawne dla tego tagu. Nie mówi to jednak nic o tym, do czego kadruje szablon pojedynczego wpisu.

Nie pomijaj wp media regenerate po zmianie rozmiarów. Edycja add_image_size() nie robi nic ze zdjęciami już przesłanymi. To ten krok, o którym ludzie zapominają, a potem stwierdzają, że kod nie zadziałał.

Nadal nie działa?

Jeśli po dopasowaniu wymiarów i regeneracji miniaturek zdjęcie nadal jest złe, problemem jest zwykle tryb kadrowania (true kontra false) albo srcset serwujący mniejszą wersję pochodną, niż się spodziewasz. Wrzuć plik do narzędzia do rozmiarów obrazków, żeby zobaczyć dokładnie, jakie kadry produkuje Twoja konfiguracja, a następnie porównaj to z tym, co przeglądarka faktycznie ładuje w narzędziach deweloperskich. Dopasuj te dwie rzeczy, a zgadywanie się skończy.