At Open Force 2009 this past November, I attended a presentation by Kevin Schreiner (DotNetNuke on Speed and Performance) that spoke in part about
the use of Sprites. What on earth are sprites? Well I had heard of the
term sprites in relation to Computer Graphic programing, but not when it came to
Web sites and DotNetNuke in particular.
So what are Sprites in terms of a Web site? They present a way to reduce traffic
between the server and the client. Specifically, a sprite will contain a collection
of images in one file, that can be reference to supply various graphic elements
on a page. Since only one image file is required, the site will load faster. Additionally,
since one image is used, less memory is used by the browser to render the page.
How is this done? Well, after I had seen the presentation, I understood the
concepts, but had yet to put into practice as I had no real need. So it took
me until now to sit down a try to use sprites.
To be honest, I can't believe I waited. I thought it would be harder, and
I am not a seasoned web developer. I learned web page development through trial
and error -- lots of errors. But sprites proved to be straight forward.
WARNING: My example is going to use tables. If you find this offensive, or
can't believe tables are still being used, please stop reading now and go play with
your DIVs. <grin>
Still with me? Good. Here is a good reference on sprites and web page
develop http://www.alistapart.com/articles/sprites/
The first step to using sprites is to create the sprite. For my example, I wanted
to create a classic DNN container that surrounds a module with a simple thin line
border. So I collected the 8 images I will need - the four corners and the two horizontal
bars and two vertical bars. As the use of sprites has been around for quite some
time, there are many sites that can do this, I used
http://spritegen.website-performance.org/ to create my sprite image. Also
generated is a corresponding CSS file that defines the location of the images by
pixel location within the combined image.
I revised the part of generated CSS to the following:
.corner_topleft {background-position: 0 -673px; }
.corner_topright {background-position: 0 -754px; }
.tile_top {background-position:
0 -835px; }
.tile_left {background-position:
0 -373px; }
.tile_right {background-position:
0 -523px; }
.tile_bottom {background-position: 0
-292px; }
.corner_botleft {background-position: 0 -130px; }
.corner_botright {background-position: 0 -211px; }
This defines the relative locations of the 8 images. (Note: I had more that
8 images in the sprite, but these are 8 I will be working with)
Next I added the relative width and height as separate CSS classes.
.h31 { height:31px; }
.w23 { width:23px; }
then added classes to define the horizontal and vertical repeats needed.
.tileX { background-repeat:repeat-x; }
.tileY { background-repeat:repeat-y; }
And lastly added the location of the sprite image
.png {background: url(Example.png); }
While these CSS classes define the 8 images, I also need to define the container
in which the images would appear. The follow CSS class defined the container box.
.thebox {
margin: 10px; padding: 0;
position: relative;
border-collapse:collapse;
background-color:pink; }
.thebox td {
margin: 0; padding: 0; }
Now time for the Html. AS I warned early, I am using Tables, but frankly for
this scenario with a floating sized box, I found the table worked best ( really!)
<table border=0 class="thebox">
<tr>
<td id="tlc" class="png corner_topleft h31 w23" />
<td id="tmr" class="png tile_top h31 tileX" />
<td id="trc" class="png corner_topright h31 w23" />
</tr>
<tr>
<td id="lr" class="png tile_left w23 tileY" >
</td>
<td >This is test of sprites to complete the corners of a container using a table
</td>
<td id="rr" class="png tile_right w23 tileY" >
</td>
</tr>
<tr>
<td id="blc" class="png corner_botleft h31 w23" />
<td id="bmr" class="png tile_bottom h31 tileX" />
<td id="brc" class="png corner_botright h31 w23" />
</tr>
</table>
So lets look at this table. The table itself uses the CSS class called "thebox"
to define the basic shape and color -- TIP: I use pink when testing to ensure what
I am test stands out, then replace pink with the desired color.
On the first row in the first column of the the table, we will find the Left Corner
image, so the classes associated with the id=tlc (tlc= top left corner) are:
PNG to define the image
Corner_topLeft to define the position in the image
H31 to define the height of the corner image
L23 to define the width of the corner image
The next column contains the following classes:
PNG to define the image
Tile_top to define the position in the image
H31 to define the height of the corner image
TileX to define a horizontal repeat of the image
Each of the row columns have the appropriate classes to pull in the correct image,
resulting in the follow.
|
|
|
|
|
|
This is test of sprites to complete the corners of a container using a table
|
|
|
|
|
|
So what does this have to do with DotNetNuke? Consider what is required to display
this container. If used once on a page, the container requires 8 images to be loaded.
Even if the image is present in the cache, the image is verified to be up-to-date.
Each interaction taking time to complete. If the container is design used
a sprite then only one image is download or checked saving time which result if
a fast page display.
I will leave it up to the reader to implement sprites for any graphical containers
you may have.
Hope this helps
Paul.