Grafika na stronie może zrobić robotę: pokazać produkt, ocieplić ofertę albo wyjaśnić coś szybciej niż trzy akapity tekstu. Może też jednak spowolnić stronę, rozjechać się na telefonie i stać się kompletnie niewidoczna dla osoby korzystającej z czytnika ekranu. Sam fakt, że zdjęcie wygląda ładnie, to jeszcze nie koniec tematu.
Optymalizacja obrazów na stronie nie polega na jednym magicznym kliknięciu. Trzeba dobrać właściwy plik, format, rozmiar i kompresję, a potem zadbać o opisową nazwę, sensowny tekst alternatywny oraz dopasowanie do ekranu. Bez napinki. Poniżej masz prosty proces, który pomoże ogarnąć grafiki samodzielnie i wyłapać moment, w którym lepiej zawołać Szwagra.
Dlaczego grafika na stronie może pomagać albo przeszkadzać
Obraz wpływa na pierwsze wrażenie i pomaga użytkownikowi zrozumieć, czym się zajmujesz. Zdjęcie usługi, ilustracja procesu czy dobrze przygotowane logo mogą uporządkować stronę. Problem zaczyna się wtedy, gdy grafika jest przypadkowa, za ciężka albo użyta nie tam, gdzie trzeba.
Obrazy często stanowią dużą część danych pobieranych podczas ładowania strony. Jeśli wrzucisz ogromne zdjęcie prosto z aparatu, użytkownik telefonu może pobierać znacznie więcej danych, niż faktycznie potrzebuje. Efekt? Strona dłużej się wyświetla, a cierpliwość odwiedzającego nie jest z gumy.
Dobra optymalizacja łączy kilka elementów: przygotowanie pliku, właściwe osadzenie, czytelność, szybkość i dostępność. Nazwa pliku, kompresja albo alt text pomagają, ale żadna z tych rzeczy osobno nie gwarantuje wysokiej pozycji w Google ani konkretnego wzrostu ruchu.
Zanim wrzucisz plik do WordPressa: szybka checklista
Najpierw ustal, po co dana grafika jest na stronie i gdzie dokładnie będzie używana. Zdjęcie główne, miniatura wpisu, logo, wykres i ozdobny pasek to różne przypadki. Nie ma jednego obowiązkowego rozmiaru pliku, szerokości obrazu ani poziomu kompresji dobrego dla każdej witryny. Konkret powinien wynikać z projektu strony i sposobu wdrożenia w CMS-ie.
Dopasuj kadr oraz rozmiar do miejsca użycia. Nie wrzucaj największej wersji tylko dlatego, że ją masz. Następnie wybierz format adekwatny do rodzaju grafiki. Google obsługuje między innymi JPEG, PNG, WebP, SVG i AVIF, ale format powinien pasować do obrazu oraz oczekiwanego wyglądu. Rozszerzenie pliku powinno odpowiadać jego rzeczywistemu formatowi.
Potem przychodzi kompresja zdjęć na stronie. Zmniejsz plik, ale po wszystkim obejrzyj grafikę. Szczególnie dokładnie sprawdź logo, infografikę, wykres i materiał reklamowy. Jeśli tekst robi się rozmazany, krawędzie wyglądają jak po spotkaniu z tarką, a kolory uciekają, trzeba zmienić ustawienia albo wybrać inne rozwiązanie.
Mini-checklista przed publikacją
- Określ cel i miejsce użycia grafiki.
- Dopasuj kadr oraz rozmiar do projektu strony.
- Wybierz format odpowiedni dla rodzaju obrazu.
- Skompresuj plik i sprawdź efekt wizualny.
- Upewnij się, że rozszerzenie zgadza się z formatem.
Tekst alternatywny bez kombinowania
Tekst alternatywny grafiki, czyli alt, ma przekazać użytkownikowi sens albo funkcję obrazu. Pomaga osobom korzystającym z czytników ekranu, a wyszukiwarce ułatwia zrozumienie tematyki grafiki. Nie jest jednak workiem na słowa kluczowe. Wpisywanie ciągu „strona internetowa SEO grafika zdjęcie” nie jest sprytnym SEO, tylko bałaganem.
Przy obrazie informacyjnym opisz krótko najważniejszą rzecz. Nie musisz relacjonować każdego szczegółu kadru. Jeśli zdjęcie pokazuje stół na wymiar, alt może przekazywać właśnie tę informację, zamiast opisywać kolor każdej deski i kąt ustawienia lampy.
Grafika dekoracyjna, która niczego nie wnosi do zrozumienia strony, może mieć pustą alternatywę: alt="". Nie stosuj pustego altu przy grafice ważnej, zawierającej istotny tekst albo pełniącej funkcję linku czy przycisku.
Jeżeli obraz jest linkiem lub przyciskiem, opisz działanie. Ikona koperty prowadząca do kontaktu powinna mówić o celu, a nie tylko o tym, że przedstawia kopertę. Jeśli grafika zawiera ważny tekst, alternatywa powinna przekazać jego treść albo sens. Gdy to możliwe, warto użyć zwykłego tekstu HTML obok lub zamiast tekstu umieszczonego na obrazie.
Trzy szybkie przypadki: informacja, ozdobnik, działanie
- Informacja: krótko przekaż najważniejszy sens obrazu.
- Ozdobnik: użyj pustego
alt="", jeśli grafika jest wyłącznie dekoracyjna. - Działanie: opisz cel linku lub przycisku, nie wygląd ikony.
Ta checklista pomaga w podstawowym sprawdzeniu, ale nie zastępuje profesjonalnego audytu dostępności ani formalnej oceny zgodności.
Czy nazwa pliku naprawdę ma znaczenie dla SEO obrazów?
Tak, ale bez fanfar i magicznych zaklęć. Google wskazuje, że krótka, opisowa nazwa pliku daje wyszukiwarce dodatkową, choć lekką wskazówkę dotyczącą tematyki obrazu. To mały element większej układanki, a nie przycisk „włącz SEO obrazów”.
Zamiast IMG00023.JPG albo image1.jpg użyj nazwy opisującej rzeczywistą zawartość, na przykład drewniany-stol-na-wymiar.jpg. Nazwa powinna być zgodna z tym, co faktycznie widać na grafice. Nie wpisuj w niej fraz, których obraz nie przedstawia, i nie zastępuj nią tekstu alternatywnego ani kontekstu strony.
Jak nazwać plik, żeby nie robić wyszukiwarce rebusu
- Zamień przypadkową nazwę na krótką i opisową.
- Unikaj oznaczeń z aparatu oraz przypadkowych numerów.
- Sprawdź, czy nazwa odpowiada rzeczywistej zawartości pliku.
Jakość kontra szybkość: jak nie wysłać telefonowi grafiki wielkości billboardu
Dobra jakość i szybkie ładowanie nie muszą się ze sobą bić. Zacznij od przygotowania obrazu adekwatnego do miejsca użycia. Potem dobierz format i skompresuj plik. Chodzi o ograniczenie liczby pobieranych bajtów bez utraty czytelności. Nie ma jednego poziomu jakości ani rozmiaru pliku właściwego dla każdej strony.
Ważne są też responsywne obrazy. Dzięki rozwiązaniom takim jak srcset lub picture przeglądarka może dobrać wariant do rozmiaru ekranu i możliwości urządzenia. Telefon nie musi wtedy pobierać wersji przygotowanej wyłącznie na duży monitor. Przy użyciu picture trzeba zapewnić element img z atrybutem src jako rozwiązanie zapasowe.
Po wdrożeniu sprawdź stronę na telefonie i przy wolniejszym połączeniu. Zobacz, czy obraz pojawia się poprawnie, nie rozpycha układu i nadal jest czytelny. Wydajność warto również zmierzyć narzędziem do testowania szybkości, ale sam wynik nie zastąpi zwykłego, ludzkiego sprawdzenia strony.
Prosty proces dla wersji desktopowej i mobilnej
- Przygotuj obraz odpowiedni do miejsca użycia.
- Dobierz format i skompresuj plik.
- Dostarcz wariant dopasowany do urządzenia.
- Sprawdź wygląd na telefonie oraz przy wolniejszym połączeniu.
Błędy, przez które grafika robi więcej szkody niż pożytku
Najczęstszy problem to wrzucanie ogromnych zdjęć prosto z aparatu. Kolejny: nazwy typu IMG0001.jpg, brak altu przy ważnych grafikach i upychanie fraz SEO w tekście alternatywnym. Do tego dochodzi tekst umieszczony wyłącznie na obrazie, bez dostępnej alternatywy, oraz brak kontroli po kompresji.
W praktyce warto szczególnie oglądać logo, infografiki, wykresy i materiały reklamowe. To właśnie tam kompresja może pogorszyć czytelność szybciej niż na zwykłym zdjęciu. Nie ukrywaj istotnej treści wyłącznie w obrazie, jeśli możesz przekazać ją także jako zwykły tekst.
Kontrola w pięć minut
- Czy plik pasuje do miejsca użycia?
- Czy nazwa opisuje zawartość?
- Czy alt odpowiada funkcji grafiki?
- Czy obraz wygląda dobrze po kompresji?
- Czy strona ładuje się i wygląda sensownie na telefonie?
To praktyczna checklista, a nie certyfikat zgodności z WCAG, ustawą o dostępności cyfrowej ani pełny audyt.
Kiedy ogarniesz to sam, a kiedy lepiej zawołać Szwagra
Samodzielnie możesz zacząć od opisowych nazw plików, podstawowych altów, kompresji i sprawdzenia grafik na telefonie. Przy pojedynczym zdjęciu to zwykle dobry pierwszy krok. Jeśli obrazów jest dużo, warto uporządkować cały proces, żeby każda grafika była przygotowana według podobnych zasad, zamiast działać metodą „jakoś to będzie”.
Wsparcie przyda się, gdy problem dotyczy responsywności, wydajności albo dostępności całej strony, a nie jednego pliku. Czasem trzeba poprawić nie tylko grafikę, ale też sposób jej osadzenia. Można również przejść od samego pliku do sensownego użycia go na stronie: dobrać kadr, przygotować materiał i zadbać o spójność.
Nie obiecuję, że sama kompresja, nazwa pliku lub alt text zapewnią wysoką pozycję w Google. To elementy szerszej jakości strony i nie dają gwarantowanego wyniku.
W skrócie: wybierz obraz zgodnie z celem, dopasuj jego rozmiar i format, skompresuj go, nazwij opisowo, dodaj alt zależny od funkcji, użyj responsywnej wersji i sprawdź efekt na telefonie. Taka checklista pomaga uporządkować temat, ale nie jest pełnym audytem dostępności ani gwarancją widoczności w Google. Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.
