Jak poprawnie dodawać obrazy do WordPressa — rozmiar, kompresja, alt text, tytuł, podpis

Największy problem z dodawaniem obrazów do stron WordPress polega na tym, że wiele osób skupia się wyłącznie na tym, co jest na grafice. Oczywiście to ważne, bo od zdjęcia, ilustracji albo zrzutu ekranu zależy zainteresowanie odbiorcy i pierwsze wrażenie. Ale jeśli obraz ma naprawdę pracować na stronę, musi być przygotowany także technicznie: powinien mieć odpowiedni format, rozsądny rozmiar, małą wagę, poprawny tekst alternatywny i kontekst w treści. Dopiero wtedy wspiera szybkość strony, dostępność, SEO, widoczność w Google Grafika i wygodę użytkownika.

Do większości zdjęć na stronie WordPress najlepszym wyborem będzie dziś WebP. AVIF warto rozważyć przy mocnej optymalizacji i dużych zdjęciach, a PNG zostawić głównie do grafik wymagających przezroczystości lub bezstratnej jakości. Format to jednak dopiero początek — równie ważne są rozmiar, kompresja, alt text i sposób osadzenia obrazu w treści.

Jeśli chcesz pogłębić temat, zobacz także wcześniejsze poradniki: optymalizacja obrazów WordPress — jak zacząć, optymalizacja obrazów w WordPressie oraz atrybut alt obrazka i jego znaczenie dla SEO.

Tworzysz stronę na WordPressie? Wybierz hosting SEOHOST dla WordPress z obsługą LiteSpeed i Redis w cenie. Jeśli startujesz z nowym projektem, sprawdź także domeny internetowe w SEOHOST.

Obraz w WordPressie to nie tylko dekoracja

Owszem! Obraz na stronie ma przyciągnąć uwagę, ułatwić zrozumienie treści i zatrzymać użytkownika. Natomiast to część komunikacji, a nie tylko ozdobnik. No dobrze, ale co, jeśli grafika jest ok? Zaczyna się nowy problemm - grafika dobrze wygląda, ale ma kilka megabajtów, złą nazwę pliku, brak tekstu alternatywnego i została wrzucona w formacie, który nie pasuje do jej zastosowania.

Wtedy obraz może działać przeciwko stronie. Spowalnia ładowanie, pogarsza doświadczenie użytkownika, utrudnia indeksowanie grafiki i nie wspiera treści tak dobrze, jak powinien.

Dlatego poprawne dodawanie obrazów do WordPressa obejmuje kilka elementów:

• wybór odpowiedniego formatu pliku,
• dopasowanie rozdzielczości do miejsca wyświetlania,
• kompresję obrazu,
• uzupełnienie tekstu alternatywnego,
• przemyślany podpis lub opis, jeśli obraz tego wymaga.

Nie chodzi o perfekcję przy każdym pliku. Chodzi o to, aby nie wrzucać na stronę przypadkowych grafik prosto z telefonu, aparatu lub programu graficznego bez żadnego przygotowania.

Jaki format obrazów wybrać do WordPressa?

Nie ma jednego formatu najlepszego do wszystkiego. Inaczej przygotujesz zdjęcie produktu, inaczej logo, inaczej zrzut ekranu, a jeszcze inaczej grafikę z przezroczystym tłem. W praktyce najważniejsze formaty to dziś JPG, PNG, WebP, AVIF i SVG.

Dla większości użytkowników WordPressa najlepszym domyślnym wyborem będzie WebP. Jest nowoczesny, lekki i dobrze sprawdza się przy zdjęciach oraz grafikach używanych w treściach blogowych, stronach firmowych, portfolio i opisach produktów.

Format WebP czy AVIF — co wybrać?

Wspomnieliśmy o WebP, ale WordPress obsługuje WebP od wersji 5.8, więc pliki WebP możesz dodawać do biblioteki mediów podobnie jak JPG lub PNG. To dobry format na start, szczególnie jeśli chcesz poprawić wagę obrazów bez komplikowania całego procesu.

