Tạo CSS Sprite
Công cụ tạo CSS sprite miễn phí trực tuyến
CSS Sprite là gì?
CSS sprite kết hợp nhiều hình ảnh nhỏ thành một tệp hình ảnh duy nhất (sprite sheet). CSS background-position sau đó được sử dụng để hiển thị hình ảnh riêng lẻ từ tệp kết hợp. Điều này giảm số lượng yêu cầu HTTP, cải thiện hiệu suất tải trang.
Cách tạo CSS Sprite
Tải lên nhiều hình ảnh. Chọn bố cục (ngang, dọc hoặc lưới). Công cụ kết hợp chúng thành sprite sheet duy nhất và tạo CSS với giá trị background-position cho mỗi hình ảnh.
▶CSS sprite vẫn còn hữu ích?
Với multiplexing HTTP/2, lợi ích hiệu suất của sprite đã giảm. Tuy nhiên, sprite vẫn giúp khi phục vụ nhiều icon nhỏ hoặc khi sử dụng hệ thống icon cần cache tệp duy nhất.
▶Bố cục nào tốt nhất cho sprite?
Bố cục ngang nhỏ gọn cho ít hình ảnh. Bố cục lưới phù hợp cho nhiều icon có kích thước tương tự. Bố cục dọc hữu ích khi tất cả hình ảnh có cùng chiều rộng.
▶Làm thế nào để sử dụng CSS đã tạo?
CSS sử dụng background-image trên sprite sheet và background-position cho mỗi icon. Áp dụng các class đã tạo cho phần tử HTML của bạn.