Optymalizacja zdjęć na stronę internetową – kompresja, znacznik ALT, co jeszcze?

Zoptymalizowałeś już meta tagi, rozbudowałeś treść na stronie oraz wstawiłeś słowa kluczowe w odpowiednich miejscach? Czas na optymalizację obrazków! Nie będzie to trudne, a dzięki temu wyróżnisz się wśród konkurencji i zaczniesz zdobywać ruch także z wyszukiwarki grafiki.

Zmniejszanie wagi plików graficznych

Istnieje pokusa, aby dodawać na stronę zdjęcia w najwyższej jakości, aby widoczny był każdy detal, nawet w kilkukrotnym powiększeniu. Taka taktyka szybko może okazać się zgubna. Dlaczego? Ponieważ im większa waga pliku graficznego, tym dłuższy czas ładowania strony. A to nie dość, że jest jednym z czynników rankingowych Google’a, to jeszcze im wolniej strona się ładuje, tym szybciej wzrasta irytacja użytkowników, którzy nie zawsze będą mieli czas i chęci na to, aby poczekać na twoją piękną grafikę.

Co zalecamy? Zmianę rozmiarów zdjęcia – w większości przypadków obrazy i tak nie wyświetlają się w pełnej rozdzielczości – oraz bezstratną kompresję.

Możesz kompresować zdjęcia przed dodaniem ich na serwer lub zainstalować jedną ze wtyczek do WordPressa, która zrobi to za ciebie. Popularnością cieszą się:

• WP-Optimize – Clean, Compress, Cache
• EWWW Image Optimizer
• Compress JPEG & PNG images

Warto wiedzieć, że istnieją różne metody kompresji. Kompresja bezstratna (lossless) redukuje rozmiar pliku bez utraty jakości – idealnie nadaje się do logotypów, ikon i grafik z ostrymi krawędziami. Kompresja stratna (lossy) usuwa część danych wizualnych, ale oszczędza znacznie więcej miejsca – stosuj ją do zdjęć produktowych czy zdjęć tła, gdzie minimalna utrata detali pozostaje niezauważalna dla oka. Eksperymentuj z poziomem kompresji: często plik o 70–80% jakości wizualnej waży trzykrotnie mniej, a różnica jest praktycznie niewidoczna na ekranie.

Dodatkowo zwróć uwagę na format pliku. Format JPEG sprawdza się przy fotografiach, PNG przy grafikach z przezroczystością, a WebP oferuje świetny stosunek jakości do rozmiaru – przy jednoczesnym wsparciu przezroczystości i animacji. Wiele nowoczesnych wtyczek WordPress automatycznie konwertuje obrazy do WebP, dostarczając starsze formaty tylko przeglądarkom, które jeszcze ich nie obsługują.

Nazwy plików graficznych

Kolejną rzeczą, o której trzeba pamiętać przed wgraniem zdjęć na serwer, jest zmiana nazwy plików graficznych. Zdjęcia prosto z aparatu lub pobrane w internecie – z darmowych banków zdjęć! – często posiadają niezrozumiałe ciągi znaków, liter i cyfr. Wystarczy je szybko zmienić, aby w sposób ogólny opisywały, o czym jest dana grafika.

Zamiast pliku o nazwie:
d00056554.jpg

lepiej jest wgrać zdjęcie:
piknik-o-zachodzie-slonca.jpg

Przy okazji warto pamiętać o kilku zasadach. Tytuł obrazka to dobre miejsce na umieszczenie słów kluczowych – pod warunkiem, że jest to uzasadnione. Bez względu na rodzaj podjętych działań SEO, unikaj spamerskich praktyk w postaci wstawiania na siłę fraz wszędzie tam, gdzie jest to możliwe.

Ponadto nie używaj znaków diakrytycznych, znaków specjalnych oraz spacji – zamiast niej stosuj myślniki lub podkreślenia.

Dobrze przemyślana nazwa pliku to także sygnał dla algorytmów wyszukiwarki obrazów. Jeśli prowadzisz sklep internetowy, możesz w nazwie zawrzeć markę produktu, model lub wariant kolorystyczny – np. smartfon-samsung-galaxy-s23-czarny.jpg. Dzięki temu plik łatwiej odnajdzie się w wynikach grafiki, gdy ktoś szuka konkretnego modelu. Unikaj jednak zbyt długich nazw: Google preferuje zwięzłość i czytelność, więc 3–5 wyrazów to rozsądna górna granica.

Tekst alternatywny

Jeśli naprawdę nie masz czasu lub na serwerze wgranych jest sporo zdjęć, przez co niemożliwa jest zmiana ich nazwy – chociaż skompresować możesz je zawsze przy pomocy wtyczki – to zajmij się najważniejszym elementem optymalizacji obrazka, czyli uzupełnieniem atrybutu alt.