Natomiast AVIF jest nowszym formatem i potrafi dawać jeszcze lepszą kompresję. WordPress obsługuje AVIF od wersji 6.5, ale w praktyce znaczenie ma też hosting i biblioteki graficzne dostępne na serwerze. Jeśli środowisko nie obsługuje AVIF, możesz mieć problem z miniaturami, skalowaniem lub edycją obrazów.

Nasza rekomendacja wygląda mniej więcej tak: 

• wybierz WebP, jeśli chcesz dobrego i bezpiecznego standardu dla większości obrazów,
• wybierz AVIF, jeśli zależy Ci na maksymalnej kompresji i masz środowisko, które dobrze go obsługuje,
• używaj PNG wtedy, gdy potrzebujesz przezroczystości, ostrego zrzutu ekranu albo bezstratnej jakości,
• nie używaj PNG jako domyślnego formatu do zwykłych zdjęć.

Uwaga: sam wybór WebP lub AVIF nie rozwiązuje wszystkiego. Obraz nadal może być zbyt duży wymiarami, źle opisany, niepotrzebnie ciężki albo dodany w miejscu, w którym spowalnia pierwsze wczytanie strony.

Jaki rozmiar obrazów dodawać do WordPressa?

Najczęstszy błąd to wrzucanie zdjęć prosto z aparatu lub telefonu, np. o szerokości 4000–6000 px. Takie zdjęcie rzadko jest potrzebne na stronie. Jeśli główny kontener treści ma 900 px szerokości, obraz o szerokości 5000 px nie daje użytkownikowi większej wartości, ale zwiększa wagę pliku.

Nie ma jednej idealnej szerokości dla wszystkich stron. Rozmiar zależy od motywu, układu strony, miejsca wyświetlania i typu grafiki.

WordPress sam generuje różne rozmiary obrazów i wykorzystuje mechanizmy responsywnych obrazów, ale nie oznacza to, że możesz bezkarnie dodawać ogromne pliki. Im lepiej przygotujesz obraz przed wysłaniem do biblioteki mediów, tym mniej pracy zostawiasz WordPressowi, serwerowi i przeglądarce użytkownika.

Kompresja obrazów — po co i kiedy?

Kompresja polega na zmniejszeniu wagi obrazu. Może być stratna lub bezstratna. W kompresji stratnej plik staje się mniejszy kosztem części danych obrazu, ale przy rozsądnych ustawieniach użytkownik zwykle nie widzi wyraźnej różnicy. W kompresji bezstratnej plik jest zmniejszany bez pogorszenia jakości, ale efekt bywa mniejszy.

Kompresja jest szczególnie ważna przy:

• dużych zdjęciach w nagłówkach,
• galeriach realizacji,
• portfolio fotograficznym,
• sklepach internetowych,
• wpisach blogowych z wieloma ilustracjami,
• stronach mobilnych, gdzie transfer i czas ładowania mają duże znaczenie.

Oczywiście pamiętaj, że możesz kompresować obrazy przed dodaniem do WordPressa, np. w narzędziach graficznych lub online. Możesz też użyć wtyczek, które optymalizują obrazy po stronie WordPressa. Wtyczki są przydatne wtedy, gdy wielu redaktorów dodaje grafiki i trudno pilnować każdego pliku ręcznie.

Dobra zasada: jeśli sam przygotowujesz kilka obrazów, możesz zmniejszyć je i skompresować przed uploadem. Jeśli prowadzisz większy blog, sklep albo stronę redakcyjną, wtyczka do optymalizacji obrazów będzie wygodniejsza, bo pomoże utrzymać porządek na większą skalę.

Co daje LiteSpeed, a czego nie zrobi Redis?

LiteSpeed może bardzo pomóc przy wydajności WordPressa. Wtyczka LiteSpeed Cache oferuje m.in. cache strony oraz funkcje optymalizacji obrazów, w tym zmniejszanie plików i automatyzację części pracy. To duża zaleta, szczególnie przy stronach z wieloma grafikami.

Nie oznacza to jednak, że można wrzucać dowolnie duże zdjęcia i liczyć, że serwer wszystko naprawi. LiteSpeed pomaga zoptymalizować i szybciej serwować stronę, ale najlepsze efekty daje dopiero wtedy, gdy obrazy są sensownie przygotowane: mają dobry format, rozsądny rozmiar i właściwą kompresję.

