[Thủ Thuật] Sử dụng CSS Sprite để tối ưu hóa Website, blog

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.
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 (Yahoo! User Interface Blog). 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ể.
Lợi thế của việc dùng duy nhất 1 hình lớn mang lại ngoài việc tăng tốc độ thực thi của website còn giảm chi phí cho bandwith.

Nó phổ biến như thế nào (không phải ở VN ?!)?

- Trên đây mình chỉ lấy ví dụ ở 2 trang nổi tiếng nhất hiện nay là Google và facebook ngoài ra còn rất nhiều trang khác nữa. Vừa rồi Namkna đã thử nghiệm với một phần tử trên blog của namkna. bạn hãy để ý sang phần các Icom tivi bên tay phải. Nếu chỉ thoạt nhìn bạn sẽ tưởng đó là 18 Icom truyền hình gộp lại nhưng hoàn toàn không phải. mình đã sử dụng một link ảnh duy nhất là:

OK, nguyên tắc hoạt động như thế nào ?

Sử dụng hình backgound lớn đã chuẩn bị để làm background, kết hợp với thuộc tính background-position trong css để hiển thị chính xác phần hình ảnh mong muốn. Giá trị được tính theo pixel và có thể xác định dễ dàng bằng photoshop như hình sau:

- Do máy tính mình không cài photosop nên mình tạm lấy hình này ở trên mạng để các bạn tham khảo.
- Namkna sắp xếp các ảnh liền kề nhau từ trái sang phải, phần đối xứng bên dưới là các hình ảnh sử dụng cho hiệu ứng Rollover

<a href="#" class="icon" id="author"></a>
<a href="#" class="icon" id="rss"></a>
<a href="#" class="icon" id="Comments"></a>
<a href="#" class="icon" id="link"></a>

Khi đó các bạn sẽ có Css sử dụng một hình duy nhất như sau:

.icon {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnzNY3H4_gsrmB4QJaNr4vY1X1RuVg1aZIDxnGk1SIDhxiFSTCfme-PHt5HwCdzAVsC29QRP3huJ3wPoqGXmoONSEkc6FdLqq2dFjtk6zXZJyHtE9gdmTlpyJwgj0bTL3WYGY7ok4ukpV/s1600/icon-spriter-namkna-ngoctra.gif);
height: 85px;
display: block;
}

Và Css sử dụng các hình cho từng class. Các bạn dùng photoshop để xác định Class như hình:

Khi đó ta sẽ được CSS các class hình như sau:

#author {width:54px; background-position: 0px 0px;}
#rss {width:54px; background-position: -54px 0px;}
#Comments {width:54px; background-position: -105px 0px;}
#link {width:54px; background-position: -166px 0px;}

Hôm nay tạm dùng ở đây hôm tới mình sẽ giới thiệu cách tạo Rollover với 1 ảnh duy nhất bằng CSS Sprite.

NGUỒN:
http://namkna.blogspot.com/2012/03/su-dung-css-sprite-de-toi-uu-hoa.html