اسپرایتز کردن یا جادوی مخفی کردن بخشی از تصویر فنی است که به کمک آن می توانید سرعت باز شدن صفحه را افزایش و بار سرور وب سایت خود را کاهش دهید به خصوص اگر وب سایتی پربازدید را اداره می کنید موضوع اهمیت بیشتری پیدا می کند.

صفحه وبی که تعداد زیادی عکس دارد زمانی زیادی برای باز شد نیاز دارد چون باید تعداد زیادی درخواست برای سرور ارسال نماید تا یک صفحه باز شود. با استفاده از Image Sprites می توانید تعداد درخواست ها را کاهش دهید و نه تنها سرعت باز شدن صفحه را کاهش دهید بلکه در هزینه های اداره وب سایت خود صرفه جویی نمایید.

یک مثال ساده از Image Sprites

همانطور که در شکل زیر مشاهده می نمایید به جای انکه از سه تصویر جداگانه استفاده کنیم همه عکس ها را در یکی جمع کرده ایم:

با استفاده از CSS می توانیم فقط قسمتی از عکس را که باید دیده شود به نمایش بگذاریم.

در مثال زیر کد های CSS مشخص می کنند که کدام قسمت از عکس ما نام img_navsprites.gif نمایش داده شود


#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}


حال اگر کد زیر را در میان کد های Html صفحه وب سایت خود قرار دهید قسمتی از تصویر که در CSS مشخص شده اند قابل دیدن هستند و این تصویر می تواند به عنوان تصویر پشت زمینه نمایش داده شود.

<img id=”home” src=”img_trans.gif”>

در کد CSS مشاهده می کنید که عرض 46 پیکسل و ارتفاع 44 پیکسل مشخص شده است به این ترتیب مشخص شده است که کدام قسمت از تصویر باید نمایش داده شود.

در خط آخر کد CSS مشخص شده است که تصویر باید به صورت پشت زمینه نمایش داده شود و پس از آن مسیری که عکی در آنجا قرار دارد مشخص شده است.

ترجمه: علی یزدی مقدم