OneImage

• Download OneImage Version 1.1 - 261.56 KB
• Download OneImage Version 1.0 - 237.53 KB

Introduction

This article is about an httpmodule designed to create one image out of many for faster loading and fewer web server HTTP requests. Module creates auto generated CSS image maps of positions for displaying on a webpage using background positioning. The module also handles creating mouse over image effects. This module was designed to run with ASP.NET websites and uses the web.config to control the image and CSS directories. It can also append to existing CSS files instead of creating new ones to keep old webpage CSS intact.

General Usage and Reasoning

The general purpose to implement this code is to increase web server response time by removing multiple image HTTP requests. When clients access your website through their browser, they request all of the images for your webpages one by one. If you have many images like I do, this can create a giant workload for your web server to serve up. So to resolve this issue, why can't we just create one image out of many with CSS mappings to the position within the image file. By doing this, your server then only receives one request for all your images, which it can handle efficiently fast. The other benefits of oneimage are listed below:

1. Less chance of corrupt file transmission
2. Faster image downloads because it's all in one file
3. Enable caching for one image to keep it in memory
4. Less HTTP Requests and Responses
5. Keeps people from using your images directly on their sites
6. Makes image rollovers simple
7. Turns GIF formats into PNG, to not be binded by GIF copyrights

Image Formats Handled

The following image formats are handled by the oneimage module.

1. JPEG
2. JPG
3. GIF
4. BMP
5. PNG
6. ICO
7. TIF

Using the Code

To use the code, you must copy the WebsiteHandler.dll to the bin folder of your ASP.NET website. You must also add the following lines to your web.config file.

<configSections>
  <section name="oneimage" type="WebsiteHandler.OneImageConfigHandler, WebsiteHandler"/>
</configSections>
<oneimage>
  <image imagedirectory="C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\images" 
   outputimagepath=
	"C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\images\oneimage.png" 
   outputcsspath=
	"C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\css\oneimage.css" 
   outputimagewebpath="../images/oneimage.png" />
</oneimage>
<httpModules>
  <add type="WebsiteHandler.OneImageHandler,WebsiteHandler" name="OneImageHandler" />
</httpModules>

Description of web.config Settings

The configsection above allows you to specify multiple oneimages by using the oneimage node. The reason I implemented this feature is in case you have groups of images that only belong to certain sections of your website, then there is no need to load them all together in one mass file, you can then separate them into several smaller mass files. The oneimage xmlnode has the settings for the images in an xmlnodelist. To create a oneimage, you need to specify the following attributes:

OneImage Source Code Explanation

OneImage.cs contains all of the source code to create oneimage. Inside, this file has 5 classes:

1. OneImage - Main class for creating the actual oneimages. It has GDI+ graphic methods for merging the images into one file. Also has CSS methods for creating position mappings.
2. CombineImage - This class holds the information for a single image to be merged into a oneimage. It has filename, path, actual image and positioning.
3. OneImageHandler - This handles the creation of the oneimages and CSS when the server is started instead of per each request.
4. OneImageConfigHandler - This handles the parses of the oneimage xmlnode in the web.config.
5. OneImageConfigItem - This class is designed to hold one XML node image from the xmlnodelist in the oneimage xmlnode.

OneImage Public Methods

• Combine() - Combines images in a directory into one image and also creates CSS mapping file. All the work is done from this method.

Html Source Code Examples

To create images on webpages is pretty easy. There are many ways to do it. I will list the most common ways using the dom id attribute. Because the oneimage is constructed from compiling all the images found in the specified image directory, it uses the original image file names as its unique id. For example if your file name is "logo.gif" then your id for dom is "logogif". Notice the "." is stripped out. The reason for this is CSS will not allow the "." in the CSS definition. The following code will display an image because it uses background-image and background-position in the CSS mapping file:

<img id="logogif" />

or

<div id="logogif"></div>

or

<span id="logogif"></div>

Now because the oneimage uses the id tag directly for CSS, you might be asking how do I specify other CSS styles for my images. Well there are several ways to do that too, by class="", add same name #logogif{more styles}, or by adding directly to the HTML tag with style="".

How to Create Mouseovers

OneImage has a special feature I created into it that allows you to create images mouseovers easily. To implement the following feature, all you need to do is create two image files, one down and one over. For oneimage to auto generate the CSS for hover and focus, you need to name the files like so:

• MouseOver - "filename_over.ext"
• Normal - "filename.ext"

It then auto generates the CSS to look like this:

#filename{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px 0px; }
#filename:hover{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px -10px; }
#filename:focus{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px -10px; }

And that's how the magic happens... You get easy mouseovers and downs powered by CSS styles, which should work in all CSS compliant browsers.

Improvements Needed

1. Compression for the oneimage output PNG
2. More CSS options for creating styles within auto generated CSS
3. More organized use of whitespace for oneimage
4. Add a FileSystemWatcher to track when directory images change, then have it recreate the oneimage.
5. Add in "_parsing" to allow the same image in multiple dom tags.
6. Allow for different file type output, other than png, by using web.config to set it. 
7. Add in caching support. 

History

• Version 1.1 - Mar 08, 2009 - OneImage Revamped to Include FileSystemWatchers for changes on image directories. Web.config settings added to turn on auto refresh. Fixed file locking issues with reads and writes of images and css.
• Version 1.0 - Feb 28, 2009 - OneImage Created

Terms and Conditions For Use, Copy, Distribution, and Modification

THIS CODE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS CODE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.