Zdjęcia na stronie internetowej mają dwa wymiary, które łatwo ze sobą pomylić: rozmiar w pikselach i proporcje kadru. Oba wpływają na wygląd strony, ale każdy z nich robi to inaczej. Poniżej wyjaśniamy, czym się różnią i jak dobrać parametry zdjęć, żeby strona ładowała się szybko i wyglądała dobrze na każdym urządzeniu.
Rozmiar zdjęcia w pikselach – czym jest i dlaczego ma znaczenie
Rozmiar w pikselach określa, ile punktów obrazu zawiera plik zdjęcia. Zdjęcie o wymiarach 1920 × 1080 px ma 1920 punktów szerokości i 1080 punktów wysokości. Im więcej pikseli, tym większy plik i tym dłużej się ładuje.
Dla stron internetowych nie ma jednego uniwersalnego rozmiaru, bo zależy on od miejsca, w którym zdjęcie będzie użyte:
- Baner główny (hero) – zazwyczaj 1920 × 800 px lub 1920 × 1080 px dla pełnoekranowych sekcji
- Zdjęcie w treści artykułu – szerokość kolumny to zwykle 700–1200 px, wysokość dopasowana do proporcji
- Miniatura produktu w sklepie WooCommerce – często 600 × 600 px lub 800 × 800 px
- Miniatura wpisu blogowego – zależnie od motywu, najczęściej 400–800 px szerokości
- Logo i ikony – wystarczy 200–400 px szerokości, ale warto mieć wersję SVG
Ogólna zasada jest prosta: zdjęcie powinno być nie większe niż potrzeba. Wysyłanie pliku 4000 × 3000 px na miejsce, gdzie wyświetla się 800 × 600 px, to strata czasu i transferu bez żadnego zysku jakościowego.
Proporcje zdjęcia – czym są i jak wpływają na wygląd strony
Proporcje to stosunek szerokości do wysokości obrazu, zapisywany jako para liczb, np. 16:9, 4:3 lub 1:1. Proporcje nie mówią nic o tym, jak duży jest plik – mówią tylko o jego kształcie.
Zdjęcie 1920 × 1080 px i zdjęcie 800 × 450 px mają dokładnie te same proporcje (16:9), ale zupełnie inny rozmiar pliku. To ważne rozróżnienie, bo motyw WordPressa zazwyczaj wymusza konkretne proporcje w danym miejscu – jeśli wstawisz zdjęcie o innych proporcjach, zostanie ono przycięte lub zniekształcone.
Najczęściej stosowane proporcje na stronach internetowych
- 16:9 – banery, sekcje hero, thumbnails wideo; szerokie i poziome
- 4:3 – klasyczne zdjęcia ze starszych aparatów, galerie
- 1:1 – kwadrat, popularny w sklepach i mediach społecznościowych
- 3:2 – standard w lustrzankach, dobrze sprawdza się w artykułach
- 2:3 lub 3:4 – pionowe kadry, użyteczne na mobile-first
Jaki format pliku wybrać
Rozmiar i proporcje to nie jedyne parametry. Format pliku decyduje o tym, ile waży gotowe zdjęcie po zapisaniu.
- WebP – aktualnie najlepszy wybór dla stron internetowych; mniejszy rozmiar pliku niż JPEG przy porównywalnej jakości; obsługiwany przez wszystkie nowoczesne przeglądarki
- JPEG – sprawdzone, szerokie wsparcie, dobre dla fotografii; wymaga ręcznej kompresji przed wgraniem
- PNG – zachowuje przezroczystość, ale pliki są ciężkie; używaj tylko tam, gdzie naprawdę jest potrzebna przezroczystość
- SVG – idealny dla logotypów, ikon i prostych grafik; skaluje się bez utraty jakości
Jak przygotować zdjęcia przed wgraniem do WordPressa
WordPress automatycznie tworzy kilka wersji każdego wgranego zdjęcia (thumbnails), ale nie zmniejszy pliku, który jest za duży – po prostu wgra go w oryginalnym rozmiarze. Dlatego warto zadbać o kilka rzeczy przed wgraniem:
- Przytnij zdjęcie do proporcji wymaganych przez motyw lub projekt.
- Zmień rozmiar w pikselach do maksymalnej szerokości, jaka jest wymagana w danym miejscu – zazwyczaj 1920 px dla banerów i 1200 px dla treści.
- Zapisz plik w formacie WebP lub skompresuj JPEG do 70–80% jakości.
- Sprawdź wagę pliku – zdjęcie do artykułu nie powinno przekraczać 150–200 KB, baner 300–400 KB.
- Zadbaj o opisową nazwę pliku i atrybut alt po wgraniu.
Podsumowanie: rozmiar vs. proporcje
Rozmiar w pikselach decyduje o wadze pliku i ostrości obrazu w konkretnym miejscu na stronie. Proporcje decydują o kształcie kadru i o tym, czy zdjęcie pasuje do layoutu bez przycinania. Oba parametry trzeba ustawić świadomie – najlepiej zanim plik trafi do WordPressa, bo późniejsze poprawki są trudniejsze i nie zawsze skuteczne.
Dobrze przygotowane zdjęcia szybciej się ładują, lepiej wyglądają na urządzeniach mobilnych i nie wymagają dodatkowych wtyczek do optymalizacji. To jeden z najprostszych sposobów na poprawę wydajności strony bez zmian w kodzie.
FAQ - najczęstsze pytania
Czy WordPress sam optymalizuje zdjęcia po wgraniu?
WordPress tworzy automatycznie kilka pomniejszonych wersji zdjęcia, ale nie kompresuje oryginału ani nie zmienia jego formatu. Plik wgrany w rozmiarze 8 MB zostanie zapisany w bibliotece mediów bez zmian, co może spowalniać stronę. Kompresję i zmianę rozmiaru najlepiej wykonać przed wgraniem, nie liczyć na to, że zrobi to system.
Kiedy warto używać PNG zamiast WebP lub JPEG?
PNG ma sens głównie wtedy, gdy grafika wymaga przezroczystego tła, na przykład logo nakładane na różne kolory sekcji. W pozostałych przypadkach WebP oferuje mniejszy rozmiar pliku przy porównywalnej jakości wizualnej. Używanie PNG do zwykłych zdjęć fotograficznych to jeden z częstszych błędów powodujących zbędne obciążenie strony.
Co się dzieje ze zdjęciem, gdy jego proporcje nie pasują do miejsca w motywie?
Motyw WordPress zazwyczaj wymusza konkretne proporcje w danym obszarze, np. w siatce produktów czy sekcji hero. Jeśli wgrane zdjęcie ma inne proporcje, zostanie automatycznie przycięte przez CSS lub przez mechanizm generowania miniatur. W efekcie część kadru znika, a ważny element kompozycji może być niewidoczny dla użytkownika.
Czy nazwa pliku zdjęcia ma znaczenie dla SEO?
Tak, opisowa nazwa pliku pomaga wyszukiwarkom zrozumieć kontekst obrazu, szczególnie w wynikach Google Images. Zamiast IMG_4872.jpg lepiej użyć np. baner-strony-internetowej-warszawa.webp. Podobną rolę pełni atrybut alt, który dodatkowo wspiera dostępność dla użytkowników korzystających z czytników ekranu.
Jak sprawdzić, jaki rozmiar zdjęcia wymaga konkretny motyw WordPress?
Większość motywów dokumentuje zalecane rozmiary w panelu dostosowywania lub w dokumentacji producenta. Można też sprawdzić rzeczywiste wymiary renderowanego miejsca za pomocą narzędzi deweloperskich przeglądarki, oglądając wartość CSS elementu img lub kontenera nadrzędnego. To szybszy i dokładniejszy sposób niż zgadywanie na podstawie ogólnych rekomendacji.
Czy zdjęcia wpływają na ocenę Core Web Vitals?
Tak, zbyt ciężkie lub źle skonfigurowane zdjęcia bezpośrednio obniżają wskaźnik LCP (Largest Contentful Paint), który mierzy czas ładowania największego widocznego elementu strony. Google uwzględnia Core Web Vitals jako jeden z sygnałów rankingowych, więc optymalizacja zdjęć ma konsekwencje nie tylko wizualne, ale też dla widoczności w wynikach wyszukiwania.