Wstęp
Wyobraź sobie: klient wchodzi na Twój sklep, widzi produkt, kliknięcie… i czeka. Ładowanie. Kręcące się kółko. Po 3 sekundach ucieka do konkurencji. Brzmi znajomo? W e-commerce każda sekunda to pieniądz – dosłownie. Jednym z największych, a często pomijanych, zabójców wydajności są obrazy.
Obrazy stanowią średnio 60-70% wagi strony e-commerce. Nieskompresowane, w pełnej rozdzielczości, potrafią spowolnić ładowanie nawet o kilka sekund. A Google od dawna karze wolne strony, a użytkownicy – jeszcze bardziej.
W tym artykule pokażę Ci konkretne techniki optymalizacji obrazów, które stosuję u klientów. Nie chodzi o ślepe zmniejszanie jakości, tylko o inteligentne zarządzanie zasobami. Zaczniemy od podstaw, a skończymy na zaawansowanych strategiach formatów i CDN.
1. Format ma znaczenie – wybierz mądrze
Nie wszystkie formaty obrazów są sobie równe. Klasyczny JPEG i PNG mają swoje lata. Dziś mamy WebP i AVIF, które oferują znacznie lepszą kompresję przy tej samej jakości wizualnej.
- WebP: obsługiwany przez wszystkie nowoczesne przeglądarki (98% globalnego ruchu). Redukuje wagę obrazów średnio o 25-35% w porównaniu do JPEG, bez widocznej utraty jakości.
- AVIF: nowszy, jeszcze wydajniejszy (oszczędność 50% względem JPEG), ale wsparcie wciąż rośnie (około 90% przeglądarek).
Jak to zrobić technicznie?
W aplikacji webowej (np. sklepie na Next.js, Nuxt, czy czystym HTML) użyj tagu <picture> z alternatywnymi źródłami:
<picture>
<source srcset="produkt.avif" type="image/avif">
<source srcset="produkt.webp" type="image/webp">
<img src="produkt.jpg" alt="Opis produktu">
</picture>
Przeglądarka sama wybierze najlepszy obsługiwany format. W przypadku platform typu Shopify czy WooCommerce, poszukaj wtyczek automatycznie konwertujących obrazy do WebP (np. Smush, Imagify, ShortPixel).
Przykład z życia:
U klienta – sklepu z odzieżą – po wdrożeniu WebP, główna strona schudła z 3.2 MB do 1.9 MB, a czas ładowania skrócił się z 4.2s do 2.8s. Core Web Vitals (LCP) poprawiły się znacząco, a konwersja wzrosła o 8% w ciągu miesiąca.
2. Kompresja – znajdź złoty środek
Kompresja obrazów to nie tylko format, ale też stopień kompresji. Większość narzędzi pozwala ustawić poziom jakości (0-100). Dla zdjęć produktowych często wystarczy 80-85% – wizualnie niezauważalna różnica, a oszczędność masy rzędu 40-60%.
Narzędzia do kompresji:
- Online: TinyPNG, Squoosh, Compressor.io – szybkie, ale ręczne.
- Lokalne: ImageOptim (Mac), RIOT (Windows) – do wsadowej obróbki.
- Programistyczne: biblioteki jak Sharp (Node.js), Pillow (Python), ImageMagick – integracja z procesem CI/CD.
Strategia warstwowa:
- Przed wgraniem na serwer – skompresuj wszystkie obrazy do jakości 85%.
- Na serwerze – zastosuj dodatkową kompresję lossless (np. OptiPNG dla PNG).
- Przy wyświetlaniu – użyj WebP/AVIF z kompresją lossy.
Uwaga na artefakty: przy zbyt agresywnej kompresji na zdjęciach z gradientami lub tekstem mogą pojawić się pasy i rozmycia. Dlatego zawsze testuj na kilku reprezentatywnych produktach.
3. Responsywność – nie każdemu pokazuj pełne HD
Ładowanie obrazu 4000×3000 px na ekranie smartfona to marnotrawstwo. Używaj atrybutów srcset i sizes, by serwować różne rozdzielczości w zależności od viewportu.
Przykład dla zdjęcia produktu:
<img src="produkt-800.jpg"
srcset="produkt-400.jpg 400w,
produkt-800.jpg 800w,
produkt-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Produkt">
Dzięki temu na telefonie załaduje się wersja 400px (np. 50 KB), a na desktopie 1200px (150 KB). Oszczędzasz transfer i czas.
4. Lazy loading – ładuj tylko to, co widać
Ładowanie wszystkich obrazów na stronie jednocześnie to proszenie się o niską wydajność. Wprowadź leniwe ładowanie (lazy loading) – obrazy ładują się dopiero, gdy pojawiają się w oknie przeglądarki.
W HTML5 wystarczy dodać atrybut loading="lazy":
<img src="produkt.jpg" loading="lazy" alt="Produkt">
Ale uwaga – dla obrazów powyżej fold (widocznych od razu) nie używaj lazy load, bo opóźnisz ich wyświetlenie. Dla reszty – jak najbardziej.
Dodatkowo, możesz użyć Intersection Observer API do bardziej zaawansowanego sterowania (np. preload obrazów w pewnej odległości przed wejściem w widok).
5. CDN dla obrazów – ostatnia prosta
Obrazy serwowane z jednego serwera to wąskie gardło. Skorzystaj z sieci dostarczania treści (CDN) zoptymalizowanych pod obrazy, np.:
- Cloudinary
- Imgix
- Cloudflare Images
- Akamai Image & Video Manager
Te usługi nie tylko rozpraszają pliki geograficznie, ale też automatycznie konwertują do WebP/AVIF, kompresują, zmieniają rozmiar na żądanie i cache’ują na brzegu sieci.
Przykład z Cloudinary:
https://res.cloudinary.com/twoja-chmura/image/upload/w_800,q_auto,f_auto/produkt.jpg
Parametr f_auto sprawi, że przeglądarka otrzyma najlepszy format. q_auto dobierze optymalną kompresję. W 30 sekund masz zoptymalizowany obraz bez ręcznej roboty.
Podsumowanie
Optymalizacja obrazów to nie rocket science, ale wymaga systematyczności. Oto lista kontrolna do wdrożenia:
✅ Używaj WebP (z fallbackiem na JPEG)
✅ Kompresuj do 80-85% jakości
✅ Stosuj srcset i sizes dla responsywności
✅ Włącz lazy loading dla obrazów poniżej fold
✅ Rozważ CDN z automatyczną optymalizacją
Efekt? Szybsza strona, lepsze Core Web Vitals, wyższa konwersja. A dla marki JurskiTech.pl – każda sekunda liczy się w budowaniu zaufania i sprzedaży.
Jeśli potrzebujesz wsparcia w audycie wydajności swojego sklepu – wiemy, jak to zrobić bez utraty jakości. 🚀
