Čo je Srcset?
Atribút srcset je používaný v HTML na definovanie rôznych verzií obrázka, ktoré sa majú zobraziť na rôznych rozlíšeniach obrazovky alebo veľkostiach zariadení. Umožňuje webovým vývojárom poskytnúť viacero zdrojov obrázka v značke <img>, z ktorých prehliadač vyberie najvhodnejšiu verziu na základe aktuálneho rozlíšenia a hustoty pixelov zariadenia, na ktorom sa web zobrazuje. Toto je kľúčové pre responzívny web design, pretože zabezpečuje, že obrázky sa zobrazujú čo najoptimálnejšie na rôznych zariadeniach.
Prečo je Srcset dôležitý?
Srcset je dôležitý pre optimalizáciu webových stránok, keďže pomáha zabezpečiť, že obrázky sú správne zobrazené na rôznych zariadeniach s rozličnými rozlíšeniami. To nielenže zlepšuje vizuálnu kvalitu obrázkov, ale tiež prispieva k rýchlejšiemu načítaniu stránok, pretože menšie obrázky môžu byť poskytnuté pre zariadenia s nižším rozlíšením, čím sa znižuje objem prenášaných dát.
Iné označenie pre Srcset
- Responzívne obrázky
- Atribút pre zdrojové sady
Konkrétny príklad Srcset
Webová stránka používa <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w"> na zobrazenie rôznych veľkostí obrázka v závislosti od šírky zobrazovacieho zariadenia. Prehliadač automaticky vyberie strednú verziu obrázka (medium.jpg) pre zariadenia s šírkou do 1000 pixelov a veľkú verziu (large.jpg) pre zariadenia s šírkou viac ako 1000 pixelov.
Ako používať Srcset?
Na použitie srcset, definujte atribút srcset v značke <img> a špecifikujte rôzne verzie obrázka spolu s ich šírkou v pixeloch (w) alebo hustotou pixelov (x). Prehliadač potom vyberie najvhodnejšiu verziu obrázka na základe aktuálneho rozlíšenia a hustoty pixelov zobrazovacieho zariadenia.
