Artmov: PSD to HTML

As loading speed optimization is highly important for websites, the CSS Sprites technique has proven to be of a must-have for every website to incorporate. The most important part in reducing the HTTP Request of a web page is to reduce the number of image that are being displayed. Various images can be grouped together in one single image file and later called only once with the CSS Sprites technique.

For example: A web page of 10 images separated can now group the images together in one large file image and call those 10 images via CSS.

Of course, this example isn’t limited only to buttons, but to pratically any images you might need to load. You can group together the buttons, the logo and the horizontal line of your webpage in one single image file and later on, calling each respective via CSS, with one single image. Also, with the help of optimizing images there’s loading speed optimization for each web page and the end result is less time spendt on loading the web page.

Overview of an example

The below grouped image is an example of 4 grouped buttons in one single image. Each button have it’s own style for the respective state: default, hover and active. With the help of CSS Sprites you are automatically loading all states for a button. In this case, when the user goes over a button the state effect is already loaded – thus, the web page doesn’t need to load the separated image for the hover state – in this type of situations the normal state disappeared and user must wait for the hover state causing a ~1 second disappearing effect of button.

The old example

The old examples refers to the situation I’ve posted above when for each button and their respective state there’s a separated image. In this case, only the default states of the buttons are loaded at first; the hover state will load only when the user clicks over the button – causing a ~1 second effect of disappering.

The default state of button “Login” - Image filename: btt-login.png

The hover state of button “Login” - Image filename: btt-login-hover.png

a.login { display:block; width:79px; height:22px; background:url(images/btt-login.png) no-repeat; }
a.login:hover { background:url(images/btt-login-hover.png) no-repeat; }

When user went over the button of Login only then the a:login:hover loaded, thus loading the btt-login-hover then.

The new approach

Thus, with CSS Sprites you are practically loading all states for each button inside the grouped image file – this way you are removing the disappearing effect caused by the old approach and also optimized your web page for less loading time, by reducing the HTTP Requests.

a.login { display:block; width:79px; height:22px; background:url(images/grouped-image-file.png) no-repeat -7px -4px; }
a.login:hover { background-position:-7px -34px; }

The -7px -4px; and -7px; and -34px; are the background position coordonates (X and Y) of the default state and the hover state of button Login.

The new approach x 2

As I’m applying the CSS sprites techniques to various buttons, even the form button elements I’m calling the grouped file image only once and display the respective button based on the background-position. Of course, I’m talking about adding the same extra style that you need to add when replacing text with an image inside an anchor tag: the text doesn’t disappear; Safari might still show the text, etc.

My approach is to add a general class when used to call any type of button inside the web page. The class “btt” has all the formatting style you need to add, but no background positioning. As each button might have different width and height, these values aren’t added at .btt; but in case of same values of width and height, you can add them to .btt

.btt { display:block; background:url(images/btt.png) no-repeat 0 0; text-indent:-9999px; line-height:0; font-size:0; overflow:hidden; }

The formatting style added will remove any text inside the HTML. The overflow:hidden; is optional, but in various situation the text is still showed as very small (showed on a Safari browser)

a.btt-login { width:79px; height:22px; background-position:-7px -4px; }
a.btt-login:hover { background-position:-7px -34px; }

The above example adds the width and height of button Login and it’s background positioning for default and hover state. The HTML line of codes are below:

<a href="#" title="Login" class="btt btt-login">Login</a>

The anchor Login is now called via two CSS classes: One general class, .btt, that calls the grouped image only once and the specific-class of the buton, .btt-login, that sets the width, height and backgroun positioning.

A SEO-friendly end result as the anchor isn’t called as an image, but as a HTML anchor tag. Of course, this can be applied to other buttons only by setting a new class for the new button (width, height and background-position)

.btt-register { width:79px; height:22px; background-position:-7px -68px; }
.btt-register:hover { background-position:-7px -97px; }

<a href="#" title="Register" class="btt btt-register">Register</a>

Advantages of this approach

As pointed in this post this approach has many advantages that aren’t possible by using the old way.

• Number of HTTP Requests are more reduced by grouping the images together and call the image only once;
• A better optimization as of loading speed – due to less HTTP Requests;
• Better maintainance of images used – The modifications are done in one single file