Zvyšte výkon stránek pomocí CSS spritů

Pokud jste o této technice zvyšování výkonu webových stránek nikdy neslyšeli, tak zde zrovna uvádím velice užitečný online nástroj, s jehož pomocí to jistě zvládnete.

generator CSSNejprve však co to vlastně jsou CSS spirty. Na webových stránkách přibližně od roku 2007 používá technika označovaná jako CSS sprity. Jde o spojení většího počtu malých ikon do jediného obrázku. Účelem není šetření výkonu procesoru, ale snížení počtu požadavků na WWW server a tudíž zvýšení výkonu webu.

CSS spirty můžou umožnit snížení počet HTTP požadavků na server, které návštěvník stránek vyšle k získání prvků obsažených na stránce, aniž by o tom měl tušení. Principem této techniky je že obrázky na stránce se sloučí do jednoho většího a umístí se na určených X,Y souřadnicích. Pak pomocí CSS atributubackground-positionmůžeme nastavit vzniklý obrázek na pozadí různým elementům stránky a pomocí dalších CSS vlastností umístíme pozadí tak, aby požadovaný jednotlivý obrázek padl do viditelné oblasti elementu na stránce.

Pro použití techniky CSS spirtů také vznikl online nástroj  CSS Sprite generátor na adrese http://cs.spritegen.website-performance.org/

Tato technika může být velice efektivní při zvyšování výkonu stránek zejména tam kde jsou na stránce zobrazeny ve velkém počtu obrázky a ikony.

Tento nástroj CSS Sprite generátor  automatizuje proces vytváření CSS spritů

Stačí uploadovat ZIP archiv obsahující 2 nebo více obrázků (GIF, PNG or JPG) a bude vygenerován sprite i odpovídající CSS pravidla pro zobrazení jednotlivých obsažených obrázků.

Můžete využít i spostu potřebných nastavení jako je šířka, výška, ignorování duplicitních obrázků, pozadí, rozestupy, barvu pozadí a mnoho dalších.

Generátor podporuje formáty GIF, PNG a JPG. V případě volby GIF nebo PNG lze použít průhledné pozadí. Výchozím formátem je PNG.

Podobný nástroj na generování CSS spritů s názvem CSS Sprites generátor naleznete zde.

Pokud se chcete zabývat touto problematikou hlouběji tak doporučuji web http://css-tricks.com/css-sprites/ . je sice v angličtině, ale rozhodně stojí za to. Naleznete zdenejenom informace o CSS spritech, ale i spoustu užitečných rad pro práci s CSS.

Related Posts

  • 97
    Jak již napovídá název článku tak je na internetu možnost využití vytváření kaskádových stylů online a zdarma, dále jen CSS. Nejprve však co to vlastně jsou Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS). Kaskádové styly se zkratkou CSS je jazyk pro popis způsobu zobrazení stránek napsaných…
    Tags: css, a, online, nástroje, internetu, zdarma, programování, web, tvorba
  • 95
        Jste majitelem a tvůrcem webových stránek? Pokud ano zvažte přidání vlastního tlačítka a zároveň umožněte jeho sdílení na ostatních webech. Jde o tlačítko s rozměry 80x15px které patří k standardním rozměrům pro toto použití. Toto tlačítko je hodně rozšířené pro sdělení různých informací jako jsou například ranky, validita, SEO…
    Tags: a, online, o, nástroje, internetu, zdarma, programování, web, tvorba
  • 95
    Dnes se vzrůstající dostupností a rychlostí internetu se velice často využívá poslech rádia online. Postupem času a s dostupnými technologiemi je snadné vysílání radia do éteru online. Když jsem poslouchal rádio online v minulosti nestálo to za nic a výběr a dostupnost byla také slabá. Dnes je to již standardem každého radia.…
    Tags: online, a, web, o, internetu, nástroje, zdarma, programování, tvorba
  • 89
    Pokud pro svojí práci na internetu požíváte textové editory, jako je například MS word určitě jste narazili na problém při kopírování do HTML kódu. Já jsem to často řešil kopírování do poznámkového bloku a zpět. WordOff zvládne úspěšně vyčistit HTML kód. Při kopírování do HTML se tak mohou dostat nechtěné…
    Tags: a, nástroj, online, nástroje, internetu, zdarma, programování, web, tvorba
  • 88
    Snadné programování v PHP online či na cestách? Ano se službou PHPanywhere to dokážete jednoduše a zdarma online kdekoliv budete chtít. Jediné co potřebujete je připojení k internetu a snadné registrace kterou zvládnete během minuty. Pro aktivaci musíte vyplnit registrační údaje, kde si zvolíte uživatelské jméno a heslo a registraci…
    Tags: a, online, zdarma, nástroje, internetu, programování, web, tvorba
, ,

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *