CSS Image sprites là gì?

CSS Image sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file ảnh duy nhất. Để load được một ảnh đơn trong file ảnh chung đó, người ta xác định vị trí chính xác ảnh muốn load với 2 vị trí Left, Top và sử dụng thuộc tính background()-position để hiển thị thành phần ảnh cần làm nền một cách chính xác.


CSS Image sprites rất hay được sử dụng và phổ biến hơn trong HTML5 để diễn hoạt các hành động dựa trên các frame hình trong Sprites. Thuật ngữ “Sprites” có nghĩa là có nhiều khung hình trong 1 ảnh.

CSS Image 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. 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.

Screenshot demo:

. Lợi ích khi sử dụng CSS Image sprites trong thiết kế web.

-Tăng tốc độ thực thi của website, giảm chi phí cho bandwith.
-Giảm tải Request (yêu cầu) đến Server, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài nguyên hệ thống.

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 một HTTP-Request, mỗi request như vậy sẽ phải “open” và “close” một 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ể.

.Làm thế nào để tạo được image spriter.
Có 2 cách:
-Tạo ảnh bằng photoshop.
-Tạo ảnh trực tuyến.
Với từ khoá "online CSS sprite generator" trên google search, bạn sẽ dễ dàng tìm được một trang tạo ảnh sprites trực tuyến.

Một số trang web tạo ảnh sprites online:
http://instantsprite.com/
http://csssprites.com/
http://spritegen.website-performance.org/