Optymalizacja zdjęć na stronie - jak to zrobić dobrze?

Na doprowadzeniu obrazu do stanu, w którym wygląda tak samo, a waży wielokrotnie mniej i jest opisany tak, żeby wyszukiwarka wiedziała, co przedstawia.

Składa się na to pięć rzeczy: właściwy format pliku, kompresja, rozmiar dopasowany do miejsca wyświetlania, opóźnione ładowanie tego, czego nie widać, oraz opis w atrybucie alt i nazwie pliku.

Dane z naszych wdrożeń pokazują, że sama konwersja formatu i kompresja zdejmuje typowo 50-80% wagi obrazów. Witryna z pięcioma megabajtami zdjęć schodzi do jednego, co na połączeniu komórkowym oznacza kilkukrotnie szybsze wczytanie pierwszego ekranu.

W praktyce: zdjęcia do WebP, logo i ikony do SVG, przezroczystość do PNG tylko wtedy, gdy SVG nie wchodzi w grę. AVIF ma sens przy dużych fotografiach na stronie głównej, gdzie różnica kilkuset kilobajtów jest widoczna.

Nie trzeba wybierać jednego. Znacznik `` pozwala podać kilka wersji, a przeglądarka pobierze tę, którą obsługuje.

Zdjęcie o szerokości 4000 pikseli wyświetlane w kolumnie o szerokości 400 pikseli waży dziesięć razy więcej, niż powinno. Przeglądarka i tak je przeskaluje, ale najpierw pobierze w całości.

Zasada jest prosta: przed wgraniem przeskaluj obraz do maksymalnej szerokości, w jakiej będzie wyświetlany, powiększonej dwukrotnie na potrzeby ekranów o wysokiej rozdzielczości. Dla kolumny 400 pikseli wystarczy plik 800 pikseli.

WordPress generuje kilka wersji każdego wgranego pliku i podaje je przez atrybut `srcset`, więc telefon pobiera mniejszą wersję niż komputer. To działa tylko wtedy, gdy oryginał ma sensowny rozmiar. Wgranie zdjęcia prosto z aparatu oznacza, że wszystkie wygenerowane wersje są zrobione z pliku o wadze kilku megabajtów.

Kompresja stratna usuwa informacje, których oko nie zauważa. Przy zdjęciach próg widoczności leży zwykle w okolicach 80% jakości i to jest sensowne ustawienie domyślne.

Kompresja bezstratna zmniejsza plik bez żadnej zmiany obrazu, ale zysk jest mniejszy. Ma sens przy grafikach z ostrymi krawędziami, logo i zrzutach ekranu, gdzie kompresja stratna zostawia widoczne artefakty wokół liter.

Praktyczna kolejność: najpierw przeskaluj, potem konwertuj format, na końcu kompresuj. Kompresowanie zdjęcia o szerokości 4000 pikseli, które i tak zostanie przeskalowane, to praca wykonana dwa razy.

Sprawdź efekt na najbardziej wymagającym materiale: zdjęciach produktowych z gradientem i zrzutach ekranu z tekstem. Jeśli tam wygląda dobrze, reszta też będzie.

Nie ma powodu pobierać zdjęć ze stopki, zanim ktokolwiek do niej dotrze. Atrybut `loading="lazy"` odkłada pobranie do momentu, gdy obraz zbliża się do widocznego obszaru.

Jest jeden wyjątek, o którym łatwo zapomnieć: obrazy widoczne na pierwszym ekranie muszą ładować się od razu. Opóźnienie głównego zdjęcia nagłówkowego pogarsza wskaźnik LCP, czyli dokładnie tę metrykę, którą próbujesz poprawić.

WordPress dodaje ten atrybut automatycznie od wersji 5.5 i sam pomija pierwsze obrazy na stronie. Problemy zaczynają się przy kreatorach stron i suwakach, które wstawiają obrazy własnym kodem. Szczegóły i konfigurację opisujemy w poradniku lazy loading.

