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:

---

Example 1.0:We will show only Google Icon.

Leftcrop: 144px, Topcrop: 0px, Width:137px, Height: 135px

---

Output of Example 1.0:

As you see, Only Google Icon was showed but what is that? The image is still occupying same place. If we don’t want this, we should define image position. Look at example 1.1:

---

Example 1.1:

---

Output of Example 1.1:

If this method doesn’t work on IE8, then you can use following code:

---

We tried to show you that the simple method of clipping image with CSS. You will like this