Rozmiar obrazka wyróżniającego WordPress: 1200×630 i Twój

Krótka odpowiedź: jeśli nie znasz jeszcze rozmiaru swojego motywu, użyj 1200 x 630 pikseli (około 1.91:1). To rozmiar podglądu linku, który zaleca Facebook, a wtyczki SEO zwykle używają obrazka wyróżniającego jako obrazka do udostępniania.

W samym wpisie liczy się rozmiar, który wyświetla Twój motyw. WordPress zapisuje każdy przesłany plik w kilku rozmiarach, a motyw wybiera, który z nich się pojawi. Motywy klasyczne ustawiają to przez set_post_thumbnail_size() lub add_image_size(), motywy blokowe w bloku Obrazek wyróżniający. Jeśli motyw przycina do 16:9 lub kwadratu, obrazek 1200 x 630 może stracić część lewej i prawej krawędzi. Znajdź rozmiar swojego motywu (poniżej cztery sposoby), a potem prześlij obrazek co najmniej tak duży albo mniej więcej dwa razy szerszy, jeśli chcesz ostrego obrazu na ekranach o wysokiej gęstości pikseli.

Aby zobaczyć wszystkie rozmiary, które WordPress utworzy z konkretnego obrazka, wrzuć go do narzędzia do rozmiarów obrazków WordPress.

Jaki rozmiar wybrać, zależnie od miejsca wyświetlania

Gdzie pojawia się obrazek	Rozmiar do przesłania	Uwagi
Twoje wpisy, rozmiar motywu jeszcze nieznany	1200 x 630 lub 2400 x 1260 dla ostrzejszego obrazu	Sprawdza się też w podglądach linków, zanim ustalisz rozmiar motywu
Twoje wpisy, rozmiar motywu znany	Mniej więcej dwukrotność szerokości obrazka wyróżniającego w Twoim motywie, w tych samych proporcjach	WordPress robi z przesłanego pliku mniejsze kopie, nigdy większe
Podglądy linków na Facebooku	Co najmniej 1200 x 630 (około 1.91:1); 1200 x 628 ma prawie ten sam kształt	Według wskazówek Facebooka dotyczących udostępniania
Google Discover	Co najmniej 1200 px szerokości, 16:9 (na przykład 1200 x 675)	Według wytycznych Google dotyczących Discover

Rozmiary obrazków WordPress w skrócie

Każdy przesłany obrazek dostaje przeskalowane kopie dla każdego zarejestrowanego rozmiaru. Oto rozmiary rejestrowane przez rdzeń WordPressa, z wartościami domyślnymi z Theme Handbook i dokumentacji funkcji rdzenia:

Nazwa rozmiaru	Domyślne wymiary	Można zmienić w Ustawienia > Media?	Uwagi
thumbnail	150 x 150, przycinany	Tak	Ma pole „przytnij do dokładnych wymiarów”
medium	maks. 300 x 300	Tak	Skalowany proporcjonalnie
medium_large	szerokość 768, bez limitu wysokości	Nie	Używany głównie w srcset
large	maks. 1024 x 1024	Tak	Skalowany proporcjonalnie
1536x1536	maks. 1536 x 1536	Nie	Dodany w WordPress 5.3 dla ekranów o wysokiej gęstości
2048x2048	maks. 2048 x 2048	Nie	Dodany w WordPress 5.3 dla ekranów o wysokiej gęstości
post-thumbnail	Ustawia motyw	Nie	Istnieje tylko, gdy motyw wywołuje set_post_thumbnail_size()
full	Twój oryginalny plik	Nie	Bardzo duże pliki są najpierw zmniejszane (patrz niżej)

„Maks.” oznacza, że WordPress mieści obrazek w tym prostokącie i zachowuje jego proporcje. Zdjęcie 2000 x 1000 staje się w rozmiarze large obrazkiem 1024 x 512, a nie 1024 x 1024.

Motywy i wtyczki często dodają kolejne rozmiary przez add_image_size(). WooCommerce na przykład dodaje własne rozmiary produktów, które opisujemy w poradniku o rozmiarze zdjęć produktów WooCommerce.

