Tối ưu website bằng CSS Sprite, Ví dụ CSS Sprite 1

CSS Sprite là gì ?

Gần đây trong 1 lần làm ví dụ cái “fake login” cho Facebook tôi mới phát hiện ra tất cả hình ảnh đều nằm trong 1 file ảnh duy nhất (ok, tôi biết lạc hậu rồi). Sau 1 hồi google thì tôi biết đó là kỹ thuật “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.(Thủ thuật CSS)

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

youtube

Xing

Facebook

Apple

Yahoo

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:

Cách thực hiện

Cách thứ nhất: Lên kế hoạch ngay từ đầu quá trình cắt layout. Tạo mới 1 file PSD và đặt từng hình vào từng vị trí thích hợp, thông thường ta đặt theo chiều dọc tại các vị trí thuận lợi cho việc tạo CSS sau này. Bạn có thể ghi lại ngay lúc này để sau này khỏi cần mở file ra canh lại.
Cách thứ 2: Thực hiện mọi thứ như bạn vẫn thường làm. Sau đó dùng CSS Sprite Generator nào đó để ghép các hình vào 1 hình và tạo CSS thích hợp cho bạn. Có 1 website thực hiện việc này khá tốt là www.spriteme.org.
Cách này cũng có thể áp dụng để nâng cấp các website hiện có của bạn.

Vấn đề tồn tại

Trong 1 số trường hợp không thể dùng sprite để thực hiện được, như cần repeat background chẳng hạn. Một số khác thì khiến bạn tốn thời gian nhiều hơn thay vì sử dụng các hình ảnh riêng lẻ.
Vấn đề nữa là khó khăn trong việc bảo trì, cập nhật hoặc chỉnh sửa hình ảnh. Việc thêm hình đôi khi khiến bạn phải thay đổi cả những thông số CSS cũ.

Lựa chọn của bạn

Nếu thử xem background của blog này, bạn sẽ thấy nó đang sử dụng CSS Sprite! Tuy nhiên xem kỹ hơn, bạn sẽ thấy nó không hoàn toàn chỉ có 1 hình background duy nhất. Đó là lựa chọn của tôi.
Với những vị trí phức tạp, khó dùng sprite thì tôi dùng 1 hình riêng. Thật sự không gì là không có giá của nó cả, vấn đề là sự lựa chọn của bạn.