CSS Sprite چیست ؟

تصمیم داشتم در مورد CSS Sprite بنویسم. مقالات زیادی در این مورد در وب موجود بود ولی مقاله chris coyier برای این کار مناسب بود. بر اساس نوشته کریس این مقاله را نوشتم و فایل ها رو برای زبان فارسی آماده کردم که در پایان مقاله برای دانلود قرار گرفته است.

شاید از CSS Sprite را شنیده باشید. آیا تا به حال از آن استفاده کرده اید ؟ شاید نامی که برای این تکنیک انتخاب شده مناسب نباشد. آیا تا به حال جلو های CSS rollover را دیده اید ؟  در این تکنیک معمولا دو وضعیت یک دکمه را داخل یک تصویر قرار می دهند و با استفاده از CSS زمانی که ماوس روی دکمه قرار می گیرد، تصویر پس زمینه رو جا به جا می کنند تا جلوه مورد نظر ساخته شود. CSS Sprite نیز در اصل توسعه یافته همین تکنیک هست. تفاوت این شیوه با CSS rollover در این است که در اینجا ما محدود به دو یا سه تصویر نیستیم و می توانیم تعداد بسیار زیادی از تصاویر را داخل یک تصویر جای دهیم.

چرا باید تصاویر را با هم ادغام کنیم ؟ اگر هر تصویر به طور مجزا دانلود شود ، سریعتر و بهتر نیست ؟

خیر، نیست. در طراحی های قدیمی ، طراحان، تصاویر بزرگ را slice می کردند و هر کدام را در پس زمینه یکی از خانه های یک table قرار می دادند تا load شدن صفحه سریعتر شود. ولی این شیوه فقط چشم را فریب می دهد و عملا تاثیری در زمان لود شدن صفحه ندارد. تنها این توهم ایجاد می شود که با استفاده از این شیوه ، صفحه سریعتر load می شود. در اصل در زمان لود شدن هر یک از این تصاویر یک HTTP-Request به server ارسال می شود و هر چقدر تعداد این درخواست ها بیشتر باشد، سرعت لود صفحه شما پایینتر می آید !!

در این مقاله در وبلاگ yahoo user interface به طور مفصل در این مورد بحث شده است. در بخشی از این مقاله آمده است.
به این تصویر دقت کنید. در این جدول در ستون سمت چپ زمان دانلود فایل HTML و در ستون سمت راست زمان دانلود باقی اجزای صفحه به شکل درصدی نمایش داده شده است:

جدول شماره 1 نشان می دهد که اکثر سایت ها حدود 5 تا 38 درصد از زمان load شدن را صرف دانلود کردن فایل HTML می کنند و 62 تا 95 درصد بقیه صرف ایجاد HTTP-Request ها و دریافت تصاویر و باقی اجزای صفحه ( مانند فایل های CSS و JavaScript ) می شود. مشکل زمانی تشدید می شود که متوجه می شویم که مرورگر ها در هر بار فقط 2 تا 4 درخواست به سرور ارسال می کنند و به عنوان مثال اگر در صفحه 20 تصویر وجود داشته باشد، مرورگر در 5 تا 10 نوبت این تصاویر را دانلود می کند. همین مسئله باعث افت سرعت لود شدن صفحه می شود. تجربه نشان می دهد که کاهش تعداد HTTP-Request ها موثر ترین راه برای کاهش زمان لود شدن صفحه است. هر تصویری ، حتی تصاویر پس زمینه استفاده شده در فایل CSS نیز یک HTTP-Request به درخواست های موجود اضافه می کند.

حال شیوه CSS Sprite چگونه عمل می کند ؟

اول اجازه بدهید که شیوه کلاسیک و قدیمی را بررسی کنیم. ما یک لیست با 4 گزینه ایجاد می کنیم. هر کدام از گزینه های لیست یک تصویر در پس زمینه دارند که با قرار گرفتن ماوس بر روی هر گزینه تصویر پس زمینه تغییر می کند.

.edit {
background: #fff url('images/edit.png') right top no-repeat;
}
.edit:hover {
background: #fff url('images/edit-hover.png') right top no-repeat;
}
.search {
background: #fff url('images/search.png') right top no-repeat;
}
.search:hover {
background: #fff url('images/search-hover.png') right top no-repeat;
}
.....

نتیجه به این شکل خواهد بود. همانطور که در تصویر مشخص است ، مجموع حجم تصاویر 12.9 کیلوبایت است.

با استفاده از تکنیک CSS Sprite به جان استفاده از 8 تصویر مجزا ما از یک تصویر استفاده می کنیم که هر 8 تصویر را در خود جای داده است ( 4 تصویر مربوط به هر گزینه از لیست و 4 تصویر برای زمانی که ماوس بر روی گزینه های لیست قرار می گیرد ) . ما می توانیم هر 8 تصویر را در یک تصویر بزرگ قرار دهیم. برای ساخت این تصویر باید با استفاده از نرم افزار های ویرایش تصویر مانند فوتوشاپ یک تصویر بزرگ درست کنید که ارتفاعش برابر جمع ارتفاع تمامی 8 تصور باشد و تصویر را در آن از بالا به پایین بچینید. البته میشود تصاویر را به حالت های دیگر هم چید ولی این شیوه آسان تر است.

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

.edit {
background: #fff url('images/list-bg.png') right top no-repeat;
}
.edit:hover {
background: #fff url('images/list-bg.png') right -36px no-repeat;
}
.search {
background: #fff url('images/list-bg.png') right -72px no-repeat;
}
.search:hover {
background: #fff url('images/list-bg.png') right -108px no-repeat;
}
.....

نتیجه کار همانند این تصویر خواهد بود. در اینجا HTTP-Request هاز 8 تا به 1 مورد کاهش پیدا کرده است. , حجم تصاویر نیز به 9.5 کیلوبایت رسیده است.

ولی این کار پر زحمت است و زمانگیر

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

سرویس های آنلاینی نیز وجود دارد که تصاویر شما را با هم ترکیب می کند و فایل CSS آماده نیز تحویل می دهد ولی اگر شخصا تصاویر را ادغام کنید ، نتیجه بهتری خواهید گرفت و حجم فایل شما نیز کمتر خواهد بود.
این سایت نمونه ای از این جمله سایت هاست. می توانید تمامی تصاویر هایتان را zip کنید و به این سایت آپلود کنید تا سایت تمامی کارها را برای شما انجام دهد

برای کسب اطلاعات بیشتر می توانید این دو مقاله را نیز بخوانید
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
CSS Sprites: Image Slicing’s Kiss of Death

فایل های آماده این مقاله را می توانید از این لینک دریافت کنید.

• 5 شیوه جایگزینی متن با تصویر با استفاده از CSS
• معرفی jQuery
• سمینار تخصصی CSS (رایگان)
• اصول طراحی بر اساس استاندارد های وب 2.0 - قسمت دوم
• 7 ترفند برای حفاظت وردپرس در مقابل هکر ها
• شروع کار با جی کوئری
• معرفی امکانات نسخه جدید فرندفید به همراه ارائه استایل فارسی
• چرا jQuery بهترین انتخاب است ؟
• آیا فایرفاکس با SpiderMonkey وب را متحول خواهد کرد ؟

آیا شما از این ارسال لذت بردید؟ چرا دیدگاه خود را در زیر نمی نویسید و گفتگو را ادامه دهید، یا مشترک خوراک من شوید و مقاله هایی مانند این را روزانه به صورت خودکار به خواننده خوراک خود انتقال دهید.