CSS Sprite چیست ؟

[merlin_vista]

تصمیم داشتم در مورد CSS Sprite بنویسم. مقالات زیادی در این مورد در وب موجود بود ولی مقاله chris coyier (http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/) برای این کار مناسب بود. بر اساس نوشته کریس این مقاله را نوشتم و فایل ها رو برای زبان فارسی آماده کردم که در پایان مقاله برای دانلود قرار گرفته است.
شاید از CSS Sprite را شنیده باشید. آیا تا به حال از آن استفاده کرده اید ؟ شاید نامی که برای این تکنیک انتخاب شده مناسب نباشد. آیا تا به حال جلو های CSS rollover را دیده اید ؟ در این تکنیک معمولا دو وضعیت یک دکمه را داخل یک تصویر قرار می دهند و با استفاده از CSS زمانی که ماوس روی دکمه قرار می گیرد، تصویر پس زمینه رو جا به جا می کنند تا جلوه مورد نظر ساخته شود. CSS Sprite نیز در اصل توسعه یافته همین تکنیک هست. تفاوت این شیوه با CSS rollover در این است که در اینجا ما محدود به دو یا سه تصویر نیستیم و می توانیم تعداد بسیار زیادی از تصاویر را داخل یک تصویر جای دهیم.
چرا باید تصاویر را با هم ادغام کنیم ؟ اگر هر تصویر به طور مجزا دانلود شود ، سریعتر و بهتر نیست ؟
خیر، نیست. در طراحی های قدیمی ، طراحان، تصاویر بزرگ را slice می کردند و هر کدام را در پس زمینه یکی از خانه های یک table قرار می دادند تا load شدن صفحه سریعتر شود. ولی این شیوه فقط چشم را فریب می دهد و عملا تاثیری در زمان لود شدن صفحه ندارد. تنها این توهم ایجاد می شود که با استفاده از این شیوه ، صفحه سریعتر load می شود. در اصل در زمان لود شدن هر یک از این تصاویر یک HTTP-Request به server ارسال می شود و هر چقدر تعداد این درخواست ها بیشتر باشد، سرعت لود صفحه شما پایینتر می آید !!
در این مقاله (http://yuiblog.com/blog/2006/11/28/performance-research-part-1/) در وبلاگ yahoo user interface به طور مفصل در این مورد بحث شده است. در بخشی از این مقاله آمده است.
به این تصویر دقت کنید. در این جدول در ستون سمت چپ زمان دانلود فایل HTML و در ستون سمت راست زمان دانلود باقی اجزای صفحه به شکل درصدی نمایش داده شده است:
http://i34.tinypic.com/28001gn.gif

جدول شماره 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 کیلوبایت است.
http://i38.tinypic.com/20utit1.jpg
با استفاده از تکنیک 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 کیلوبایت رسیده است.
http://i38.tinypic.com/28arj0i.jpg
ولی این کار پر زحمت است و زمانگیر
قطعا هر شیوه این مزایایی دارد و برای استفاده از آن مزایا مجبورید که کمی وقت بگذارید ولی این صرف وقت ارزش فراوانی دارد و نتیجه واقعا قابل توجه است.
سرویس های آنلاینی نیز وجود دارد که تصاویر شما را با هم ترکیب می کند و فایل CSS آماده نیز تحویل می دهد ولی اگر شخصا تصاویر را ادغام کنید ، نتیجه بهتری خواهید گرفت و حجم فایل شما نیز کمتر خواهد بود.
این سایت (http://spritegen.website-performance.org/) نمونه ای از این جمله سایت هاست. می توانید تمامی تصاویر هایتان را zip کنید و به این سایت آپلود کنید تا سایت تمامی کارها را برای شما انجام دهد
برای کسب اطلاعات بیشتر می توانید این دو مقاله را نیز بخوانید
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance (http://www.websiteoptimization.com/speed/tweak/css-sprites/)
CSS Sprites: Image Slicing’s Kiss of Death (http://www.alistapart.com/articles/sprites)

(http://www.alistapart.com/articles/sprites)
فایل های آماده این مقاله را می توانید از این لینک (http://www.4goosh.com/examples/13-8-2008-css-sprite.zip) دریافت کنید.


منبع (http://www.4goosh.com/css-tutorial/css-sprite)

[امید امرایی]

بسیار جالب بود

[reza_edu]

سلام واقعا خوب بود اما یه سوال مدت زمانی پیش{دوره دانشجوئی} من برای نوشتن گیم با vb6 بازی تانکی رو دیده بودم که برای حالات چرخش تانک از این تکنیک استفاده کرده بود و تمام عکس ها رو در یک عکش بزرگ با پسوند bitmap قرار داده بود . البته اون زمان {و تا الان که مقاله شما رو خوندم } پیگیر این قزیه و نحوه استفاده از اون نشده بودم . حالا درخواست داشتم تا اگر خود شما شخصا این تجربه را داشتید با ما هم قسمت کنید{خدا خیر به شما بده} چون میدونم که تو joomla هم برای template هاش از این روش استفاده میشه.

[reza_edu]

خوب این رو مینویسم برای دوستانی که شاید بعد ها به این پست سر بزنن با یه مثال ساده میگم چه استفاده ای داره .

حساب کن شما میخوای یه منو داشته باشی که وقتی موس روی اون رفت حالت اون عوض بشه برای استفاده از این روش شما مثل من عمل کنید خودتون متوجه میشید :

1. یه عکس درست میکنیم که هر دو تصویر حالت اول و دوم کنار هم باشه مثل عکس زیر :
http://www.pic1.iran-forum.ir/images/up2/54744501487717961375.png

2. یه صفحه درست میکنی مثل کد زیر :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

body {
background-color: #000;
}

#wrapper {
background-color: #FFF;
height: 43px;
width: 260px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#menu ul {
float: left;
}
#menu ul li {
float: left;
list-style-type: none;
height: 40px;
width: 130px;
background-image: url(CSS%20Sprite.png);
background-position: -10px 0px;
text-align: center;
padding-top: 10px;
}
#menu ul li:hover {
background-position: -10px 49px;
}
#wrapper #menu ul li a {
text-decoration: none;
color: #000;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#">CSS Sprite</a></li>
<li><a href="#">CSS Sprite sample</a></li>
</ul>
</div>
</div>
</body>
</html>


قسمت محم اون اینجاست :
#menu ul li {
float: left;
list-style-type: none;
height: 40px;
width: 130px;
background-image: url(CSS%20Sprite.png);
background-position: -10px 0px;
text-align: center;
padding-top: 10px;
}

درواقع یه عکس آپلود شده ولی با تغییر موقعیتش هربار یه قسمت نمایش داده میشه.