Ušetrím niečo jedným obrázkom s desiatkami ikoniek?
Určite poznáte „fintu“, kedy vytvorím jeden veľký „obrázok“ s porozkladanými ikonkami miesto viacerých samostatných súborov. Najčastejšie sa to používa na ikonky, ktoré majú meniť svoj vzhľad pri rôznych „eventoch“. Prejdete myškou ponad ikonku a ona sa zmení. Vtedy obe verzie urobíte ako jeden obrázok, kde hore je jeden stav a dole druhý. Dôvodom je racionalizácia počtu spojení na server. Je to však vždy výhodné? Nemôže to spôsobovať inde výkonnostné problémy?
V kóde takýto obrázok riešime takto:
[code]
HTML:
<a class="ikonka" href=""><span>Ikonka</span></a>
CSS:
a.ikonka { background: url(‚ikonka.png‘) no-repeat top left; display:block; width:32px; height: 32px; }
a.ikonka:hover { background: url(‚ikonka.png‘) no-repeat bottom left; display:block; width:32px; height: 32px; }
[/code]
Predpoklad je, že ikonka.png je obrázok o rozmeroch 32x64px, hore je jedna ikonka a dole jej verzia pre „hover“.
Mohlo by ma napadnúť: veď ja mám tých ikoniek 40. Tak urobím jeden veľký plát s ikonkami. Poukladám ich vodorovne vedľa seba, prvý rad bude normálna verzia a druhý rad zasa verzia pre hover. Prípadne ešte prefíkanejšie, urobím šachovnicu s naukladanými desiatkami miniobrázkov. Takýto súbor je už veľký aj niekoľko desiatok kilobajtov, možno aj stovky.
[code]
a.ikonka1 { background: url(‚ikonka.png‘) no-repeat 0px 0px; display:block; width:32px; height: 32px; }
a.ikonka1:hover { background: url(‚ikonka.png‘) no-repeat 32px 0px; display:block; width:32px; height: 32px; }
a.ikonka2 { background: url(‚ikonka.png‘) no-repeat 0px 32px; display:block; width:32px; height: 32px; }
a.ikonka2:hover { background: url(‚ikonka.png‘) no-repeat 32px 32px; display:block; width:32px; height: 32px; }
a.ikonka3 { background: url(‚ikonka.png‘) no-repeat 0px 64px; display:block; width:32px; height: 32px; }
a.ikonka3:hover { background: url(‚ikonka.png‘) no-repeat 32px 64px; display:block; width:32px; height: 32px; }
…
[/code]
V CSS potom iba „posúvam“ šachovnicu pre každý obrázok pomocou background a nastavujem šírku/výšku prvku. V HTML kóde potom môžem odkazovať na takto definované triedy (class).
Ja si kladiem otázku, či naozaj niečo ušetrím. Samozrejme, prehliadač pri požiadavke na súbor s obrázkom použije „jedno“ spojenie, obrázok si uloží do cache. Potiaľto je to dobre.
Lenže následne musí prehliadač spracovať dané CSS, renderovať HTML kód a keď si uvedomím, že musí pre každý jeden výskyt class pracovať s kompletným veľkým obrázkom, tak nie som si istý tým, že to neovplyvní výkon renderovania stránky.
Uvedomujem si, že to záleží na konkrétnom renderovacom nástroji avšak obávam sa, že väčšina renderovacích nástrojov s tým bude mať zrejme väčší problém, musí opakovane pracovať s väčším objemom dát síce jedného veľkého šachovnicovitého obrázku ale opakovane dokola.
Preto si myslím, že táto technika nemusí podávať očakávateľné efekty. Čo si myslíte vy?
