Nie ma jednego idealnego rozmiaru obrazu do WordPressa. Dla większości stron sprawdzi się szerokość 1200–1920 px, a duże zdjęcie powinno ważyć najlepiej poniżej 150–200 KB. Najważniejsze jest dopasowanie grafiki do miejsca, w którym będzie wyświetlana, zamiast wgrywania oryginału z aparatu.
Jakie wymiary obrazów wybrać?
Rozmiar fizyczny obrazu podaje się w pikselach, na przykład 1200 × 800 px. Waga pliku to osobny parametr wyrażany w KB lub MB. Duża liczba pikseli zwykle oznacza większy plik, ale na wagę wpływa również format, stopień kompresji i zawartość grafiki.
W responsywnym układzie szerokość ma zazwyczaj większe znaczenie niż wysokość. To ona decyduje, czy obraz zmieści się w kolumnie, treści wpisu albo na pełnej szerokości ekranu. Wysokość dobierz do proporcji grafiki, na przykład 16:9, 4:3 lub 1:1.
| Typ grafiki | Szerokość (px) | Zastosowanie |
|---|---|---|
| Pełnoekranowe tło lub duży baner | 1600–1920 px | Grafika rozciągnięta na szerokość ekranu |
| Zdjęcie w treści wpisu | 1000–1200 px | Blog, strona firmowa, artykuł |
| Grafika w węższej kolumnie | 700–900 px | Układ z panelem bocznym lub kilkoma kolumnami |
| Miniatura wpisu lub produktu | 300–600 px | Listy wpisów, siatki produktów, zajawki |
Obraz o szerokości ponad 2000 px jest na standardowym blogu najczęściej niepotrzebny. Wyjątkiem może być fotografia przeznaczona do dużego tła, galerii albo wyświetlania na ekranach o wysokiej gęstości pikseli. Nawet wtedy nie ma sensu przechowywać surowego pliku o szerokości 6000 px, jeśli motyw pokazuje go maksymalnie na 1920 px.
Jaka powinna być waga pliku?
Waga obrazu wpływa bezpośrednio na ilość danych, które przeglądarka musi pobrać. Dlatego zdjęcie o wymiarach 1200 × 800 px może ładować się szybciej niż większy plik o podobnej zawartości, ale sama rozdzielczość nie wystarczy do oceny optymalizacji.
Dla dużych zdjęć jako cel przyjmij 150–200 KB. Mniejsze grafiki, miniatury i proste ilustracje powinny ważyć zwykle kilkadziesiąt kilobajtów lub mniej. To wartości orientacyjne, a nie sztywne limity. Fotografia z dużą liczbą szczegółów może wymagać nieco większego pliku niż prosta grafika z jednolitym tłem.
Przy wyborze formatu kieruj się rodzajem obrazu:
- WebP – pierwszy wybór dla zdjęć i większości grafik internetowych, ponieważ zwykle zapewnia korzystny stosunek jakości do wagi.
- JPG – dobry format dla fotografii, gdy WebP nie jest dostępny lub potrzebujesz klasycznego pliku rastrowego.
- PNG – przydatny przy przezroczystym tle, zrzutach ekranu, ilustracjach i grafikach z tekstem, ale często waży więcej niż JPG lub WebP.
- SVG – właściwy dla prostych ikon, logotypów i ilustracji wektorowych, jeśli motyw oraz konfiguracja strony pozwalają bezpiecznie go używać.
WebP może zastąpić JPG w przypadku fotografii oraz PNG w wielu grafikach wymagających przezroczystości. Nie oznacza to jednak, że każdy obraz w tym formacie automatycznie będzie lekki. Nadal trzeba ograniczyć jego wymiary i dobrać poziom kompresji. Po przygotowaniu pliku sprawdź jego wygląd na komputerze i telefonie.
Jak WordPress zarządza rozmiarami obrazów?
Po przesłaniu pliku WordPress zwykle tworzy kilka jego wariantów. Podstawowe wartości można znaleźć w panelu w sekcji Ustawienia → Media. W typowej instalacji spotyka się między innymi miniaturę o szerokości 150 px, rozmiar średni do 600 px oraz duży do 1024 px. Konkretne ustawienia mogą różnić się zależnie od wersji i konfiguracji strony.
Te wartości dotyczą automatycznie generowanych wariantów, a niekoniecznie oryginalnego pliku. WordPress nie zastępuje nim zdjęcia źródłowego, dlatego duży plik wgrany z aparatu nadal może zajmować miejsce i zostać użyty przez motyw lub wtyczkę.
Ustawienia motywu często mają większe znaczenie niż domyślne ustawienia WordPressa. Motyw może dodawać własne rozmiary, przycinać obrazy albo wybierać określony wariant do zdjęcia wyróżniającego. Sprawdź jego dokumentację lub ustawienia wyglądu, zanim zmienisz wartości w sekcji Media.
Jeśli zmienisz rozmiary generowanych obrazów, nowe ustawienia dotyczą przede wszystkim kolejnych uploadów. Wcześniej przesłane pliki mogą wymagać ponownego wygenerowania wariantów, na przykład za pomocą narzędzia Regenerate Thumbnails. Przed taką operacją wykonaj kopię zapasową i sprawdź, czy motyw rzeczywiście korzysta z nowych rozmiarów.
Jak przygotować obraz przed wgraniem?
Najprostsza ścieżka wygląda następująco:
- Przytnij zdjęcie do kompozycji i proporcji wymaganych przez miejsce, w którym ma się pojawić.
- Przeskaluj je do szerokości odpowiedniej dla danego elementu, na przykład 1200 px dla treści wpisu albo 1920 px dla pełnoekranowego tła.
- Zapisz fotografię jako WebP, a jeśli nie jest to możliwe, użyj JPG. PNG zostaw dla grafiki z przezroczystością lub dużą ilością tekstu.
- Skompresuj plik i sprawdź, czy jego waga mieści się w zakresie około 150–200 KB przy dużym zdjęciu.
- Wstaw w treści wariant odpowiadający rzeczywistej szerokości wyświetlania, zamiast wybierać pełny oryginał.
WordPress i motyw mogą obsługiwać responsywne obrazy oraz lazy loading, czyli opóźnione ładowanie grafik znajdujących się poza początkowym widokiem. Nie zastępuje to jednak właściwego skalowania. Najlepszy efekt daje połączenie właściwych wymiarów, lekkiego formatu i kompresji. Wynik możesz sprawdzić w Google PageSpeed Insights, zwracając uwagę między innymi na wpływ obrazów na Core Web Vitals.
Złota zasada jest prosta: przygotuj zdjęcie w rozmiarze, w jakim faktycznie będzie wyświetlane, a nie w pełnej rozdzielczości z aparatu.