Jeszcze jedna zasada dotyczy dużych plików. Od WordPress 5.3, jeśli obrazek jest szerszy lub wyższy niż 2560 pikseli, WordPress go zmniejsza i używa zmniejszonej kopii jako największego dostępnego rozmiaru. Ten próg pochodzi z filtra big_image_size_threshold, którego wartość domyślna to 2560. Jeśli widzisz -scaled w nazwach plików i zastanawiasz się, czy to wyłączyć, przeczytaj, jak wyłączyć skalowane obrazki w WordPressie.

Skąd naprawdę bierze się rozmiar obrazka wyróżniającego

Obrazek wyróżniający to dowolny obrazek ustawiony w panelu Obrazek wyróżniający w edytorze wpisu. To, co widzą odwiedzający, zależy od tego, jak motyw go wyświetla.

Motywy klasyczne

Motyw klasyczny włącza obrazki wyróżniające i rejestruje rozmiar w swoim pliku functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() rejestruje rozmiar o nazwie post-thumbnail. Trzeci argument steruje przycinaniem. Przy false (domyślnie) WordPress skaluje obrazek tak, by zmieścił się w 1200 x 675. Przy true wycina go dokładnie do 1200 x 675 od środka, więc wszystko poza prostokątem 16:9 przepada. Możesz też podać tablicę, np. array( 'center', 'top' ), aby wybrać, która część zostanie.

Wiele motywów rejestruje dodatkowe nazwane rozmiary dla różnych szablonów:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Szablon wybiera potem jeden z nich po nazwie:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Wywołane bez nazwy the_post_thumbnail() używa post-thumbnail. Prawdziwy rozmiar obrazka wyróżniającego w motywie klasycznym to więc rozmiar wskazany w szablonie, a archiwum bloga może używać innego niż widok pojedynczego wpisu.

Motywy blokowe

Motywy blokowe, w tym darmowe motywy z tej strony, wyświetlają obrazek wyróżniający blokiem Obrazek wyróżniający. Dokumentacja bloków rdzenia wymienia jego ustawienia, w tym sizeSlug (który zarejestrowany rozmiar wczytać), aspectRatio, width, height i scale.

To zmienia miejsce, w którym szukasz. Otwórz Wygląd > Edytor, edytuj szablon pojedynczych wpisów i zaznacz blok Obrazek wyróżniający. Panel boczny pokazuje, który rozmiar obrazka wczytuje blok i czy ustawiono proporcje. Proporcje są nakładane w przeglądarce przez CSS, więc plik zostaje ten sam, a zmienia się widoczna ramka. Jeśli blok wymaga ramki 16:9, a Twój obrazek jest kwadratowy, część z niego zostanie ukryta. Szablony archiwum i strony głównej mogą mieć inne ustawienia niż szablon pojedynczego wpisu, więc sprawdź każdy z nich.

Jak znaleźć rozmiar obrazka wyróżniającego w swoim motywie

Spróbuj po kolei. Wystarczy pierwszy sposób, który da odpowiedź.

1. Sprawdź dokumentację motywu. Dobre motywy podają zalecany rozmiar obrazka wyróżniającego. Jeśli jest podany, użyj go.

2. Wyświetl zarejestrowane rozmiary w WP-CLI. Jeśli masz dostęp do wiersza poleceń, wp media image-size wypisze każdy zarejestrowany rozmiar z szerokością, wysokością, ustawieniem przycinania i proporcjami:

   wp media image-size

3. Przeszukaj pliki motywu. W motywie klasycznym szukaj w functions.php (i plikach, które dołącza) wywołań set_post_thumbnail_size i add_image_size, a potem w single.php lub częściach szablonu sprawdź nazwę przekazaną do the_post_thumbnail(). W motywie blokowym sprawdź blok Obrazek wyróżniający w Edytorze witryny, jak opisano wyżej.

