استفاده از Image Sprite در CSS یکی از تکنیک‌های پرکاربرد در طراحی وب است که برای کاهش تعداد درخواست‌ها به سرور و بهبود کارایی صفحات وب استفاده می‌شود.
در این تکنیک، به جای استفاده از چندین تصویر مستقل، تمام تصاویر مورد نیاز در یک فایل تصویری بزرگ‌تر و واحد قرار می‌گیرند. در این حالت، صفحه وب تنها یک بار برای دریافت این تصویر واحد به سرور درخواست می‌فرستد و مرورگر با استفاده از CSS، بخش‌های مختلف تصویر را نمایش می‌دهد.
تکنیک Image Sprite معمولاً برای نمایش آیکون‌ها و تصاویر کوچکی که در چند نقطه از صفحه تکرار می‌شوند، استفاده می‌شود. با این روش، علاوه بر کاهش تعداد درخواست‌ها، به دلیل یک بار لود شدن تصویر، حجم داده‌های دریافت شده نیز بهینه می‌شود.
به عنوان مثال، فرض کنید یک کادر منو دارید که شامل چند آیکون مختلف است. به جای لود کردن هر آیکون به صورت جداگانه، می‌توانید از یک تصویر بزرگ که تمامی آیکون‌ها را شامل می‌شود استفاده کنید. سپس با بهره‌گیری از CSS، هر آیکون را در جای مناسب نمایش دهید.
در ادامه، نمونه کدی برای پیاده‌سازی CSS Image Sprites ارائه می شود:
.icon {
width: 50px;
height: 50px;
background-image: url('sprite.png');
}
.icon-home {
background-position: 0 0;
}
.icon-profile {
background-position: -50px 0;
}
.icon-settings {
background-position: -100px 0;
}
در این مثال، کلاس .icon ابعاد و تصویر پس‌زمینه را تعیین می‌کند.
کلاس .icon-home نشان‌دهنده بخش اول تصویر یعنی آیکون خانه است.
کلاس .icon-profile موقعیت تصویر را به سمت بعدی یعنی آیکون پروفایل جابجا می‌کند.
کلاس .icon-settings برای آیکون تنظیمات از قسمت سوم تصویر استفاده می‌کند.
به این ترتیب با یک درخواست HTTP، موفق به نمایش چندین آیکون می‌شویم.