شما با استفاده از تکنیک CSS Sprite میتوانید سرعت سایت خود را تا حد زیادی اقزایش دهید و کاهش قابل ملاحظه ای در cpu usage مشاهده نمایید. تا چندی پیش همه طراحان سایت در طراحی سایت عکس ها را به تصاویر کوچکتر تقسیم میکردند تا صفحات سریعتر بارگزاری شوند ولی این تکنیک با فریب چشم انسان و نشان دادن تصاویر در هر گوشه از صفحه این حس را میدهد که سرعت بارگزاری افزایش یافته است ولی در واقع هرکدام از این تصاویر یک فراخوان از HTTP را بهمراه دارد و بازدهی صفحه شما را به شدت کاهش میدهد و باعث مصرف cpu می شد.
به طور مثال فرض کنید برای لود هر یک از این تصاویر یک درخواست به سمت سرور ارسال شود. قطعاً مدت زمان زیادی صرف می شود تا تک تک تصاویر از سرور درخواست شوند و بر روی مرورگر کاربر نمایش داده شوند.

در تکنیک CSS Sprite تمامی تصاویر را در یک فایل با هم ادغام می کنیم و هر جایی که نیاز به یک تصویر خاص داشتیم کافیه فقط به موقعیت مکانی تصویر مورد نظر در فایل ادغام شده اشاره کنیم.
از مزایای این روش می توان به آن اشاره کرد که درخواست کمتری به سرور ارسال می شود و باعث افزایش سرعت لود سایت می شود و هنگامی که قراراست با Hover شدن یک تصویر، تصویر دیگری به نمایش دربیاد، مدت زمانی که طول می کشه تا تصویر جدید لود و جایگزین تصویر قبلی بشود به صفر می رسد چرا که تصویر از قبل لود شده است و فقط یک تغییر مکان نیاز داریم که چون بر روی لوکال این تغییر مکان انجام می شود سرعت جایگزینی خیلی بالا تر از آن می باشد که در روش قبلی نیاز بود.

در تکنیک CSS Sprite تمامی تصاویر را در یک فایل با هم ادغام می کنیم و هر جایی که نیاز به یک تصویر خاص داشتیم کافیه فقط به موقعیت مکانی تصویر مورد نظر در فایل ادغام شده اشاره کنیم.همانگونه که اشاره کردیم میتوانیم بجای ۱۰ تصویر مجزا یک تصویر بزرگتر داشته باشیم.

مزایای استفاده از Css Sprites:

   کاهش تعداد دفعات درخواست های سرور و پهنای باند

   کاهش چشمگیر cpu usage

   کاهش زمان بارگذاری صفحه