4. Zbadaj opublikowany wpis. Kliknij obrazek wyróżniający prawym przyciskiem, wybierz Zbadaj i odczytaj nazwę pliku w src. WordPress dopisuje wymiary do przeskalowanych kopii, więc my-photo-1200x675.jpg oznacza, że motyw wczytał kopię 1200 x 675. Sprawdź też srcset, bo na wąskich ekranach przeglądarka może wybrać mniejszą kopię. Brak wymiarów w nazwie oznacza, że użyto pliku w pełnym rozmiarze.

Gdy znasz docelowy rozmiar, przepuść przykładowy obrazek przez narzędzie do rozmiarów obrazków, aby sprawdzić, jak będzie wyglądać każda kopia, zanim prześlesz całą partię.

Jak dobrać rozmiar przesyłanego pliku

Gdy znasz rozmiar motywu, o dobrym efekcie decydują cztery wybory.

• Szerokość. Prześlij plik co najmniej tak szeroki, jak wyświetla go motyw. Aby uzyskać ostry obraz na ekranach telefonów i laptopów o wysokiej gęstości, celuj w mniej więcej dwukrotność tej szerokości. Dla miejsca o szerokości 1200 px oznacza to 2400 px. WordPress robi mniejsze kopie z Twojego pliku i nigdy nie robi większych, więc za mały oryginał to najczęstsza przyczyna rozmytego obrazka po przesłaniu.
• Proporcje. Dopasuj proporcje do przycięcia w motywie. Jeśli motyw przycina do 16:9, daj mu 16:9 i trzymaj główny obiekt blisko środka, aby twarde przycięcie nie ucięło głów ani tekstu.
• Rozmiar pliku. Zdjęcie o szerokości 2400 px zapisane jako JPEG w rozsądnej jakości waży zwykle kilkaset kilobajtów. Przesyłanie pliku 6000 px prosto z aparatu dodaje tylko pracy: WordPress i tak zmniejsza wszystko powyżej 2560 px, a dodatkowe piksele nigdy nie trafiają do odwiedzających.
• Format pliku. WordPress przyjmuje pliki WebP od wersji 5.8 i AVIF od wersji 6.5, o ile biblioteka graficzna na Twoim serwerze je obsługuje. Oba formaty dają zwykle mniejszy plik niż JPEG przy podobnej jakości.

Obrazek do udostępniania w mediach społecznościowych to osobna sprawa

Gdy ktoś udostępnia Twój wpis na Facebooku, LinkedIn lub w innych serwisach, podgląd pochodzi z tagu og:image, który wtyczki SEO zwykle wypełniają obrazkiem wyróżniającym. Dokumentacja udostępniania Facebooka zaleca obrazki o wymiarach co najmniej 1200 x 630 pikseli, możliwie najbliższe proporcjom 1.91:1.

Spotkasz się też z zaleceniem 1200 x 628. Ten rozmiar ma niemal dokładnie proporcje 1.91:1, a 1200 x 630 wychodzi około 1.90:1. Różnią się tylko o 2 piksele wysokości, więc oba się sprawdzą.

Jeśli rozmiar wyświetlania w Twoim motywie też jest bliski 1.91:1, jeden plik 1200 x 630 (lub 2400 x 1260) sprawdzi się w obu miejscach. Jeśli motyw przycina do 16:9 lub kwadratu, trzymaj ważne elementy z dala od lewej i prawej krawędzi albo ustaw osobny obrazek do mediów społecznościowych we wtyczce SEO.

Google Discover ma własne zalecenia dotyczące obrazków. Wytyczne Google dotyczące Discover zalecają obrazki o szerokości co najmniej 1200 px, mające łącznie ponad 300 000 pikseli, w proporcjach 16:9, na przykład 1200 x 675. Duże obrazki wymagają też ustawienia robots max-image-preview:large, które WordPress dodaje domyślnie od wersji 5.7, chyba że witryna ma włączoną prośbę do wyszukiwarek o nieindeksowanie.

Jak zmienić rozmiar obrazka wyróżniającego

To, gdzie wprowadzisz zmianę, zależy od rozmiaru i od Twojego motywu.

