Image Sprites – How to merge multiple images, and how to split them

An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use “CSS Image Sprites” function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge multiple images into a single image as well as manipulating CSS.

“Image Sprites” is strongly recommended for Web, because Web themes have many graphics as default. Therefore, reducing the number of images is necessary to let people as well as search engines visit your sites faster than before. Some times ago, I have already posted an example of a cartoon type animation with help of Image Sprites.

Let me give you an example for easier understandings. Here is lots of avatars I have to put into a page. Without Image Sprites, I have to insert 24 individual avatars into a page. It will generate 24 requests of your web server so that it will take a long time to load.

24 image files to load / 24 requests

Just 1 image file to load / 1 request

With using “Image Sprites”, Only one request and one loading time will be generated. Which one do you think better?

In addition, with the help of “Image Sprites”, you can make use of hover effect more easily. In this tutorial, I will describe how to use Image Sprites with hover effects (View Demo).

To get started (Preparation)

  1. You may need to prepare more than two same size images to be inserted into a page like the avatar image file above.
  2. For this tutorial, I will use these 6 images below as an example. All six buttons’ sizes are equal as 33×33.

3 left images will be used for normal links, and the rest of images will be used for hover effects.

This single image below will be used for “Image Sprites”.

Instruction

  1. Download .zip file or View Demo.
  2. Extract the compressed file onto your hard drive.
  3. Open “imagesprites.html” file using any TextEditor (Notepad/Dreamweaver).
  4. I will let you know some parts you need to replace so that you better modify some codes using text editor.
  5. This code is for this example so that your code will be different. You can refer to this code about how it works.
  6. Take a look at this part of the source code below:
.prev-button {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') 0 0
}
a:hover .prev-button {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') 0px -33px
}
.play-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -33px 0
}
a:hover .play-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -33px -33px
}
.next-button  {
    width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -66px 0
}
a:hover .next-button  {
    width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -66px -33px
}
image sprite
 As you can see, the first image’s position is “0 0” (.prev-button). The second image (.play-button) position is “-33px 0”. Because each width is set to 33px. Hence, the next image’s position should be “-66px 0”. On the other hand, for hover images, their Y position should be “-33px”, because each height is set to 33px.
  1. If you have set all, the next is to insert HTML codes for each image class like below:
<body style="background: transparent; margin: 0pt; ">
<div>
<a href="URL" target="_top"><img class="prev-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="play-button" src="/images/spacer.gif" /></a>
</div>

<div>
<a href="URL" target="_top"><img class="next-button" src="/images/spacer.gif" /></a>
</div>
</body>
  1. If you don’t want an image to be linked, remove href= “URL” target= “_top” tag.
  2. Replace class names such as “prev-button”, “play-button”, and “next-button” to yours.
  3. Make sure the classes doesn’t have “.” at the very front.
  4. Modifying codes is done. You can apply this technique to other merged images.
  5. Make sure “spacer.gif” as well as your merged image file are also uploaded to the right place such as “/images/”.
  6. You are ready to check how “Image Sprites” works correctly. You will reduce the number of server requests as well as save network bandwidth with this CSS technique.

Posted by: Dhiraj kumar

Reference: Useful HTML tags and their attributes

html
This tutorial is intented to introduce the HTML code basics to users that have never written a web site manually. Writing HTML code is pretty much writing tags, attributes and content. That’s why we’ll focus on how a tag and it’s attributes and contents are defined. Please Note that  In older versions of HTML, some tags did not require ending tags. With the emergence of XML and XHTML, you should be sure to include both beginning and ending tags.

Elements and tags

HTML is composed by a set of elements that are the basis of its structure. Elements are designed to give special information that will be used to compute their final representation. This means that where a tag is defined in the HTML code, something will happen in the representation of that document, that may be visual or not.

Body tag and attributes

<body>...</body> Contains the viewed portion of the document
<body bgcolor="color"> Sets the color of the background in hexadecimal code
<body background="filename.xxx"> Sets an image as a page’s background (wallpaper)
<body text="color"> Specifies the color of normal text in hexadecimal code
<body link="color"> Specifies the default color of unvisited links in hexadecimal code
<body alink="color"> Specifies the color of links on click in hexadecimal code
<body vlink="color"> Specifies the color of followed links in hexadecimal code

