Tối ưu hóa website sử dụng CSS Sprite

1. CSS Sprite là gì?

CSS Sprites do Dave Shea đề nghị lần đầu năm 2004. Thuật ngữ “Sprites” thực ra là kỹ thuật đã được dùng từ trước trong các video games và sau này là trong các website. Tất cả các hình ảnh được đặt vào 1 file hình duy nhất, sau đó dùng thuộc tính background-position của CSS để hiện ra đúng vị trí cần thiết. Cách này cũng được áp dụng với các hiệu ứng hover, active hay focus để tạo các nút bấm động một cách mượt mà hơn.

2. Tại sao dùng CSS Sprite ?

Với kỹ thuật này thì chỉ có 1 file hình lớn duy nhất được load thay vì hàng loạt hình nhỏ được load lần lượt. Nhiều người cho rằng, load những hình nhỏ thì nhanh hơn load 1 hình lớn. Điều này không chính xác. Mỗi hình khi load sẽ tạo 1 HTTP-Request, mỗi request như vậy sẽ phải “open” và “close” 1 socket mới, càng nhiều hình thì càng nhiều request, và điều này ảnh hưởng lớn tới tốc độ của website. Ngoài ra dễ thấy hơn là khi đặt tất cả hình ảnh vào trong 1 file thì kích thước file giảm đi đáng kể.

3. Nguyên tắc hoạt động như thế nào ?

Nguyên tắc hoạt động ở đây là sẽ load từng phần của ảnh ứng với các thành phần của web.

B1: Ban đầu bạn cần chuẩn bị một file với các ảnh của bạn. Tại đây tôi có 1 file để tạo button:

<hình1.>

B2: Bạn cần tạo file css và html với nội dung như sau:

CSS:
#icon li{float: left; list-style: none}
các thành phần icon li a sử dụng ảnh được load từ file
#icon li a{height: 64px; display: block; background:url(đường dẫn tới file)
Thành phần icon dowload sử dụng phần trên cùng bên trái của file ảnh. có độ rộng của file ảnh là 202px
#icon li.dowload a{width: 202px; background-position: 0 0}
Thành phần icon demo sử dụng phần trên bên trái của ảnh. có độ rộng là 202px và cách bên trái ảnh 1 khoảng là 202px
#icon li.demo a{width: 202px; background-position: -202px 0}
Các thành phần hover sử dụng vị trí tương tự trên ảnh nhưng dịch chuyển xuống bên dưới 64px
#icon li.dowload a:hover{background-position: 0 64px}
#icon li.demo a:hover{background-position: -202px 64px}

html:

<div id="wrapper">
<ul id="icon">
<li class="dowload"><a href="#">Dowload</a></li>
<li class="demo"><a href="#">Dowload</a></li>
</ul>
</div>