We usually add icons to our web pages. There are a lot of different ways for doing this. For example: We can use background image, we can use unique small image files (Usually, this method is used). However, we will use the best method. Namely, Image Cropping Method using CSS.

This method makes faster our web pages. If we use many unique small image files, number of requests (that we sent to server for each image) will increase. So, loading images takes long time. However, if we use single image including all icons, size of image will increase but number of requests will decrease.

We have an image file named icons.jpg.

Original view of icons.jpg:

Structure 1.0: Click to Read Complate Article »