Co je Srcset?
Srcset je atribut obrázku HTML, který určuje seznam obrázků, z nichž má prohlížeč vybírat na základě velikosti a rozlišení obrazovky. Tento koncept je známý jako responzivní obrázky a zajišťuje načtení nejvhodnější verze obrázku pro různé podmínky zobrazení.
Zde je příklad fungování sady srcset:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Příklad ilustrace">V tomto příkladu srcset říká prohlížeči, aby načetl obrázek o šířce 480 pixelů, pokud je šířka zobrazovacího panelu menší než 600 pixelů. Pokud je šířka viewportu větší než 600 pixelů, prohlížeč načte větší, 800 pixelů široký obrázek.
Případně můžete jako podmínku místo velikosti nastavit hustotu pixelů:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Další příklad ilustrace">Proč je Srcset důležitý pro SEO?
Srcset je pro SEO klíčový, protože umožňuje prohlížečům načíst nejvhodnější velikost obrázku na základě vlastností zařízení. Tato optimalizace má několik výhod:
- Vylepšená rychlost načítání: Větší obrázky mají větší velikost souborů, což může zpomalit načítání stránek. Načtením obrázků s vhodnou velikostí pro různá zařízení pomáhá srcset šetřit šířku pásma a zkrátit dobu načítání stránek.
- Lepší uživatelská zkušenost: Rychlejší načítání stránek zlepšuje uživatelský zážitek, což vede k nižší míře odmítnutí a vyššímu zapojení.
- Výhody SEO: Rychlost načítání stránky je přímým faktorem hodnocení pro mobilní i desktopové vyhledávání. Optimalizace obrázků pomocí srcsetu může pozitivně ovlivnit pozice ve vyhledávačích.
Osvědčené postupy pro responzivní obrázky
1. Zkontrolujte doporučení PageSpeed Insights
PageSpeed Insights je bezplatný nástroj společnosti Google, který poskytuje návrhy na optimalizaci rychlosti webu. Po zadání adresy URL vaší webové stránky můžete získat konkrétní doporučení pro optimalizaci obrázků, jako např:
- Aktualizace formátu obrázku pro lepší kompresi.
- Zvážení líného načítání pro obrázky mimo obrazovku nebo skryté obrázky.
- Správné nastavení velikosti obrázků pro zlepšení doby načítání.
2. Použití prvku Picture pro umělecký směr
Prvek <picture> umožňuje prohlížečům zobrazovat různé obrázky podle vlastností zařízení. To je užitečné v případě, že chcete zobrazit zcela odlišné obrázky, nikoli pouze různé velikosti stejného obrázku.
Zde je příklad použití prvku <picture>:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Příklad ilustrace"> </picture>V tomto příkladu se example-image.jpg nebo example-image-2x.jpg zobrazí na šířce prohlížeče 600px nebo více, v závislosti na hustotě pixelů zařízení. Při šířce obrazovky menší než 600px nebo pokud není podporován prvek <picture>, bude místo něj vykreslen prvek <img>. Pro zajištění kompatibility vždy uvádějte prvek <img>.
3. Zajištění správných zpětných záloh
Vždy uveďte náhradní obrázek s atributem src pro případ, že prohlížeč nepodporuje srcset nebo prvek <picture>. Tím zajistíte, že se obrázek zobrazí vždy bez ohledu na možnosti prohlížeče.
4. Používejte popisný Alt Text
U obrázků vždy uvádějte popisný text . Zlepšíte tím přístupnost a poskytnete kontext vyhledávačům, čímž zlepšíte SEO.
Závěr
Použití sady srcset je důležitým postupem pro optimalizaci obrázků pro různá zařízení, což zajišťuje rychlejší načítání a lepší uživatelský zážitek. Dodržováním osvědčených postupů můžete zvýšit výkonnost svých webových stránek a zlepšit jejich SEO, čímž je zefektivníte a zpřístupníte uživatelům.
