It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average). Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Cool Sprites – Free Pure CSS menu for download

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. The photoshop source is also available for download, so that you can customize it as per your need. Since this menu is largely dependent on the background image, you need to customize the image to alter the link label, color, size etc.

Cool Sprites – LIVE PREVIEW

Read the rest of this entry »

Have you ever felt the need for holding an embedded image inside an HTML file, without referring to an external image file? Personally I felt like so many occasions, where the need for a completely self contained HTML page, with all its supporting images embedded within that page itself. This may seem pointless in normal situations, but it can prove very useful when we want to make a standalone page, that we can pass on to other people. We give them just one HTML file. They do not even need to unpack anything, they can simply open the file in their browser, and all the images and embedded objects are immediately displayed. They can do this even without an internet connection.

Below you can see two images first one is included in the traditional way by referring to an external file, and the later by using data URI.

          

Try right-clicking the above images and check the file location in the properties panel. You can see the difference.

With Data URI (Uniform Resource Identifiers) we can easily do this.

What is Data URI Scheme?

Data URI scheme defined in IETF standard RFC 2397, as an URI scheme that allows inclusion of small data items inline, as if they were being referenced to as an external resource. They tend to be far simpler than alternative inclusion methods, such as MIME with cid: or mid: As per the wording in the RFC, data: URIs are in fact URLs, although they do not actually locate anything. Read the rest of this entry »