Jak jsou na stránce nebo webu implementovány CSS sprite?

CSS sprite jsou technikou spojování několika obrázků do jednoho velkého obrázku. To se provádí pomocí CSS, přičemž viditelnost potřebného fragmentu velkého obrázku se řídí vlastnostmi background-image, background-position a background-repeat.

Výhody:

• Snížení počtu HTTP požadavků. Místo načítání více malých obrázků se načte jeden velký.
• Zrychlení načítání stránky. Méně požadavků na server, rychlejší vykreslení.
• Úspora datového přenosu. Celková velikost souboru je často menší než součet jednotlivých obrázků.

Implementace:

1. Vytvoření sprite: Spojení obrázků pomocí grafických editorů nebo speciálních online nástrojů/kompilátorů (například Webpack s pluginem css-spritesmith-plugin).

2. CSS: Pro prvky, které používají obrázky ze sprite, se použijí následující styly:

   .icon {
     background-image: url('path/to/sprite.png'); /* Cesta k souboru sprite */
     background-repeat: no-repeat; /* Obrázek se neopakuje */
     display: block; /* nebo inline-block, podle prvku */
     width: 32px; /* Šířka potřebné ikony */
     height: 32px; /* Výška potřebné ikony */
   }
   
   .icon-home {
     background-position: 0 0; /* Pozice potřebného fragmentu ikony "Domů" */
   }
   
   .icon-settings {
     background-position: -32px 0; /* Pozice potřebného fragmentu ikony "Nastavení" */
   }
   

V poskytnutém CSS kódu .icon definuje obecné vlastnosti pro všechny prvky používající sprite. Třídy jako .icon-home a .icon-settings určují konkrétní pozici potřebného obrázku uvnitř sprite pomocí background-position.