Wprowadzenie
Obrazki to jeden z najbardziej niedocenianych elementów strony. Dla wielu firm to tylko „dodatek graficzny”, ale w rzeczywistości mają ogromny wpływ na wydajność, SEO i UX, a co za tym idzie – na konwersję. Zbyt duże, nieoptymalne formaty, brak znaczników alt, lazy loading ustawiony byle jak – to wszystko sprawia, że strona ładuje się wolniej, gorzej pozycjonuje i odstrasza użytkowników.
W JurskiTech.pl od lat widzimy, jak wiele firm traci klientów przez pozornie drobne błędy w assetach graficznych. W tym artykule pokażę Ci trzy najczęstsze problemy i – co ważniejsze – jak je naprawić.
Sekcja 1: Brak modern formatów – WebP i AVIF to must-have
Klasyczne JPEG i PNG odchodzą do lamusa. WebP daje średnio 30% mniejszy rozmiar przy tej samej jakości, a AVIF potrafi zejść nawet o 50% poniżej JPEG. Dla użytkownika to różnica między stroną ładującą się 2 sekundy a 5 sekund. Dla Google – sygnał, że strona jest wolna.
Przykład z życia: pracowaliśmy z klientem z branży e-commerce. Sklep miał setki zdjęć produktów w JPEG, każdy po 2-3 MB. Po konwersji na WebP średni rozmiar spadł do 400-600 kB, a czas ładowania strony głównej zmniejszył się z 6,5 s do 2,2 s. LCP (Largest Contentful Paint) spadł z 7 s do 2,8 s. W ciągu miesiąca odnotowali wzrost konwersji o 12%.
Jak to wdrożyć? Jeśli używasz WordPressa, wtyczki takie jak Imagify czy ShortPixel automatycznie konwertują obrazy przy uploadzie. W przypadku własnego kodu – narzędzia takie jak Sharp (Node.js) czy libvips (Python) pozwalają na serwerową konwersję. Można też użyć CDN-a z transformacją obrazów, np. Cloudinary lub imgix.
Sekcja 2: Lazy loading bez myślenia o metrykach
Lazy loading, czyli ładowanie obrazków dopiero gdy użytkownik przewinie do ich lokalizacji, to standard. Ale wiele implementacji jest błędna – np. wszystkie obrazki mają loading="lazy", także ten, który pojawia się na pierwszym ekranie (above the fold). To pogarsza LCP, bo przeglądarka odkłada ładowanie kluczowego obrazka.
Zasada: obrazki powyżej folda powinny mieć loading="eager" (lub brak atrybutu), a te poniżej – loading="lazy". Dodatkowo warto ustawić wyraźne wymiary (width/height), by uniknąć Cumulative Layout Shift (CLS).
Przykład: strona SaaS z hero image o szerokości 1920 px. Ustawienie loading="lazy" na tym obrazku spowodowało, że LCP wzrósł z 3 s do 8 s, bo przeglądarka czekała, aż użytkownik przewinie – a przecież hero widać od razu. Po zmianie na eager LCP wrócił do normy.
Sekcja 3: Złe znaczniki alt – nie tylko dla SEO, ale i dostępności
Większość firm wypełnia alt opisem typu „obrazek-123.jpg” lub w ogóle go nie dodaje. To błąd podwójny: po pierwsze, Google nie rozumie kontekstu obrazka, po drugie – osoby niewidome korzystające z czytników ekranu nie mają dostępu do treści.
Pamiętaj, że alt powinien opisywać, co widać na obrazku, ale też uwzględniać kontekst. Dla zdjęcia produktu w sklepie powinien zawierać nazwę produktu, kolor, ewentualnie akcję (np. „czerwona sukienka z falbaną na białym tle”). Dla zdjęcia w artykule – krótki, opisujący zawartość.
Przykład: klient z branży turystycznej miał na stronie galerię zdjęć z altem „obrazek1.jpg”. Po zmianie na opisy typu „plaża w Mielnie, szeroki widok na morze, leżaki, słoneczna pogoda” zauważył wzrost ruchu z wyszukiwania obrazów o 40% w ciągu 2 miesięcy.
Podsumowanie
Obrazki to nie tylko estetyka – to element techniczny, który wpływa na szybkość, pozycjonowanie i odbiór strony. Wymiana formatów na WebP/AVIF, prawidłowy lazy loading i dobrze napisane alt to trzy kroki, które możesz wdrożyć już dziś. Nie wymagają dużego budżetu, a efekty – szybsza strona, lepszy UX, wyższa konwersja – są natychmiastowe.
W JurskiTech.pl regularnie pomagamy firmom w optymalizacji assetów. Jeśli potrzebujesz audytu lub wdrożenia – daj znać.