Obraz bez podanej szerokości i wysokości nie rezerwuje miejsca. Przeglądarka rysuje tekst, a gdy zdjęcie się pobierze, wpycha je w układ i cała treść przeskakuje w dół.

To jest bezpośrednia przyczyna złego wyniku CLS, jednego z trzech wskaźników Core Web Vitals. Dla użytkownika oznacza to sytuację, w której klika przycisk, a pod palcem pojawia się coś innego.

Naprawa polega na podaniu atrybutów `width` i `height` przy każdym obrazie. Przeglądarka wylicza z nich proporcje i rezerwuje miejsce, zanim plik dotrze. To kosztuje zero kilobajtów i naprawia wskaźnik, którego nie da się poprawić kompresją.

Atrybut alt opisuje, co przedstawia obraz. Czyta go czytnik ekranu osoby niewidomej i czyta go wyszukiwarka, bo sama fotografia nie mówi jej nic.

Dobry opis mówi, co jest na zdjęciu, w kontekście strony. Zły opis to lista fraz kluczowych albo nazwa pliku. Przy zdjęciu produktu wystarczy nazwa produktu i wariant, przy zdjęciu realizacji krótkie zdanie o tym, co widać.

Pusty atrybut przy dekoracji to nie zaniedbanie, tylko świadoma decyzja. Czytnik ekranu przeczyta wtedy treść, a nie opis tła.

Nazwa pliku jest jedną z niewielu wskazówek, jakie wyszukiwarka ma o zawartości obrazu. Plik `IMG_20260412_113355.jpg` nie mówi nic, `fotel-biurowy-kompas-szary.webp` mówi wszystko.

Zasady są proste: małe litery, myślniki zamiast spacji, bez polskich znaków diakrytycznych, nazwa opisująca zawartość, nie kampanię czy datę sesji.

Poza nazwą liczy się kontekst: tekst w pobliżu obrazu, podpis i nagłówek sekcji. Wyszukiwarka grafiki wiąże zdjęcie z treścią strony, więc zdjęcie produktu na stronie opisującej ten produkt ma większe szanse niż to samo zdjęcie w galerii bez opisów.

Przy sklepie warto dodać dane strukturalne produktu z odwołaniem do obrazu. To pozwala wyświetlić zdjęcie przy wyniku wyszukiwania, co bezpośrednio przekłada się na liczbę wejść.

Nie trzeba wgrywać wszystkiego od nowa. Wtyczki optymalizujące przetwarzają istniejącą bibliotekę wsadowo: konwertują do WebP, kompresują i regenerują miniatury.

Kolejność, która nie kończy się awarią:

1. Zrób kopię katalogu `wp-content/uploads` przed pierwszym uruchomieniem
2. Przetwórz najpierw kilkanaście plików i obejrzyj efekt na stronie
3. Puść przetwarzanie wsadowe poza godzinami największego ruchu
4. Sprawdź, czy zachowane zostały oryginały, gdybyś chciał się wycofać
5. Zregeneruj miniatury, jeśli zmieniałeś rozmiary w ustawieniach

Przetwarzanie kilku tysięcy plików obciąża serwer i na współdzielonym hostingu potrafi wywołać przekroczenie limitów. Dlatego robi się to partiami, a nie jednym kliknięciem w środku dnia.

Sklep ma trudniejszy przypadek niż witryna firmowa, bo obrazów jest kilkadziesiąt razy więcej i każdy występuje w kilku wariantach: miniatura na liście, zdjęcie na karcie produktu, powiększenie do podglądu.

Największy błąd to używanie tego samego pliku we wszystkich trzech miejscach. Lista produktów pobiera wtedy dwadzieścia pełnowymiarowych zdjęć, choć wyświetla je jako kwadraty o boku 200 pikseli.

Drugi typowy problem to funkcja powiększenia, która ładuje wersję o wysokiej rozdzielczości od razu przy wejściu na kartę produktu, zamiast dopiero po najechaniu kursorem. Przy karcie z ośmioma zdjęciami to kilka megabajtów pobranych na zapas.

