Čo je Srcset?
Srcset je atribút obrázka HTML, ktorý špecifikuje zoznam obrázkov, z ktorých si prehliadač môže vybrať na základe veľkosti a rozlíšenia obrazovky. Táto koncepcia je známa ako responzívne obrázky a zabezpečuje načítanie najvhodnejšej verzie obrázku pre rôzne podmienky zobrazenia.
Tu je príklad fungovania súboru 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="Príklad ilustrácie">V tomto príklade srcset hovorí prehliadaču, aby načítal obrázok široký 480 pixelov, ak je šírka zobrazovacieho priestoru menšia ako 600 pixelov. Ak je šírka zobrazovacej plochy väčšia ako 600 pixelov, prehliadač načíta väčší, 800 pixelov široký obrázok.
Prípadne môžete ako podmienku namiesto veľkosti nastaviť hustotu pixelov:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Ďalší príklad ilustrácie">Prečo je súbor Srcset dôležitý pre SEO?
Srcset je pre SEO kľúčový, pretože umožňuje prehliadačom načítať najvhodnejšiu veľkosť obrázka na základe vlastností zariadenia. Táto optimalizácia má niekoľko výhod:
- Vylepšená rýchlosť načítania: Väčšie obrázky majú väčšiu veľkosť súborov, čo môže spomaliť načítanie stránky. Načítaním obrázkov s vhodnou veľkosťou pre rôzne zariadenia pomáha srcset šetriť šírku pásma a skracovať čas načítania stránky.
- Lepšia používateľská skúsenosť: Rýchlejšie načítanie stránok zvyšuje používateľský zážitok, čo vedie k nižšej miere odchodov a vyššej angažovanosti.
- Výhody SEO: Rýchlosť načítania stránky je priamym faktorom hodnotenia pri vyhľadávaní na mobilných zariadeniach aj počítačoch. Optimalizácia obrázkov pomocou súboru srcset môže pozitívne ovplyvniť vaše umiestnenie vo vyhľadávačoch.
Osvedčené postupy pre responzívne obrázky
1. Skontrolujte odporúčania PageSpeed Insights
PageSpeed Insights je bezplatný nástroj od spoločnosti Google, ktorý poskytuje návrhy na optimalizáciu rýchlosti vašich webových stránok. Po zadaní adresy URL vašej webovej stránky môžete získať konkrétne odporúčania na optimalizáciu obrazu, ako napr:
- Aktualizácia formátu obrázka na lepšiu kompresiu.
- Zváženie lenivého načítavania pre obrázky mimo obrazovky alebo skryté obrázky.
- Správne nastavenie veľkosti obrázkov s cieľom zlepšiť čas načítania.
2. Používanie prvku Picture na umelecké smerovanie
Prvok <picture> umožňuje prehliadačom zobrazovať rôzne obrázky na základe vlastností zariadenia. To je užitočné, keď chcete zobraziť úplne odlišné obrázky, a nie len rôzne veľkosti toho istého obrázka.
Tu je príklad použitia prvku <picture>:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Príklad ilustrácie"> </picture>V tomto príklade sa príklad-obrázok.jpg alebo príklad-obrázok-2x.jpg zobrazí na šírke prehliadača 600px alebo viac, v závislosti od hustoty pixelov zariadenia. Pri šírke obrazovky menšej ako 600px alebo ak nie je podporovaný prvok <picture>, namiesto neho sa vykreslí prvok <img>. Na zabezpečenie kompatibility vždy uvádzajte prvok <img>.
3. Zabezpečenie správnych spätných väzieb
Vždy poskytnite záložný obrázok s atribútom src pre prípad, že prehliadač nepodporuje srcset alebo prvok <picture>. Tým sa zabezpečí, že sa obrázok vždy zobrazí bez ohľadu na možnosti prehliadača.
4. Používajte opisný Alt text
Vždy uvádzajte popisný alt text pre svoje obrázky. Zlepšuje to prístupnosť a poskytuje kontext pre vyhľadávače, čím sa zlepšuje SEO.
Záver
Používanie súboru srcset je dôležitým postupom na optimalizáciu obrázkov pre rôzne zariadenia, čím sa zabezpečí rýchlejšie načítanie a lepší používateľský zážitok. Dodržiavaním osvedčených postupov môžete zvýšiť výkonnosť svojej webovej lokality a SEO, čím sa stane efektívnejšou a prístupnejšou pre používateľov.
