CSS image sprites là một ảnh duy nhất kết hợp nhiều ảnh. Chúng được dùng để giảm thời gian tải trang và băng thông.
Tại sao nên dùng Image Sprites?
Image sprites được sử dụng vì hai lý do chính sau đây:
- Tải trang nhanh hơn: Bằng cách sử dụng một ảnh duy nhất, thời gian tải trang giảm đáng kể.
- Giảm băng thông: Tiêu thụ ít dữ liệu hơn, giúp tải nhanh hơn và cải thiện trải nghiệm người dùng.
Image sprites thường được dùng để thiết kế thanh mạng xã hội đồ họa hoặc thanh điều hướng. Mục đích là để làm cho nó hấp dẫn và hiệu quả hơn. Đó chỉ là một phương pháp trong HTML và CSS. Nó giúp triển khai cách hiệu quả hơn để đưa ảnh và thiết kế trang web.
Ảnh được sử dụng: 
Cách Image Sprites hoạt động
Image sprites được triển khai bằng HTML và CSS. Một ảnh duy nhất được xác định và sau đó được tạo kiểu bằng CSS. CSS giúp hiển thị phần ảnh mong muốn.
Ví dụ: Ví dụ này cho thấy cách sử dụng image sprites trong CSS.
html<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li,
#navlist a {
height: 100px;
display: block;
}
.gfg {
width: 100px;
left: 0px;
background: url('https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -0px -0px;
}
.gfg1 {
width: 100px;
left: 120px;
background: url('https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -0px -140px;
}
.gfg2 {
width: 100px;
left: 240px;
background: url('https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -300px -140px;
}
</style>
</head>
<body>
<ul id="navlist">
<li class="gfg"><a href="#"></a></li>
<li class="gfg1"><a href="#"></a></li>
<li class="gfg2"><a href="#"><a href="#"></a></li>
</ul>
</body>
</html>
Đầu ra: 
Các trường hợp sử dụng Image Sprites
Image sprites thường được sử dụng cho:
- Thanh mạng xã hội đồ họa
- Thanh điều hướng
- Bộ biểu tượng