Font tag and attributes

<font>...</font> Changes font attributes for text within the tags
<font size="value">...</font> Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<font face="name">...</font> Sets the font face
<font color="color">...</font> Sets the font color using hexadecimal code

Image tag and attributes

<img> Embeds an image in the document at the location of the tag
<img src="url" alt="text"> Adds an image with a text description
<img src="url" alt="text" align="direction"> Aligns an image to the left, right, center, bottom, or top
<img src="url" alt="text" border="number"> Sets the size of the border around an image
<img src="url" alt="text" height="pixels"> Sets the height of an image
<img src="url" alt="text" width="pixels"> Sets the width of an image
<img src="url" alt="text" hspace="pixels"> Sets a horizontal margin to be placed around an image
<img src="url" alt="text" vspace="pixels"> Sets a vertical margin to be placed around an image
<img src="url" alt="text" usemap="map-name"> Designates an image as a client-side image map

Anchor tag and attributes

<a>...</a> Designates the origin and destination of a hyperlink
<a href="url">...</a> Creates a hyperlink
<a href="#name">...</a> Links to a target location in the current page
<a href="URL#name">...</a> Links to a target location in a page outside your site
<a name="name">...</a> Sets a target location within a document
<a href="mailto:email">...</a> Creates a mailto link
Optional attributes:
<a href="?" target="?">...</a> Specifies where the linked-to document is to be placed
<a href="?" rel="?">...</a> Sets up a relationship between the linked-to document and the current page
<a href="?" rev="?">...</a> Sets up a reverse relationship between the current page and the linked-to document

Table tags and attributes

<table>...</table> Generates a table
<table border="pixels"> Sets the size of cell borders
<table cellspacing="pixels"> Sets the amount of space between cells
<table cellpadding="pixels"> Sets the amount of space between a border and cell content
<table height="pixels" or "%"> Sets the height of a table
<table width="pixels" or "%"> Sets the width of a table
<td>...</td> Defines a table data cell
<td colspan="columns"> Sets a cell to span columns
<td rowspan="rows"> Sets a cell to span rows
<td nowrap> Prevents the lines within a cell from wrapping
<th>...</th> Defines a table header with bold, centered table data
<tr>...</tr> Defines a table row
<tr align="?"> or <td align="?"> Aligns the contents of a row or cell to the left, right, or center
<tr valign="?"> or <td valign="?"> Sets the vertical alignment of a row or cell to the top, middle, or bottom

Frame tags and attributes

<frameset>...</framesET> Specifies the layout of subsections in the main browser window
<frameset rows="value,value"> Defines the rows within a frameset
<frameset cols="value,value"> Defines the columns within a frameset
<noframes>...</noframes> Provides alternate content for browsers that do not support frames
<frame src="?"> Defines the appearance and content of a single frame
<frame name="name"> Labels the frame for targeting by other frames
<frame marginwidth="#"> Sets the margin width of a frame
<frame marginheight="#"> Sets the margin height of a frame
<frame scrolling="value"> Creates a frame scrollbar
<frame noresize> Prevents the resizing of a frame

Form tags and attributes

<form>...</form> Generates a container for all form elements
<form action="url"> Designates the path of the script to process input from the form
<form method="get|post"> Instructs the browser how to interact with the form URL
<form accept="media type"> Defines which MIME types are supported by the server processing the form
<form accept-charset="text"> Defines which character sets are supported by the server processing the form
<form enctype="media type"> Defines the format of the submitted data
<option> Defines each menu item
<select name="name">...</select> Generates a pull-down menu
<input type="checkbox"> Generates a check box
<input type="hidden"> Conceals a field from view
<input type="image"> Generates an image that acts like a Submit button
<input type="password"> Generates a one-line password box
<input type="radio"> Generates a radio button
<input type="text"> Generates a one-line text box
<input type="submit"> Generates a Submit button (send form)
<input type="reset"> Generates a Reset button (clear form)

Posted by: Dhiraj kumar