Alt, tekst alternatywny, to opis obrazka przedstawiający to, co na nim się znajduje. Jest on bardzo ważny z punktu widzenia robotów wyszukiwarki, które nie „widzą” zdjęcia, są jednak w stanie „przeczytać” i zinterpretować to, co jest okodowane atrybutem alt.

Tekst alternatywny możesz uzupełnić podczas wgrywania zdjęcia na serwer lub później. W tym wypadku możesz stosować polskie znaki, spacje. Przykładowe opisy alt to:

• Piknik nad morzem o zachodzie słońca
• Kobieta w czerwonej sukience
• Wynik w wyszukiwarce grafiki Google
• Niebieskie etui do iPhone X

W tekście alternatywnym warto stosować słowa kluczowe, choć, tak jak w każdym innym miejscu, musi to być naturalne i uzasadnione, bez spamowania. Czyli, o ile poprawny jest tekst alternatywny „Kobieta w czerwonej sukience”, nie powinieneś go uzupełniać w ten sposób: „Sukienka, czerwona sukienka, sukienka damska, sukienka na wesele”.

Pamiętaj, że atrybuty alt służą również dostępności. Osoby korzystające z czytników ekranu usłyszą treść alternatywną jako opis tego, co przedstawia obraz. Dlatego opisuj obrazy konkretnie i rzeczowo. Jeśli umieszczasz wykres, napisz co on ilustruje – np. Wykres wzrostu liczby użytkowników mobilnych w latach 2020–2025. Jeśli dodajesz zrzut ekranu z interfejsu narzędzia SEO, podaj co na nim widać – np. Panel Screaming Frog pokazujący brakujące tagi alt.

Na koniec mamy wskazówkę dla osób, które swoją stronę oparły na WordPressie. Zaloguj się do głównego panelu i znajdź zakładkę Media. Następnie przejdź do Biblioteki mediów, kliknij dowolny obrazek i sprawdź, czy uzupełniony jest tekst alternatywny. Jeśli nie, szybko go wprowadź i powtórz to ze wszystkimi zdjęciami znajdującymi się w bibliotece. Zwykle uzupełniasz ten atrybut, ale boisz się, że czasami mogłeś o tym zapomnieć? Skorzystaj z narzędzia Screaming Frog, które przeskanuje do 500 URL-i i sprawdzi, którym zdjęciom brakuje tekstu alternatywnego.

Wymiary i responsywność obrazów

Kolejny aspekt, który bezpośrednio wpływa na wydajność, to rzeczywiste wymiary pliku graficznego. Zbyt często zdarza się, że na stronę trafia obraz o rozdzielczości 3000×2000 pikseli, podczas gdy w układzie wyświetla się w szerokości maksymalnie 800 pikseli. Przeglądarka musi pobrać cały plik, zeskalować go po stronie klienta – co zabiera czas i zasoby urządzenia.

Rozwiązaniem jest przygotowanie kilku wersji tego samego obrazu w różnych rozdzielczościach i dostarczanie odpowiedniej wersji w zależności od szerokości ekranu użytkownika. W HTML osiągniesz to atrybutem srcset w tagu <img>, który pozwala przeglądarce wybrać obraz dopasowany do aktualnego kontekstu wyświetlania. Jeśli korzystasz z WordPressa, CMS automatycznie generuje miniatury obrazów – wykorzystaj to, dodając do szablonu lub wtyczki logikę dostarczania właściwego rozmiaru.

Pamiętaj także o atrybutach width i height bezpośrednio w tagu obrazu. Określenie wymiarów pomaga przeglądarce zarezerwować odpowiednią ilość miejsca na stronie jeszcze przed pobraniem pliku graficznego, co minimalizuje skoki układu (CLS) – jeden z parametrów Core Web Vitals. Dzięki temu użytkownik nie doświadcza frustrującego przesuwania treści w trakcie ładowania.

Lazy loading – ładowanie obrazów na żądanie

Technologia lazy loading polega na odraczaniu pobierania obrazów, które znajdują się poniżej widocznego obszaru ekranu (tzw. above the fold). Obrazy ładują się dopiero wtedy, gdy użytkownik przewija stronę i zbliża się do miejsca, w którym się znajdują. Dzięki temu początkowy czas ładowania ulega skróceniu, a oszczędność transferu danych może być znaczna – szczególnie na stronach bogatych w grafiki.

Najprościej wdrożysz lazy loading dodając atrybut loading=”lazy” do tagu <img>. Wszystkie nowoczesne przeglądarki rozpoznają tę dyrektywę i realizują odroczenie automatycznie. Jeśli chcesz większej kontroli lub korzystasz ze starszej bazy kodowej, możesz sięgnąć po biblioteki JavaScript takie jak lazysizes czy wbudowane mechanizmy w popularnych builderach stron.

Pamiętaj jednak, by nie stosować lazy loading do obrazów wyświetlanych natychmiast po wejściu na stronę – może to paradoksalnie wydłużyć czas do pierwszego renderowania istotnej treści (LCP). Rezerwuj tę technikę dla grafik znajdujących się niżej w układzie strony.

