How to avoid too many image requests

11 Jul

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

1. CSS Image Sprites

An image sprite is a collection of images put into a single image.A web page with many images can take a long time to load and generates multiple server requests.Using image sprites will reduce the number of server requests and save bandwidth.

Instead of using three separate images, we use this single image (“img_navsprites.gif”):

navigation images

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the “img_navsprites.gif” image to show:

Example

img.home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
 
2. GLYPHICONS
GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

How to Use Icons in Your Code

To use the Bootstrap icons you will require an <span> tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:

<span class=”glyphicon glyphicon-class-name”></span>

Where "glyphicon-class-name" is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css.

For example, to use search icon you can place the following code just about anywhere:

  • <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
  • <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>

— The output of the above example will look something like this:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: