Some Image Handling Examples

Reduce page loading time by:

• Accessing image as data uri within the css
• Grouping all common\small icons into a single sprite file
• & Using css to select the area needed

Sprite file

Icon\sprites, loaded from a single image asset.
These icon are 40px square, all within this single .svg file, loaded as a data URI to further improve performance

Try these: There should be no delay for selecting, hovering etc because the image file is already loaded and the area to be displayed is by changing background-position in css.

Data URI

This biggly image (not too biggly, its just a demo) loaded as background into DIVs

These are loaded in CSS as data URI, so there should be no delay in loading.