Formaty nowej generacji: WebP, AVIF

Tradycyjne formaty JPEG i PNG dobrze pełnią swoją rolę, ale nie wykorzystują najnowszych algorytmów kompresji. Format WebP, opracowany przez Google, oferuje średnio o 25–35% mniejszą wagę pliku przy tej samej jakości wizualnej co JPEG. Dodatkowo obsługuje przezroczystość (jak PNG) i animacje (jak GIF), co czyni go uniwersalnym wyborem.

Jeszcze nowszym formatem jest AVIF, który w testach potrafi zmniejszyć rozmiar pliku o kolejne 20–30% w stosunku do WebP, zachowując doskonałą jakość. Wsparcie AVIF w przeglądarkach rośnie, choć nie jest jeszcze tak powszechne jak w przypadku WebP. Dobrą praktyką jest przygotowanie obrazów w kilku formatach i dostarczanie ich za pomocą tagu <picture> z elementami <source>, które pozwalają przeglądarce wybrać najlepszy dostępny wariant.

Wiele wtyczek WordPress automatycznie konwertuje przesyłane pliki do WebP i serwuje je użytkownikom, zachowując JPEG lub PNG jako fallback dla starszych przeglądarek. To wygodne rozwiązanie, które nie wymaga ingerencji w kod.

CDN dla obrazów – globalna dystrybucja treści

Content Delivery Network (CDN) to sieć serwerów rozmieszczonych w różnych lokalizacjach geograficznych, które przechowują kopie statycznych zasobów – w tym obrazów. Gdy użytkownik z Japonii odwiedza twoją stronę hostowaną w Polsce, CDN dostarcza mu obrazy z najbliższego serwera w Azji, co drastycznie skraca czas odpowiedzi.

Popularne rozwiązania CDN, takie jak Cloudflare, KeyCDN czy BunnyCDN, oferują dodatkowe funkcje: automatyczną optymalizację obrazów, konwersję do WebP lub AVIF, dynamiczną zmianę rozmiaru w locie oraz cache kontrolę. Dzięki temu nie musisz ręcznie przygotowywać wielu wersji każdego obrazu – CDN zrobi to za ciebie w zależności od parametrów żądania.

Integracja CDN z WordPressem zazwyczaj sprowadza się do instalacji wtyczki i podania klucza API. Od tego momentu wszystkie nowe obrazy będą automatycznie replikowane do CDN, a linki w treści zastąpione adresami z sieci dystrybucji.

Structured data dla obrazów

Jeśli prowadzisz sklep internetowy lub publikujesz treści, które zawierają kluczowe obrazy – np. zdjęcia produktów, przepisów kulinarnych, poradników – warto rozważyć zastosowanie danych strukturalnych schema.org. Dodanie znaczników ImageObject lub odpowiedniego typu schema (np. Product, Recipe) wraz z właściwością image pomaga wyszukiwarce lepiej zrozumieć kontekst grafiki i może prowadzić do wyświetlenia zdjęć w bogatych wynikach wyszukiwania.

Dzięki temu twoje obrazy mogą zyskać większą widoczność w wynikach grafiki Google, a także trafić do karuzeli produktów lub innych specjalnych formatów wyświetlania. Narzędzia takie jak Google Search Console czy walidatory schema.org pozwalają sprawdzić, czy dane strukturalne zostały poprawnie wdrożone.

Monitorowanie wydajności obrazów

Optymalizacja obrazów to proces ciągły. Warto regularnie sprawdzać, jak grafiki wpływają na szybkość ładowania strony. Narzędzie PageSpeed Insights od Google wskaże, które obrazy są zbyt duże, nie posiadają odpowiednich rozmiarów lub nie używają nowoczesnych formatów. Lighthouse, wbudowany w Chrome DevTools, również dostarcza szczegółowych raportów o metrykach Core Web Vitals.

Jeśli zauważysz, że konkretne obrazy spowalniają stronę, możesz je ponownie skompresować, zmienić format lub zmniejszyć wymiary. Regularne audyty – raz na kwartał lub po każdej większej zmianie w szacie graficznej witryny – pomogą utrzymać stronę w optymalnej kondycji.

Bezpieczeństwo i prawa autorskie

Nie zapominaj o aspektach prawnych. Używanie zdjęć bez odpowiedniej licencji może skończyć się roszczeniami finansowymi lub koniecznością usunięcia treści. Korzystaj z darmowych banków zdjęć takich jak Unsplash, Pexels czy Pixabay, ale zawsze sprawdzaj warunki licencji – niektóre zdjęcia wymagają podania autora, inne nie mogą być używane komercyjnie.

Dodatkowo dbaj o to, by obrazy nie zawierały wrażliwych danych osobowych ani metadanych EXIF, które mogą ujawnić lokalizację wykonania zdjęcia czy dane urządzenia. Wiele narzędzi kompresji automatycznie usuwa te informacje, ale warto to zweryfikować przed publikacją.