Co to jest srcset?
Srcset to atrybut HTML tagu <img>, który pozwala przeglądarce wybrać optymalną wersję obrazka w zależności od rozdzielczości ekranu i rozmiaru viewportu – jest kluczowy dla wydajności strony i Core Web Vitals, a tym samym wpływa pośrednio na SEO.
Składnia srcset:
- <img src=”image-800.jpg” srcset=”image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w” sizes=”(max-width: 600px) 400px, 800px”>
- deskryptory „w” oznaczają faktyczną szerokość obrazka w pikselach
- atrybut sizes mówi przeglądarce, ile miejsca obrazek zajmie na stronie
- na tej podstawie przeglądarka wybiera najmniejszy obrazek, który wygląda dobrze
Dlaczego srcset ma znaczenie dla SEO:
- strona ładująca obrazki 2000px na ekranie mobilnym 375px marnuje transfer i spowalnia ładowanie
- Core Web Vitals (szczególnie LCP – Largest Contentful Paint) zależy od optymalizacji obrazków
- Google Page Experience jest czynnikiem rankingowym – wolne strony tracą pozycje
- mobilna optymalizacja jest kluczowa w mobile-first indexing
Korzyści implementacji srcset:
- redukcja transferu danych (mniejsze obrazki na małych ekranach)
- szybsze ładowanie strony (lepsze LCP i FCP)
- lepszy user experience na urządzeniach mobilnych
- wsparcie dla wyświetlaczy Retina (2x, 3x)
- automatyczna adaptacja do warunków sieciowych
Implementacja w praktyce:
- większość nowoczesnych CMS (WordPress 4.4+, Shopify, Next.js) automatycznie generuje srcset
- narzędzia jak Cloudinary, imgix, Cloudflare Images robią to dynamicznie
- ważne jest generowanie wielu rozmiarów (np. 300, 600, 900, 1200, 1600px)
- format WebP/AVIF w połączeniu z srcset daje najlepsze rezultaty wydajnościowe
Szukasz konsultanta SEO dla firm SaaS i B2B? Zobacz, jak mogę pomóc Twojej firmie rosnąć dzięki SEO.
Ekspert SEO, który od blisko dekady buduje strategie pozycjonowania dla firm SaaS i nie tylko - takie, które działają mimo ciągłych zmian algorytmów i rosnącej roli AI w wyszukiwaniu.