Thumbnail w WordPress – co to jest?

Thumbnail — nazywany też obrazem wyróżniającym lub featured image — to grafika przypisana bezpośrednio do wpisu, strony lub niestandardowego typu postu. Służy jako wizualna reprezentacja treści: na listach wpisów, w nagłówkach artykułów, przy udostępnianiu linku w mediach społecznościowych.

Obraz wyróżniający to nie zwykła grafika wstawiona w treści artykułu. To osobne pole wpisu, wywoływane przez motyw niezależnie od treści.

Jak WordPress przetwarza miniaturki

Po wgraniu grafiki do biblioteki mediów WordPress automatycznie generuje kilka kopii w różnych rozmiarach. Dzięki temu motyw może wyświetlić mniejszą, lżejszą wersję na liście wpisów — a pełny rozmiar dopiero po wejściu w artykuł. To zmniejsza wagę strony listingowej i może poprawić jej szybkość ładowania.

Podstawowe rozmiary widoczne lub typowo używane przez WordPress to:

Nazwa Domyślny rozmiar Typ kadrowania
Thumbnail 150 × 150 px Twarde (obcina do kwadratu)
Medium 300 × 300 px Miękkie (skaluje proporcjonalnie)
Medium Large 768 px szerokości Miękkie
Large 1024 × 1024 px Miękkie

W nowszych wersjach WordPress może generować także dodatkowe rozmiary dla dużych ekranów, np. 1536x1536 i 2048x2048, a bardzo duże obrazy mogą zostać automatycznie przeskalowane do wersji z sufiksem -scaled.

Twarde kadrowanie (hard crop) przycina obraz do dokładnych wymiarów, obcinając nadmiar. Miękkie kadrowanie (soft crop) skaluje proporcjonalnie — wynikowy rozmiar może być mniejszy niż zadeklarowany, jeśli proporcje nie pasują.

Własne rozmiary miniaturek

Motywy mogą rejestrować własne rozmiary grafik za pomocą funkcji add_image_size() w pliku functions.php:

add_image_size( 'blog-list', 400, 300, true ); // 400x300, twarde kadrowanie

Każdy zarejestrowany rozmiar powoduje, że przy każdym wgraniu grafiki WordPress generuje dodatkowy plik na dysku serwera. Przy kilku lub kilkunastu dodatkowych rozmiarach jeden upload generuje kilkanaście plików. Warto rejestrować tylko rozmiary faktycznie używane przez szablony motywu.

Regeneracja miniaturek

Nowo zarejestrowane rozmiary nie są automatycznie stosowane do grafik wgranych przed zmianą kodu. Stare pliki wymagają regeneracji — ponownego przetworzenia w nowych wymiarach.

Można to zrobić przez:
– WP-CLI komendą wp media regenerate
– Wtyczkę Regenerate Thumbnails

Regeneracja na stronie z dużą biblioteką mediów może zajmować dużo czasu — warto przeprowadzać ją w godzinach niskiego ruchu.

Wymagania motywu

Obraz wyróżniający działa tylko wtedy, gdy aktywny motyw deklaruje wsparcie dla tej funkcji przez add_theme_support('post-thumbnails'). Większość współczesnych motywów to robi, ale starsze lub bardzo minimalistyczne motywy mogą nie mieć tej funkcji.

Generowanie miniaturek zależy też od bibliotek graficznych PHP dostępnych na serwerze — GD lub Imagick. Ich brak lub nieprawidłowa konfiguracja może uniemożliwiać tworzenie kopii grafik.

Thumbnail a media społecznościowe

Obraz wyróżniający jest często używany przez wtyczki SEO (np. Yoast, RankMath) jako domyślna grafika Open Graph (OG:Image) — obraz wyświetlany przy udostępnianiu linku na Facebooku czy LinkedIn. To nie dzieje się bez konfiguracji wtyczki, ale jest częstym domyślnym zachowaniem.

Przy projektowaniu grafiki wyróżniającej warto uwzględnić minimalne rozmiary wymagane przez platformy społecznościowe — zwykle 1200 × 630 px dla obrazów Open Graph.

Format grafik a miniaturki

Przy generowaniu miniaturek WordPress korzysta z formatu grafiki źródłowej. Jeśli wgrany obraz jest w formacie WebP, miniaturki też będą w WebP. Więcej o nowoczesnych formatach grafik: WebP w WordPress.

Czego nie mylić

Obraz wyróżniający to nie to samo co grafika osadzona w treści artykułu przez blok Obrazek. To osobne pole — motyw może wyświetlać je niezależnie od treści, np. w nagłówku artykułu lub na liście wpisów.

Thumbnail to też nie to samo co zajawka — miniaturka to grafika, zajawka to tekst. Oba mogą się uzupełniać na stronach listingowych, ale są zarządzane oddzielnie.