Using CSS Sprites for icons and images

[Istofix]

Its worthy to have the Coolite set of icons and images being retrieved using CSS sprite. This will enhance the overall performance by reducing the number of requests to the webserver. One images contating all icons , anothe one contating the rest of bg images beind requested for one time and the cacnhed to the client broswer thas very efficent.

Hope to see this feature being added to the next release.

[Timothy]

https://examples1.ext.net/#/Getting_.../Icon_Summary/

Image is 900KB+, minus the text I would peg its size at 300KB. I would sooner trade for round trip calls over a 300KB download on each page load.

Cheers,
Timothy

[geoffrey.mcgill]

Hi Istofix,

The framework makes heavy use of CSS sprites throughout (eg, Button, HtmlEditor). Setting the .Icon property of a control will generate an individual request for that specific icon.

Currently there are 1700+ individual .png icons embedded within the assembly. As noted by Timothy above, if all the Icons were combined into one super .png, the resulting file would be huge and you would potentially be downloading this file just to use a couple icons.

This does bring up a good performance optimization tip... if you know exactly what Icons you're using within the app, you could manually combine the Icons into a custom .png, create the appropriate .css class, then set the .IconCls property instead of .Icon.

An interesting extension that we (or anyone), could add to the <ext:ScriptManager> would be a <Icons> property, which would on-the-fly combine the configured Icons into a sprite and render out the appropriate .css class. That's just a thought, but seems like it would be helpful.

Example (proposed)

<ext:ScriptManager runat="">
    <Icons>
        <ext:Icon Icon="Add" />
        <ext:Icon Icon="Wrench" />
        <ext:Icon Icon="Lorry" />
    </Icons>
</ext:ScriptManager>

Hope this helps.