Rozmiary rdzenia (thumbnail, medium, large). Przejdź do Ustawienia > Media i zmień szerokość oraz wysokość. Dokumentacja ekranu Ustawienia mediów opisuje te pola, w tym pole przycinania dla miniatur.

Rozmiary motywu w motywie klasycznym. Nie edytuj motywu nadrzędnego, bo aktualizacja motywu nadpisze Twoją zmianę. Dodaj nowe wartości w pliku functions.php motywu potomnego. Ponowne zarejestrowanie rozmiaru pod tą samą nazwą zastępuje go, a konfiguracja motywu potomnego powinna uruchomić się po konfiguracji motywu nadrzędnego:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

Priorytet 11 sprawia, że kod uruchamia się po motywie nadrzędnym podpiętym z domyślnym priorytetem 10. Sprawdź kod motywu nadrzędnego i dostosuj wartość, jeśli używa późniejszego priorytetu.

Motywy blokowe. Zmień rozmiar obrazka i proporcje bloku Obrazek wyróżniający w szablonie w Edytorze witryny. Kod nie jest potrzebny, a zmiana obejmuje każdy wpis korzystający z tego szablonu.

Jeden obrazek, bez kodu. Aby wybrać, co zostanie po przycięciu pojedynczego obrazka, otwórz go w Media > Biblioteka i kliknij Edytuj obrazek. Przytnij go do proporcji motywu (narzędzie przycinania przyjmuje proporcje, na przykład 16:9) albo przeskaluj, a potem zapisz. WordPress stosuje zmianę do wszystkich rozmiarów tego obrazka i zachowuje oryginalny plik, więc później możesz ją cofnąć, przywracając oryginalny obrazek.

Odtwórz istniejące miniatury

Zmieniony rozmiar dotyczy tylko nowych plików. Obrazki, które już są w bibliotece mediów, zachowują stare kopie, dopóki ich nie przebudujesz. Robi to polecenie wp media regenerate:

wp media regenerate --yes

Przydatne opcje z dokumentacji WP-CLI:

• --image_size=hero-wide przebudowuje tylko ten rozmiar. Powtórz flagę dla kilku rozmiarów.
• --only-missing tworzy rozmiary, których jeszcze nie ma, i nie rusza istniejących plików, co jest szybsze po dodaniu nowego rozmiaru.
• --skip-delete zachowuje stare pliki miniatur. Użyj tej opcji, jeśli inne strony, newslettery lub kanały linkują bezpośrednio do tych plików.

Bez dostępu do wiersza poleceń to samo zrobi z kokpitu wtyczka Regenerate Thumbnails z katalogu wtyczek WordPress.org. Przy dużej bibliotece najpierw zrób kopię zapasową, bo odtwarzanie nadpisuje wiele plików.

Częste błędy

• Poprzestanie na 1200 x 630. To dobry punkt wyjścia i pasuje do podglądów linków, ale jeśli Twój motyw przycina do 16:9 lub kwadratu, część obrazka zostanie ucięta. Sprawdź rozmiar motywu, zanim prześlesz całą partię.
• Wyłączenie generowanych rozmiarów, żeby „zachować oryginał”. Jeśli motyw nie ma mniejszych kopii, może wczytywać pełny plik na każdym ekranie, co spowalnia stronę na telefonach. Przeskalowane kopie istnieją właśnie po to, by temu zapobiec.
• Edycja kodu rozmiarów obrazków bez odtworzenia miniatur. Kod działa, ale tylko dla nowych plików. Dlatego wiele osób uznaje, że zmiana rozmiaru „nic nie dała”.
• Zmiana rozmiaru w motywie nadrzędnym. Następna aktualizacja motywu ją usunie. Użyj motywu potomnego albo Edytora witryny.

Jeśli obrazek nadal wygląda źle mimo dopasowania rozmiaru i proporcji oraz odtworzenia miniatur, porównaj nazwę pliku wczytanego przez przeglądarkę z rozmiarami, które według narzędzia do rozmiarów obrazków powinien utworzyć WordPress. Jeśli się różnią, często wtyczka optymalizacyjna albo skaler obrazków w CDN między WordPressem a odwiedzającym serwuje własną wersję.