CSS Sprite چیست؟

اگر در طراحی سایت، فعالیت‌هایی دارید یا به برنامه نویسی وب علاقه‌مند هستید، حتماً با CSS هم آشنایی دارید. این مطلب درباره تکنیک CSS Sprite است. این تکنیک بیش از هر چیزی به سئوی سایت کمک می‌کند، در ادامه با ما همراه شوید تا هم CSS Sprite را بررسی کنیم و هم ببینیم چطور روی بهینه سازی سئو تأثیر دارد.

CSS Sprite چیست؟

برای تعریفCSS Image Sprite می‌توانیم به تعریف W3Schools رجوع کنیم: “ مجموعه‌ای از تصاویر که در یک تصویر قرار می‌گیرند. “
” سایتی که شامل تعداد زیادی تصویر باشد، زمان زیادی لازم دارد تا بارگذاری شود، همچنین برای هر تصویر باید یک درخواست به سرور، فرستاده شود. تکنیک CSS Sprite تعداد درخواست‌ها به سرور را کاهش می‌دهد و به همین خاطر در زمان و پهنای باند صرفه جویی می‌‌کند.”

مثالی ساده از CSS Image Sprite

فرض کنید در صفحه‌ای از سایت سه آیکن وجود دارد، به جای اینکه این سه تصویر را در صفحه قرار دهیم، آن‌ها را در قالب یک تصویر در سایت می گذاریم. مانند تصویر زیر:

با استفاده از CSS، تنها قسمتی از تصویر را که نیاز است، نمایش می‌دهیم. در کد زیر، مشخص شده است که کدام قسمت تصویر را لازم داریم:

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

توضیحات مربوط به کد:

خب می‌دانید که فایل CSS به یک فایل HTML متصل است. در فایل HTML کد زیر را می‌نویسیم:

< img id=”example” src=”img_transp.gif” >

این خط کد را می‌نویسیم که برای Sprite یک بستر ایجاد کرده باشیم، به علاوه خصوصیت src نمی‌تواند بی مقدار باشد. بنابراین مقدار آن را برابر با یک عکس ترنسپرنت قرار می‌دهیم. این تصویر، در‌واقع تصویر پس زمینه Sprite خواهد بود.

در دو خط

width: 46px;
height: 44px;

قسمتی از تصویر را که نیاز داریم مشخص می‌کنیم.

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

این ساده‌ترین مثال برای نحوه پیاده‌سازی تکنیک Sprite بود.

چرا باید از CSS Sprite استفاده کنیم؟

حالا که تعریف Sprite را خواندید و نحوه پیاده‌سازی کد آن را دیدید، شاید این سؤال برایتان پیش آمده باشد که اصلاً چرا باید به خودمان زحمت بدهیم و از این تکنیک استفاده کنیم.

در مثال ساده‌ای که بررسی کردیم، تنها سه آیکن وجود داشت که ما، آن‌ها را در یک تصویر قرار دادیم، ولی تصور کنید در صفحه‌ای از سایت ده‌ها دکمه یا تصویر به شکل لینک وجود داشته باشد. اگر کاربری بخواهد به سایت شما وارد شود، به ازای هر تصویر، یک درخواست به سرور فرستاده می شود، طبیعی است که بعد از هر درخواست، باید منتظر ریسپاند آن هم بمانید. همین مساله باعث می‌شود که بارگذاری سایت شما مدت زمان زیادی لازم داشته باشد.
بنابراین حتی اگر قرار دادن مجموع تصاویر در یک تصویر، نهایتاً حجم یکسانی داشته باشد، ولی تنها یک در خواست به سرور فرستاده می‌شود و به همین راحتی، بارگذاری سایت زمان کمتری نیاز خواهد داشت.

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

حالا این تکنیک را با خصوصیات و امکانات دیگر CSS ترکیب کنید! برای مثال برای زمانی که تصویر Hover می شود، یعنی زمانی که نشانگر ماوس کاربر روی تصویر می‌رود، هم می‌توانیم تعریف کنیم که کدام قسمت‌ها، نمایش داده شوند.

از آنجاییکه تمام سایت‌های فارسی دقیقاً از کد‌ها و توضیحات سایت W3Schools  برای توضیح CSS Sprite استفاده کرده‌اند، ترجیح دادیم شما را به صفحه این سایت هدایت کنیم، به‌خصوص اینکه در این سایت می‌توانید هم توضیحات کد را بخوانید و هم خودتان کد را در شبیه ساز امتحان کنید.

آیا CSS Sprite همیشه مناسب است؟

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

ولی نکته‌ای درباره این تکنیک وجود دارد: تکنیک CSS Sprite برای تصاویر بزرگ اصلاً منطقی نیست. به این دلیل که وقتی درباره این تکنیک صحبت کردیم چند فاکتور را در نظر گرفتیم: اولاً اینکه مجموعه‌ای از تصاویر را در یک تصویر قرار دادیم که در نهایت حجم آن چندان زیاد نبود. دوم اینکه قرار بود با این کار درخواست‌های فرستاده به سرور را محدود کنیم. پس وقتی بخواهیم از تصاویر بزرگ استفاده کنیم، هیچ توجیه منطقی وجود ندارد. البته اگر تصویر نسبتاً بزرگ باشد ولی تنها یک بار در سایت استفاده شود، شاید CSS Sprite مناسب به نظر برسد.

نتیجه‌گیری

وقتی صحبت از کدنویسی وب است، همیشه تجربه کاربری اهمیت ویژه ای دارد مخصوصاً در رابطه با زمان. یعنی شما نیاز دارید که سایتی طراحی کنید که در عرض تنها چند ثانیه بارگذاری شود و کاربر را فراری ندهد. به یاد داشته باشید کاربران در دنیای مجازی هزاران انتخاب پیش رو دارند و هرگز صبر نمی‌کنند تا ببینند سایت شما ارزش صبر کردن را دارد یا نه.
وقتی هم بحث درباره استراتژی‌های کد نویسی وب و صرفه جویی در پهنای باند و زمان باشد، با استفاده از تکنیک CSS Sprite می‌توان تفاوت بزرگی ایجاد کرد. تصور کنید به جای ۱۰۰ میلیون درخواست به سرور تنها ۱ میلیون درخواست ارسال شود!