SVG a PNG Sprite, zrychlujeme podruhé

Pavel Zrychlení webu, JavaScript, CSS

Opět si zrychlíme web pomocí velmi staré techniky sprite, neboli vložení více obrázků do jednoho. Ukážeme si moderní SVG metodu a jak zjistit její podporu přes JavaScript Modernizr. Pro nepodporované prohlížeče si vytvoříme PNG fallback.

SVG a PNG Sprite, zrychlujeme podruhé

1. díl: Cachujeme, GZipujeme, zrychlujeme
2. díl: SVG a PNG Sprite, zrychlujeme podruhé
3. díl: Minifikace - zrychlujeme po třetí
4. díl: DataURI - zrychlujeme po čtvrté
5. díl: Fiddler - web debugger 
6. díl: Nastavení GZip komprese u souborů s fonty
Bonus: Automatizace s Gruntem - většinu zde popsaných technik můžete zautomatizovat pomocí Gruntu, ušetří vám to čas i námahu

Sprite

Technika [sprajtů] se začala využívat v prvních 2D hrách. Tehdy v jednom obrázku byly všechny pohyby postaviček, a s obrázkem se hýbalo podle potřeby. Využívalo se rychlejšího načtení jednoho velkého souboru než několika malých. Ze stejného důvodu se sprite využívá i nyní na webu.

Je to jednoduché, vezmeš všechny ikonky, naskládáš je do jednoho obrázku a máme hotovo. Pak jej nastavíš jako pozadí elementu a jen pozadím hýbeš.

V Google Hangouts na webu (v GMailu a na G+) se smajlíci animují právě pomocí sprite. Výhoda je jasná, animace se dá pustit pozpátku, přeskakovat na různá místa apod.

SVG a PNG sprite

Nevýhoda obrázku je, že má fixní velikost. V dnešní době Retiny a jiných obrazovek s pixel-ratio > 1 se náš sprite zobrazí neostře. Proto na řadu nastupuje SVG. Tento formát dokáže uložit vektory, takže ikonky musíš nakreslit v křivkách!

Nakreslíme všechny ikony, exportujeme do SVG a rovnou i do PNG. To pro prohlížeče, které SVG nepodporují. 

Začínáme!

Detekce podpory SVG

Pro zjištění podpory SVG si stáhneme Modernizr. Javascriptovou knihovnu dělanou pro zjištění podpory všech možných vlastností. Následující kód využívá také knihovnu jQuery.

$(function(){ //po načtení DOM
  if( ! Modernizr.svg ){ // jestliže nepodporuje SVG
    $("body").addClass("no-svg"); //přidáme classu no-svg
  }
});

Použití sprite v CSS

V příkladu jsou 2 způsoby použití, buď budu vkládat pozadí do elementu, nebo využiji pseudo selektor :before, použití se samozřejmě dají kombinovat.

.icon, .beforeIcon:before{
  background: url('sprite.svg') 0px 0px no-repeat;  
  display: inline-block; /* pro možnost nastavit výšku elementu */
  height: 16px; /* určíme si velikost ikon */
  width: 16px; 
}
.beforeIcon:before{
  content: ''; /* nutnost u :before a :after pseudo selectorů */
}
body.no-svg .icon, body.no-svg .beforeIcon{
  background-image: url('sprite.png'); /* změníme pouze URL */
}
/* Ikonka domečku se nachází ve 2. sloupci a 3. řádku */
.icon.home, .beforeIcon.home:before{
  background-position: -16px -32px;
}

Použití v HTML

Při použití s img elementem vkládáme prázdný obrázek, 1x1px průhledný. Některé prohlížeče ukážou chybovou hlášku o nenalezeném obrázku.

<!-- s vnitřním elementem -->
<a href="#"><img src="blank.png" class="icon home">Odkaz s ikonkou</a>
<span><span class="icon home"></span>Element s ikonkou</span>
<!-- s pseudo selectorem :before -->
<a href="#" class="icon home">Odkaz s ikonkou pomocí :before</a>
<span>Element s ikonkou s :before</span>

Příklad s použitím ke stáhnutí sprite.zip (samotného obrázku si nevšímejte)
Přiložen screen z IE7, kde není podpora SVG, ale ani pseudo selektoru :before

Příklady

Zde je ukázka 3 spritů, které jsem někdy použil.

  • V levo nahoře z portfolia a blogu (1.5x zvětšený)
  • V levo dole ze systému SUN Outdoor
  • Obličeje jsou z webu 100 pro Adru

Sprite - ukázka

Jestli se vám článek líbil, napište mi do komentářů! Příště se podíváme na DataURI a minifikaci CSS a JS skriptů.

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Tesy

http://tlukas.eu 30.9.2014 16:22

Celé povídání o sprite je fajn, akorát nevím, jestli si obrázky do jednoho skládáš v nějakém editoru sám a nebo používáš nějaký generátor. Použít nějaký generátor je přeci o něco lehčí, máš nějaký oblíbený popřípadě nějaký na doporučení?

Odpovědět

Pavel

http://www.kutac.cz/ 30.9.2014 21:40

Nepoužívám žádný editor přímo na sprite. Jsou určitě nástroje, které to umí, ale nevím na kolik si poradí s různými rozměry obrázků.

Pro mně je jednodušší si je poskládat sám. Ať už Photoshop nebo GIMP umí vodítka, a k nim si to přichytíš.

Roman Janko

http://rjwebdesign.cz 1.2.2018 17:15

Sprity lze snadno generovat přes GULP / GRUNT nebo CSS preprocesor (konkrétně SASS při použití COMPASSU).

Odpovědět

Novinky z blogu

Možnosti vložení obrázků do emailů

Obrázky lze do těla emailů vkládat třemi způsoby. Každý má své výhody i nevýhody, některé fungují lépe než jiné. Největší problém ale stejně jsou emailoví klienti. Některé...

Další články