Trong quá trình phát triển web site vấn đề performance là một yếu tố rất quan trong, ảnh hưởng nhiều tới trải nghiệm của người dùng.

Có một cách để tăng performance bằng cách giảm số lượng các request http để lấy các file ảnh, giảm thời gian chờ phản hồi của trình duyệt.

Css image Sprites là cách ghép nhiều hình ảnh vào một file ảnh lớn và sau đó sử dụng thuộc tính của css để lấy vị trí một phần trên hình lớn.



<!DOCTYPE html>
<html><head>
   <meta charset="utf-8">
   <title>JS Bin</title></head><body><input type="image" alt="Cut"></body>
</html>



input[type="image"] {
  width: 24px;
  height: 26px;
  border: 1px solid gray;
  background: url(http://i.stack.imgur.com/byld6.png) -60px 0 no-repeat;
}



background: url(http://i.stack.imgur.com/byld6.png) -60px 0 no-repeat;

Background là như nhau chỉ có vị trí cắt hình là thay đỗi!


## Happy coding