Redis działa inaczej. Redis jako object cache pomaga WordPressowi szybciej obsługiwać dane i zapytania, ale nie zmniejsza rozmiaru plików graficznych. Nie zamieni JPG na WebP, nie dopisze altów i nie skompresuje zdjęcia. To inna warstwa optymalizacji.

Oferta SEOHOST: jeśli zależy Ci na szybkim WordPressie, sprawdź hosting SEOHOST dla WordPress z obsługą LiteSpeed i Redis w cenie. LiteSpeed wspiera cache i optymalizację, a Redis pomaga przy wydajności zapytań i pracy WordPressa.

Alt text, tytuł, podpis i opis obrazka

Kolejna kwestia to atrybuty obrazków.

Przy dodawaniu obrazu w WordPressie zobaczysz kilka pól: tekst alternatywny, tytuł, podpis i opis. Każde z nich ma inną rolę. Najważniejsze z punktu widzenia dostępności i SEO obrazów jest pole alt.

Alt text powinien opisywać obraz w kontekście strony. Nie powinien być listą słów kluczowych. Jeśli obraz pokazuje konkretne rozwiązanie, produkt, sytuację albo element instrukcji, opisz to prosto i naturalnie.

Przykład złego alta:

rolety plisy Szczecin tanio najlepsze rolety okienne promocja

Przykład lepszego alta:

Plisy okienne zamontowane w jasnym salonie przy dużym oknie.

Tytuł obrazka ma mniejsze znaczenie. Pomaga w organizacji biblioteki mediów, ale nie zastępuje tekstu alternatywnego. Podpis warto dodać wtedy, gdy użytkownik potrzebuje dodatkowego kontekstu, np. przy zrzucie ekranu, zdjęciu realizacji, wykresie, instrukcji lub galerii.

Więcej o tym, jak pisać alty i czego unikać, opisaliśmy tutaj: atrybut alt obrazka i jego znaczenie dla SEO.

Najczęstsze błędy przy dodawaniu obrazów

Najczęstsze błędy nie wynikają z braku specjalistycznej wiedzy, ale z pośpiechu. Użytkownik znajduje zdjęcie, wrzuca je do biblioteki mediów, dodaje do wpisu i publikuje. Strona wygląda poprawnie, ale technicznie obraz jest za ciężki, źle nazwany i nieopisany.

• Dodawanie zdjęć prosto z telefonu lub aparatu bez zmniejszenia rozmiaru.
• Używanie PNG do zwykłych zdjęć, które lepiej zapisać jako WebP lub JPG.
• Brak tekstu alternatywnego przy obrazach ważnych dla treści.
• Nazwy plików typu IMG_4839.jpg zamiast opisowych nazw.
• Dodawanie zbyt wielu obrazów w jednej galerii bez kompresji.
• Wstawianie ciężkich grafik w sekcjach hero i sliderach.
• Traktowanie tytułu obrazka jako zamiennika alt textu.

Uwaga: obraz może wyglądać dobrze i jednocześnie szkodzić stronie. Jeśli jest zbyt ciężki, ładuje się długo albo nie ma opisu, traci część swojego potencjału dla UX, SEO i dostępności.

Przy większej stronie warto połączyć dobre nawyki redakcyjne z techniczną optymalizacją. Więcej o pierwszych krokach przeczytasz w poradniku: optymalizacja obrazów WordPress — jak zacząć. Jeśli zależy Ci na szybkości strony, sprawdź też: optymalizacja obrazów w WordPressie i przyspieszenie strony.

Budujesz nowy projekt? Zarejestruj domenę internetową w SEOHOST i uruchom stronę na hostingu dla WordPress. To dobry start dla bloga, strony firmowej, portfolio, sklepu internetowego i serwisu z dużą liczbą obrazów.

Jak widzisz, poprawne dodawanie obrazów do WordPressa nie polega na wyborze jednego magicznego formatu. Chodzi o cały proces: dobry obraz, właściwy format, rozsądny rozmiar, kompresję, alt text i kontekst. Dzięki temu grafika nie tylko dobrze wygląda, ale też wspiera szybkość strony, dostępność, SEO i wygodę użytkownika.