Najlepszy efekt dają obrazy, które wspierają treść, a nie tylko ją ozdabiają
- Najmocniej działają zdjęcia własne, zrzuty ekranu, ikony i ilustracje dopasowane do konkretnej sekcji.
- W WordPressie liczą się przede wszystkim format pliku, rzeczywisty rozmiar w pikselach i kompresja.
- Dla większości zdjęć najlepszy wybór to WebP lub AVIF, a dla logo i ikon SVG.
- Alt text ma opisywać obraz w kontekście strony, a nie być miejscem na upychanie słów kluczowych.
- Najczęstsze błędy to ciężkie pliki, stockowe klisze, brak spójności wizualnej i lazy load na najważniejszym obrazie.
Jakie grafiki naprawdę mają sens na stronie WordPress
W praktyce nie każda grafika pracuje tak samo. Na stronie firmowej, blogu albo landing page najlepiej działają obrazy, które coś wyjaśniają: pokazują produkt, usługę, proces, efekt przed i po albo po prostu budują zaufanie, bo są autentyczne. Jeśli obraz nie pomaga czytelnikowi szybciej zrozumieć oferty, zwykle jest tylko dekoracją.
Ja najczęściej dzielę wizualia na pięć grup. Pierwsza to hero image, czyli główny obraz nad pierwszym ekranem. Druga to zdjęcia wspierające treść: zespół, realizacje, detale produktu, fragmenty pracy. Trzecia to zrzuty ekranu i makiety, które świetnie pasują do artykułów o WordPressie, SEO i tworzeniu stron WWW. Czwarta to ikony i proste ilustracje, które porządkują sekcje. Piąta to elementy zaufania, czyli certyfikaty, opinie, case studies i zdjęcia pokazujące realny kontekst działania firmy.
Na stronach opartych o WordPress szczególnie dobrze sprawdzają się screeny z panelu, edytora blokowego, konfiguracji wtyczek i gotowych wdrożeń. Takie materiały nie tylko wyglądają konkretnie, ale też natychmiast pokazują, że treść opiera się na praktyce, a nie na ogólnikach. Gdy dobiorę już typ obrazu do celu, przechodzę do źródła i licencji, bo to wpływa zarówno na koszt, jak i na wiarygodność.
Skąd brać grafiki i kiedy które źródło ma sens
Nie ma jednego najlepszego źródła. Na stronie usługowej często wygrywa miks: własne zdjęcia tam, gdzie liczy się zaufanie, ilustracje tam, gdzie trzeba uprościć trudny temat, i stock tylko wtedy, gdy nie zaburza autentyczności. Przy doborze źródła patrzę głównie na to, czy obraz ma sprzedawać, tłumaczyć czy tylko porządkować układ strony.
| Źródło | Kiedy się sprawdza | Plusy | Ograniczenia | Koszt orientacyjny |
|---|---|---|---|---|
| Własne zdjęcia i zrzuty ekranu | Usługi, zespół, realizacje, tutoriale, case studies | Autentyczność, unikalność, większe zaufanie | Wymagają czasu i podstawowej jakości wykonania | 0 zł przy pracy własnej; od kilkuset do kilku tysięcy zł za sesję |
| Banki zdjęć | Blogi, landing page, sekcje koncepcyjne, tła, sceny ogólne | Szybki wybór, duży katalog, prosty zakup licencji | Powtarzalność i ryzyko „stockowego” wyglądu | Od kilkunastu zł za plik do kilkudziesięciu lub kilkuset zł miesięcznie |
| Ilustracje i ikony | Procesy, funkcje, puste stany, sekcje edukacyjne | Lekkość, spójność, łatwe skalowanie | Trzeba pilnować jednego stylu graficznego | Od 0 zł do kilku tysięcy zł za pakiet lub bibliotekę |
| Grafiki generowane przez AI | Moodboardy, szybkie warianty, koncepty, szkice kierunku wizualnego | Niski próg wejścia, szybkie eksperymenty | Ryzyko niespójności, potrzeba selekcji i ostrożności licencyjnej | Zwykle od kilkunastu do kilkudziesięciu zł miesięcznie plus czas na korekty |
| Projekt od grafika lub fotografa | Strona główna, ważne kampanie, marki premium, sklepy i usługi wysokiej wartości | Najlepsze dopasowanie do marki i największa kontrola nad jakością | Wyższy budżet i dłuższy czas realizacji | Od kilkuset zł za pojedynczy element do kilku tysięcy zł za większy zakres |
Jeśli strona ma sprzedawać usługi, zwykle najlepiej działa prosta zasada: własne zdjęcia na górze, ilustracje do wyjaśniania procesu, a banki zdjęć tylko tam, gdzie nie psują autentyczności. Taki układ jest bardziej wiarygodny niż strona złożona wyłącznie z przypadkowych stocków, nawet jeśli te stocki są technicznie dobre. Kiedy mam już źródła, przechodzę do formatu, bo od niego zależy szybkość ładowania i jakość wyświetlania.
Jak dobrać format, rozmiar i wagę pliku
Jak przypomina web.dev, obrazy bardzo często należą do najcięższych zasobów strony, więc nie wystarczy po prostu „wrzucić lepszego pliku”. Trzeba dobrać format do typu grafiki, a potem dopasować ją do realnego miejsca wyświetlenia. To właśnie tutaj najczęściej robi się największy zysk bez przebudowy całej witryny.
| Format | Najlepsze zastosowanie | Mocne strony | Na co uważać |
|---|---|---|---|
| JPEG | Zdjęcia, fotografia produktowa, obrazy z dużą liczbą kolorów | Dobra kompresja, szerokie wsparcie | Brak przezroczystości, stratna kompresja przy zbyt niskiej jakości |
| PNG | Logo, zrzuty ekranu, grafiki z przezroczystością | Ostre krawędzie, przezroczystość | Zwykle cięższy niż WebP lub AVIF, słaby wybór dla zdjęć |
| WebP | Większość zdjęć, ilustracji i elementów marketingowych | Dobry balans jakości i wagi | Warto sprawdzić, czy pipeline i wtyczki obsługują go poprawnie |
| AVIF | Zdjęcia, duże sekcje hero, galerie, grafiki, w których liczy się każdy kilobajt | Bardzo dobra kompresja przy wysokiej jakości | Wolniejsze kodowanie i potrzeba wsparcia po stronie narzędzi |
| SVG | Ikony, logo, proste ilustracje wektorowe | Skalowanie bez utraty jakości, mały rozmiar | Nie nadaje się do fotografii, plik powinien być czysty i bez zbędnych elementów |
| GIF | Proste animacje, których nie da się łatwo zastąpić czymś lepszym | Prosta obsługa ruchu | W praktyce bywa bardzo ciężki, zwykle lepiej zastąpić go wideo |
Jeśli mam uprościć wybór, to dla większości zdjęć stawiam dziś na WebP, a tam, gdzie chcę wycisnąć maksimum z rozmiaru pliku, sięgam po AVIF. JPEG zostawiam jako format źródłowy lub zapasowy, PNG tylko tam, gdzie naprawdę potrzebuję przezroczystości, a SVG traktuję jako standard dla ikon i logo. W praktyce równie ważna jak format jest też waga pliku: dla obrazów w treści często celuję w okolice 80-150 KB, dla dużych sekcji hero raczej 150-300 KB, a dla ikon w SVG liczę już nie na kilobajty, tylko na ich symboliczny rozmiar. Gdy format jest ustawiony rozsądnie, przechodzę do sposobu wdrożenia w WordPressie.
Jak przygotować grafiki pod WordPress i Core Web Vitals
WordPress ma dziś sensowne mechanizmy do obsługi obrazów, ale trzeba z nich korzystać świadomie. Od lat generuje responsywne warianty przez `srcset` i `sizes`, więc przeglądarka może pobrać plik dopasowany do urządzenia. Od wersji 5.8 wspiera WebP, a od 6.5 także AVIF, więc w dobrze skonfigurowanym środowisku nie muszę już ręcznie kombinować z każdym formatem osobno.
Przeczytaj również: Blog internetowy na WordPressie - Jak zacząć i ile kosztuje?
Co ustawiam najpierw
- Wgrywam plik w rozmiarze zbliżonym do realnego miejsca wyświetlenia, zamiast wrzucać ogromny oryginał prosto z aparatu.
- Sprawdzam, czy obraz ma poprawne proporcje i czy nie będzie rozciągany przez motyw.
- Zostawiam atrybuty `width` i `height`, żeby przeglądarka mogła zarezerwować miejsce i ograniczyć przesunięcia układu.
- Włączam lazy loading dla obrazów poniżej pierwszego ekranu, ale nie dla najważniejszego obrazu nad foldem.
- Po zmianie motywu albo szablonu przegenerowuję miniatury, żeby stara biblioteka mediów nie mieszała się z nowymi rozmiarami.
- Przy większych bibliotekach korzystam z wtyczki lub mechanizmu, który automatycznie konwertuje zdjęcia do lżejszych formatów.
To ma znaczenie przede wszystkim dla LCP i CLS. LCP mówi o tym, kiedy użytkownik widzi główną treść strony, a CLS o tym, czy układ nie „skacze” podczas ładowania. Najczęściej psują je właśnie źle przygotowane grafiki: za ciężkie, za duże albo pozbawione wymiarów. Jeżeli technika jest już dopięta, dopiero wtedy przechodzę do opisów, bo SEO i dostępność zaczynają działać najlepiej wtedy, gdy obraz jest już dobrze podany przeglądarce.
Jak opisywać grafiki, żeby pomagały SEO i dostępności
Google Search Central podkreśla, że alt text ma być użyteczny i osadzony w kontekście strony, a nie sztucznie napakowany słowami kluczowymi. Ja stosuję tę zasadę bardzo prosto: opis ma pomóc zrozumieć obraz temu, kto go nie widzi, i jednocześnie nie brzmi jak lista fraz z arkusza SEO.
- Alt text opisuje sens obrazu, nie jego dekoracyjną formę.
- Jeśli grafika jest wyłącznie ozdobą, alt może być pusty, żeby nie rozpraszać czytników ekranu.
- Nazwa pliku powinna być czytelna, na przykład `edytor-blokowy-wordpress.jpg`, a nie `IMG_4832.jpg`.
- Podpis pod zdjęciem dodaję tylko wtedy, gdy wnosi kontekst, a nie po to, by zapełnić miejsce.
- Jeśli ten sam obraz występuje w kilku sekcjach, dopasowuję opis do konkretnego kontekstu, a nie kopiuję jeden wzorzec wszędzie.
- W serwisach z dużą liczbą materiałów warto zadbać o mapę obrazów, bo ułatwia to ich odkrywanie przez wyszukiwarki.
Najczęstsze błędy, które widzę na stronach
W większości audytów obrazów problem nie leży w jednej spektakularnej pomyłce, tylko w serii drobnych zaniedbań. Każde z nich samo w sobie wydaje się małe, ale razem potrafią zrobić z dobrej strony wolną, chaotyczną i mało przekonującą witrynę.
- Wgrywanie zdjęć o szerokości 4000-6000 px tylko dlatego, że „lepiej wyglądają w oryginale”.
- Używanie PNG do fotografii, mimo że to zwykle najgorszy wybór pod względem wagi.
- Wklejanie stocków, które wyglądają jak z tej samej galerii co setki innych stron.
- Wrzucanie wielu różnych stylów graficznych na jedną podstronę bez wspólnej osi wizualnej.
- Włączanie lazy load na pierwszy, najważniejszy obraz, co opóźnia widoczny efekt.
- Brak `width` i `height`, który prowadzi do przesunięć układu podczas ładowania.
- Osadzanie ważnych informacji bezpośrednio w grafice, przez co tracą czytelność na mobile i są słabo dostępne.
- Powielanie tych samych zdjęć w różnych sekcjach tylko po to, by „coś było widać”.
Najbardziej niebezpieczny jest chyba ostatni błąd, bo strona formalnie wygląda „bogato”, ale treściowo nic nie wnosi. Jeśli widzę taki układ, zwykle upraszczam go zamiast dokładać kolejne obrazy. I właśnie dlatego ostatni krok to priorytetyzacja: co poprawić najpierw, żeby efekt był widoczny szybko, bez przebudowy całej strony.
Co poprawić najpierw, żeby zobaczyć efekt bez przebudowy całej strony
Jeśli mam tylko kilka godzin, zaczynam od rzeczy, które dają największy zwrot. Nie od wszystkich obrazów naraz, tylko od tych, które mają największy wpływ na odbiór strony i jej szybkość. W praktyce działa tu prosta kolejność:
- Upraszczam grafikę nad pierwszym ekranem i zostawiam tylko jedną mocną, dobrze skompresowaną sekcję hero.
- Konwertuję zdjęcia w treści do WebP albo AVIF, jeśli środowisko WordPressa i hosting to wspierają.
- Sprawdzam, czy logo, ikony i proste ilustracje są w SVG.
- Porządkuję nazwy plików i alt text, żeby każdy obraz miał sensowny opis.
- Wyłączam lazy load dla kluczowego obrazu, jeśli spowalnia ładowanie głównej treści.
- Porównuję widok mobilny i desktopowy, bo to właśnie mobile najczęściej obnaża źle dobrane proporcje.
Jeżeli miałbym zostawić jedną zasadę, byłaby bardzo prosta: obrazy mają pomagać użytkownikowi przejść przez stronę szybciej i pewniej. Dobrze zaplanowane grafiki na stronę internetową nie są dodatkiem na końcu projektu, tylko częścią architektury treści, która wpływa na odbiór marki, tempo ładowania i skuteczność całej witryny.
