Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

[Mr.Winni]

Xin chào,
Hôm qua trên fb của FM có đăng mẹo để tối ưu hình ảnh tăng tốc độ tải trang, mình có nghe nói có một cách là dùng CSS Sprites để giảm số lượng link ảnh xuống.
Mình muốn hỏi khi thiết kế diễn đàn, làm sao để ứng dụng CSS Sprites trong thiết kế để giảm tối đa số lượng link ảnh sử dụng, mình có tham khảo bài viết http://www.w3schools.com/css/css_image_sprites.asp nhưng thực tình là mình khi áp dụng vào FM vẫn không biết làm thế nào.
Xin nhờ các bạn giúp đỡ.

p/s: Mình là dân không chuyên ngành tin học cũng như không được đào tạo căn bản về thiết kế website hoặc ứng dụng công nghệ thông tin. Vì vậy nếu được xin nhận hướng dẫn chi tiết.

Diễn đàn: VNFISH
Địa chỉ: vnfish.forumotion.com
Nicktest: demo
Pass: demo123

Cảm ơn đã xem bài viết

[Juny Thoang]

Kỹ thuật sprite là kỹ thuật nhóm các ảnh đơn lẻ vào thành một file ảnh duy nhất và hiển thị từng phần của bức ảnh sử dụng CSS. Áp dụng sprite sẽ làm giảm đáng kể RTT.
Bạn sẽ gom tất cả các ảnh nhỏ thành 1 ảnh duy nhất ( có thể dùng pixlr editor để làm bóng khoảng trắng cho ảnh trong suốt -> http://pixlr.com/editor/)

Ví dụng khi bạn thấy 1 css thế này nó chính là đang áp dụng Kỹ thuật sprite

Code:

.social_icons a {
  background: url(http://i56.servimg.com/u/f56/15/84/77/97/top_so10.png) no-repeat scroll 0 0 #7192A8;
  height: 30px;
  width: 30px;
}
.social_icons a.facebook {
  background-position: -26px 1px;
}
.social_icons a.twitter {
  background-position: 2px 1px;
}
.social_icons a.gplus {
  background-position: -55px 1px;
}

Dùng thuộc tính background-image để cài ảnh nền duy nhất - ảnh lớn chứa các ảnh nhỏ
VD: background-image: url('https://i.servimg.com/u/f56/15/84/77/97/top_so10.png')

Dùng background-position: để căn chỉnh vị trí hình ảnh cần chọn, kiểm tra phần tử để dễ chỉnh nhé
VD: 
.social_icons a.facebook {
 background-position: -26px 1px;
}

Bạn hãy cố định kích thước hình ảnh cần chọn sao cho không bị lấn sáng các chi tiết khác (height: ...xp ; width:... xp)
VD:
height: 30px;
width: 30px;

@@ máy sắp sập nguồn rồi, mình sẻ cập nhật bài viết sau nhé

[baivong]

Kỹ thuật CSS sprites vô cùng khó khăn và phức tạp. Kỹ thuật này chỉ thích hợp cho các ảnh nhỏ như icon, smiley, ... Nguyên lý của nó là kết hợp nhiều ảnh nhỏ thành 1 ảnh to, sau đó dùng CSS backgroundPosition để tách 1 ảnh to thành nhiều ảnh nhỏ.

Để áp dụng kỹ thuật này cho diễn đàn, đầu tiên bạn phải xác định các ảnh nhỏ cần ghép lại và tải về máy.
Sau đó, upload lên một trong các trang web sau:
http://csssprites.com/
http://css.spritegen.com/
http://instantsprite.com/
Làm theo hướng dẫn: copy > paste > Xong!

[Sponsored content]