Przy dużych katalogach warto rozważyć automatyczne przetwarzanie obrazów po stronie serwera albo usługę, która generuje warianty w locie. Ręczne pilnowanie rozmiarów przy kilku tysiącach produktów przestaje być realne. Szerszy kontekst wydajności sklepu opisujemy w poradniku wolny WooCommerce.

Sieć dostarczania treści trzyma kopie plików na serwerach rozsianych geograficznie i podaje je z najbliższego. Przy obrazach zysk jest podwójny: krótszy dystans i odciążenie własnego serwera, który przestaje wysyłać setki megabajtów dziennie.

Dla witryny obsługującej wyłącznie polskich klientów różnica w odległości jest niewielka, bo serwer i tak stoi w Europie. Zysk bierze się wtedy głównie z odciążenia i z tego, że CDN podaje pliki z własną, agresywną pamięcią podręczną.

Część usług potrafi też konwertować i skalować obrazy w locie: pobierasz oryginał, a CDN wydaje wersję WebP w rozmiarze dopasowanym do urządzenia. To rozwiązuje problem biblioteki, której nikt nie posprząta ręcznie.

Kiedy CDN ma sens, a kiedy jest zbędnym kosztem, rozkładamy w poradniku CDN - co to jest.

Optymalizacja obrazów jest częścią szerszej pracy nad wydajnością. Według naszego cennika podstawowa optymalizacja, obejmująca obrazy, cache i minifikację, to 500-1500 zł.

Zysk zależy od punktu wyjścia i jest największy tam, gdzie nikt się dotąd obrazami nie zajmował. Witryna ze zdjęciami prosto z aparatu przyspiesza kilkukrotnie, a strona już zoptymalizowana zyskuje dziesiąte części sekundy.

Warto policzyć to od strony ruchu: przy witrynie mobilnej każda sekunda dłuższego ładowania to mierzalny wzrost odsetka osób, które wychodzą przed obejrzeniem oferty. Obrazy są najtańszą sekundą do odzyskania.

Wyszukiwarka grafiki pokazuje przy wyniku nie tylko zdjęcie, ale też informacje pobrane ze strony: nazwę produktu, cenę, dostępność. Bierze je z danych strukturalnych, a nie z samego obrazu.

Przy sklepie warto zadbać, żeby schemat produktu zawierał odwołanie do zdjęcia w pełnym rozmiarze. Przy artykułach analogicznie działa schemat artykułu z obrazem wyróżniającym. Jedno i drugie zwykle dodaje wtyczka SEO, ale rzadko ktoś to sprawdza po wdrożeniu.

Podpis pod zdjęciem to osobna sprawa i często niedoceniana. Czytają go użytkownicy, bo wzrok zatrzymuje się na obrazie, a podpis jest pierwszym tekstem obok. W przeciwieństwie do atrybutu alt jest widoczny, więc pełni inną funkcję: nie opisuje, co widać, tylko dopowiada kontekst, którego na zdjęciu nie ma.

• Przeskalowane do maksymalnej szerokości wyświetlania razy dwa
• Zapisane jako WebP, z wersją zapasową jeśli obsługujesz stare przeglądarki
• Skompresowane w okolicach 80% jakości i obejrzane po kompresji
• Nazwa pliku opisowa, małymi literami, bez polskich znaków
• Atrybut alt opisujący zawartość, pusty przy dekoracji
• Podane `width` i `height`, żeby układ nie skakał
• `loading="lazy"` wszędzie poza pierwszym ekranem

Tę listę warto przekazać osobie, która dodaje treści na stronie. Większość problemów z wagą zdjęć powstaje nie na etapie budowy witryny, tylko rok albo dwa lata później, przy dodawaniu kolejnych realizacji i aktualności.

Robimy to jednorazowo albo w ramach stałej opieki nad stroną WordPress. Bezpłatną analizę obrazów na Twojej stronie zrobimy po zgłoszeniu przez formularz na stronie kontakt.