Obrazy to jeden z tych elementów strony, które na pierwszy rzut oka wydają się proste. Wrzucasz plik, dodajesz alt text i tyle. Tymczasem to właśnie one często są najcięższym składnikiem witryny, odpowiadając nawet za 60–70% wagi całej strony. W e-commerce, gdzie szybkość ładowania bezpośrednio przekłada się na konwersję, złe zarządzanie obrazami to drogi błąd.
Widziałem sklepy, które traciły kilkanaście procent przychodu tylko dlatego, że ich zdjęcia produktowe były nieoptymalne. I nie chodzi o to, że były niskiej jakości – wręcz przeciwnie, często były przesadnie dopracowane, ważyły po 5 MB i ładowały się tak długo, że klient zdążył pójść do konkurencji.
Oto trzy błędy, które najczęściej popełniają firmy – i jak je naprawić, żeby nie stracić ani pieniędzy, ani pozycji w Google.
1. Używanie formatu JPEG dla zdjęć produktowych z przezroczystością
Brzmi jak banał, ale wciąż widzę to na co drugiej stronie. Ktoś przygotowuje zdjęcie produktu z przezroczystym tłem, zapisuje jako JPEG, a przezroczystość znika – zostaje białe tło, ale wokół produktu pojawiają się artefakty. W efekcie zdjęcie wygląda amatorsko.
Jeszcze gorzej, gdy obraz z przezroczystością zapisany jako JPEG jest konwertowany do formatu, który tej przezroczystości nie obsługuje – pojawia się czarne tło. Takie błędy obniżają zaufanie do sklepu.
Rozwiązanie: Jeśli potrzebujesz przezroczystości, używaj WebP z kanałem alfa lub AVIF. Obie formaty są nowoczesne, mają lepszą kompresję niż PNG i są obsługiwane przez większość przeglądarek. Dla pozostałych możesz użyć PNG jako fallbacku. Pamiętaj też, że w 2025 roku WebP to standard – Google od dawna promuje ten format, a jego wsparcie jest niemal powszechne. Nie ma więc wymówki, żeby dalej używać ciężkich PNG.
2. Zapominanie o srcset i sizes – ten sam obraz na wszystkie urządzenia
To klasyk. Firma wgrywa jeden obraz w wysokiej rozdzielczości (np. 1920×1920 px) i ustawia go na stronie jako szerokość 300 px. Przeglądarka i tak pobiera ten ogromny plik na smartfonie z małym ekranem. Efekt? Strona ładuje się dwa razy dłużej niż powinna.
Widziałem sytuację, gdzie po dodaniu srcset i sizes strona zaczęła ładować się w 1,5 sekundy zamiast w 4. To nie magia – to świadome serwowanie odpowiedniego rozmiaru obrazu dla danego viewportu.
Jak to zrobić? W HTML używasz atrybutu srcset, który wskazuje przeglądarce różne wersje tego samego obrazu, oraz sizes, który mówi, jaka przestrzeń zajmie obraz na ekranie.
Przykład:
<img src="produkt-800.jpg"
srcset="produkt-400.jpg 400w,
produkt-800.jpg 800w,
produkt-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Nazwa produktu">
Dzięki temu przeglądarka pobierze tylko ten plik, który jest potrzebny. Ogromna oszczędność danych i czasu.
3. Brak lazy loadingu dla obrazów poniżej folda
Kolejny powszechny błąd: ładujesz wszystkie obrazy na stronie od razu, nawet te, które są widoczne dopiero po przewinięciu. W efekcie na początkowy rendering czekasz dłużej, bo przeglądarka musi pobrać wszystko naraz.
Klient wchodzi na landing page – widzi puste miejsce na baner, a pod nim powoli pojawiają się zdjęcia. Zniecierpliwiony zamyka kartę.
Jak to naprawić? Wystarczy dodać atrybut loading="lazy" do znaczników <img> i <iframe>. To native HTML, wspierany przez wszystkie nowoczesne przeglądarki od lat. Możesz też użyć Intersection Observer do własnoręcznej implementacji, ale w większości przypadków native wystarczy.
Przykład:
<img data-src="produkt.jpg" alt="Nazwa" class="lazy" width="800" height="800">
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>
Dla prostoty możesz też użyć wbudowanego loading="lazy", ale pamiętaj, że starsze przeglądarki mogą go nie obsługiwać – warto mieć polyfill.
Podsumowanie
Obrazy to nie tylko kwestia estetyki – to fundament wydajności i pozycjonowania. Popełniając te trzy błędy, możesz tracić frakcje sekund, które zsumowane kosztują Cię konkretne przychody.
Zadbaj o odpowiedni format (WebP/AVIF), dostosuj rozmiar do urządzenia (srcset) i ładuj obrazy leniwie. To proste zmiany, które realnie zwiększą szybkość strony i poprawią wskaźniki Core Web Vitals.
Jeśli nie masz czasu na ręczną optymalizację, istnieją automatyzacje – ale to już temat na osobny artykuł. Na początek sprawdź, czy Twój sklep nie popełnia tych błędów, bo rozwiązanie jest często tańsze niż myślisz.
