WP Island

CSS sprites là gì?
CSS sprites là một công nghệ gom các ảnh nhỏ lại thành 1 ảnh lớn rồi dựa vào tọa độ của từng ảnh nhỏ đó để hiển thị. Đây là 1 công nghệ giúp tận dụng tối đa tốc độ đường truyền và giúp trang web hiển thị mượt mà hơn. Đây là một công nghệ được ứng dụng khá nhiều trên các website lớn đặc biệt là trang chủ của Yahoo (cái drop menu của Opera cũng áp dụng công nghệ này )

Nguyên tắc:
Khi bạn gọi 1 trang web thì trình duyệt sẽ đọc mã nguồn và list ra 1 danh sách hình ảnh cần dùng rồi… request & wait. Do nguyên tắc đó mà dù cho đường truyền internet của bạn là broadband đi nữa thì bạn vẫn phải tốn thời gian giữa những lần trình duyệt gửi request cũng như kích thước quá nhỏ bé của những tấm ảnh sẽ làm tổn hao đường truyền. 1 cách kiểm tra tương tự đó là bạn có thể copy khoảng 100 tấm ảnh từ máy tính ra USB rồi sau đó copy 1 file duy nhất có kích thước tương đương 100 tấm ảnh đó vào USB và so sánh thời gian của 2 lần copy. Rõ ràng file solo đi nhanh hơn phải không




Cách thực hiện:
Nếu website của bạn có các icon hay các ảnh có kích thước nhỏ khoảng <10kb (tốt nhất là <5kb (tiêu chuẩn WallPearl )) thì các bạn cứ list lại rồi dùng photoshop hay 1 trình xử lý ảnh đang dùng để ghép lại thành 1 ảnh lớn (có thể dùng các guide line để canh tọa độ cho các ảnh nhỏ này). Sau đó bạn ghi lại tọa độ (vị trí góc trái phía trên của ảnh nhỏ trên ảnh lớn) của từng ảnh nhỏ đó và lưu lại ảnh lớn (nhớ so sánh kích cỡ ảnh lớn phải không được lớn hơn tổng kích cỡ ảnh nhỏ quá 10% (tiêu chuẩn WallPearl luôn )).

Sau khi đã hoàn thành bước trên bạn chỉ cần dùng 1 thuộc tính CSS là background-position để định vị tọa độ hiển thị cho ảnh. Để dễ hiểu bạn có thể tưởng tượng là bạn có 1 số vị trí hiển thị icon trên trang web của mình và các vị trí này có kích thước cố định như 1 cái khung ảnh vậy. Khi bạn dùng thuộc tính background-position để định vị tọa độ ảnh hiển thị thì cũng như bạn cầm 1 cái ảnh lớn và áng vào khung đó thì tất nhiên khung đó có kích thước bao nhiêu phần ảnh mà các bạn được thấy từ ảnh lớn cũng như vậy. Do đó mà thông thường bạn phải định kích cỡ icon và khung icon bằng nhau nếu không muốn để lộ phần ảnh không mong muốn.

Ví dụ: Pearl có 10 cái icon kích cỡ 50 x 50 và Pearl combine nó vào 1 ảnh lớn có tên là Icon1.png 50 x 680 và vị trí mỗi icon cách nhau 20px thì tọa độ icon blog là (0 0), icon albums là (0 -70px) , icon archive là (0 -140px),…
Và Pearl cũng định kích cỡ khung hiển thị các icon có chiều cao là 50 x 50 rồi dùng thuộc tính background-position như sau để định nền cho các icon
#blog{background:transparent url(Icon1.png) 0 0 no-repeat}
#albums{background:transparent url(Icon1.png) 0 -70px no-repeat}
#archive{background:transparent url(Icon1.png) 0 -140px no-repeat}

Các bạn có thể xem ví dụ cho bài này tại đây. Để ý về tốc độ load của trang có áp dụng CSS sprites và trang không áp dụng CSS sprites cũng như sự hiển thị đồng bộ của trang dùng CSS sprites chứ không hiển thị theo kiểu nhảy cốc như trang thông thường.

Nói tóm lại thì 1 nguyên tắc khi thiết kế web đó là nếu trang web có hình ảnh kích thước lớn (theo Pearl khoảng >=400kb) thì bạn cắt ra thành mảnh nhỏ còn nếu hình ảnh quá nhỏ thì bạn hợp lại cho lớn lên đều này căn cứ vào đường truyền internet thông dụng mà quyết định. Quan trọng là làm sao khi trang web bạn được load thì dòng chảy dữ liệu phải luôn tương đương với khả năng truyền tải.

Đấy, viết 1 cuốn sách rồi mà còn dong dài vậy đấy