آموزش تکنیک CSS Sprites و ساختن Image Map2 min read
آیا تابحال دنبال تکنیکی بوده اید تا بتوانید با استفاده از بهینه کردن تصاویر بکاررفته در یک صفحه ی وب، سرعت بارگذاری را افزایش دهید؟ CSS Sprites تکنیکی ساده و موثر است که تاثیر بسزایی در بالا رفتن سرعت بارگذاری صفحات دارد. ابتدا به توضیح این تکنیک می پردازیم و در پایان نیز مثال جالبی در مورد نحوه ایجاد یک CSS Image Map با استفاده از CSS Sprites را بررسی خواهیم کرد.
فرض کنید رئیس یک شرکت بزرگ از شما در مورد پایین بودن سرعت بارگذاری یکی از صفحات وب شرکت که باعث ایجاد نارضایتی کاربران شده راه حلی می خواهد؛ شما بعنوان یک طراح و توسعه دهنده ی خوب بعد از مطالعه پروسه ی بارگذاری صفحه و بررسی درخواست ها و پاسخ های بین کلاینت وسرور پی به این موضوع می برید که بارگذاری حجم بالایی از عکس ها در کندشدن این صفحه تاثیر داشته است. نزدیک به 100 عکس که سایز آن ها بین 1 تا 10 کیلوبایت است و فقط بالا بودن تعداد آن ها باعث بروز این مشکل شده است. با این وجود شما چه پاسخی به این سوال خواهید داد؟ آیا خواهید گفت مشکل از سرعت پایین اینترنت کاربران است یا مساله را به بهتر یا بدتر بودن تکنولوژی های PHP، JAVA یا ASP.NET نسبت می دهید؟
این مقاله به ارائه ی راه حلی برای این مساله می پردازد. تکنیکی به نام CSS Sprites که ایده ی اولیه آن از صنعت بازی سازی گرفته شده است و البته در عرصه وب نیز کاربرد دارد.
ایده اصلی این تکنیک به این صورت است که تمامی عکس های کوچک (دراینجا همه 100عکس) در قالب یک تصویر بزرگ قرار خواهد گرفت و با استفاده از CSS مختصات هر عکس کوچک را در تصویر بزرگ پیدا کرده و نمایش می دهیم. یکی شدن 100 عکس کوچک به یک عکس بزرگ، تاثیر زیادی در پایین آمدن حجم عکس جدید خواهد داشت و سختی کار فقط در تشخیص عکس های موردنظر از درون عکس جدید است.
به این مثال توجه کنید:
<!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>
<style type="text/css">
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
}
.blue
{
}
.red
{
}
.yellow
{
}
</style>
</head>
<body>
<div class="container">
<div class="blue">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>
</body>
</html>
اگر این کد را اجراء کنید 3 عدد مربع بصورت زیر خواهید دید:
حال به هر مربع یک عکس نسبت می دهیم، کلاس های خالی نوشته شده به این صورت اصلاح خواهد شد:
.blue
{
background-image:url('blue.jpg');
}
.red
{
background-image:url('red.jpg');
}
.yellow
{
background-image:url('yellow.jpg');
}
پس از اجرای صفحه سه مربع به رنگ های آبی، قرمز و زرد خواهید دید:
مساله ای که در این حالت وجود دارد اینست که سه بار درخواست بارگذاری برای سه عکس مختلف به سرور ارسال شده است. دقیقا همین نمایش را می توان با استفاده از تکنیک CSS Sprites انجام داد با این تفاوت که در این حالت ما یک عکس را بارگذاری کرده و با استفاده از CSS قسمتی از عکس اصلی را که مورد نظرمان هست به کلاس های تصویر پیش زمینه انتساب می دهیم. با استفاده از نرم افزار فتوشاپ سه عکس را بصورت زیر به یک عکس تبدیل می کنیم:
سپس تغییرات ذیل را لحاظ می کنیم:
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
background-image: url('sprite.jpg');
}
.blue
{
background-position: -100px 0px;
}
.red
{
background-position: -200px 0px;
}
.yellow
{
background-position: -0px 0px;
}
در این کد تصویر جدید را که از ترکیب سه تصویر قبلی ایجاد کردیم بعنوان تصویر پیش زمینه به کلاس container نسبت دادیم و با استفاده از خاصیت background-position در سه کلاس blue، red و yellow قسمت مورد نظرمان را از عکس کلی انتخاب کردیم. استفاده از این تکنیک علاوه بر اینکه باعث کاهش برآیند حجم عکس ها می شود به پایین آمدن تعداد درخواست ها و پاسخ های بین کلاینت و سرور نیز منجر خواهد شد.
پس از اجرای کد بالا همان خروجی قبل را خواهیم داشت با این تفاوت که بجای سه عکس اول، فقط عکس sprites.jpg بارگذاری خواهد شد.
در حالت اول حجم صفحه برابر با 12 کیلوبایت و تعداد HTTP Requestها برابر با 4 می باشد در حالتی که در حالت دوم، حجم صفحه برابر با 8 کیلوبایت و تعداد HTTP Requestها به 2 کاهش یافت.
در ادامه برای آشنایی بیشتر با تکنیک CSS Sprites، به شرح یک مثال جهت ایجاد Image Map خواهیم پرداخت.
مطمئنا تگ هایی که برای عکس ها در سایت هایی مانند facebook یا flickr می توان درست کرد را دیده اید. بعنوان مثال در سایت فیس بوک می توان اسامی افرادی که در یک عکس قرار دارند را با کادری که مشخص کننده هر فرد است تعریف کرد تا با اشاره موس روی صورت هر فرد، اسم فرد نمایش داده شود. یکی از روش هایی که می توان با استفاده از آن این کار را انجام داد CSS Image Map می باشد که با استفاده از تکنیک CSS Sprites قابل انجام است.
کاری که در این مثال می خواهیم انجام دهیم اینست که کاربر با قرار دادن موس روی هریک از شماره های موجود در عکس زیر توضیح مربوط به آن شماره در عکس نمایش داده شود.
بعنوان مثال با قرارگرفتن موس بر روی شماره 4 که یک نوت بوک است این اتفاق بیفتد:
در فایلی که ضمیمه شده است نمونه این مثال جهت دانلود قراردارد. ابتدا کلاس officeMap را بررسی می کنیم:
dl#officeMap{
margin: 0;
padding: 0;
background: transparent url(office.jpg) top left no-repeat;
height: 262px;
width: 350px;
position: relative;
}
در حالتی که موس روی هر کدام از شماره ها قرار می گیرد آیتم مورد نظر map می شود و همان طور که در شکل نمایش داده شده کادری با حاشیه سفید نمایان می شود. تصویر این کادرها را با استفاده از فتوشاپ ایجاد می کنیم و از آنجایی که در پروژه از تکنیک CSS Sprites استفاده کرده ایم عکس ها را به هم متصل می کنیم. علت وجود عکس سوم در شکل زیر اینست که کادر نوت بوک با کادر مانیتور و فلاپی هم پوشانی دارد و به این دلیل در یک تصویر مجزا این کادر را به تصویر اضافه کردیم. در نهایت عکس office.jpg که در عکس پیش زمینه کلاس officeMap قراردارد به این صورت درخواهد آمد:
از آنجایی که 5 شماره در عکس داریم نیاز هست تا 5 گروه کد CSS برای هر شماره ایجاد کنیم. تنها نکته ای که حائز اهمیت است مشخص کردن هر کادر در تصویر است که موقعیت هر عکس را در ویژگی background-image هر کلاس مشخص کرده ایم. کدی که برای مانیتور نوشته شده است به این صورت است:
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }
dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}
برای 4 شماره دیگر نیز کدها به همین صورت است. این مثال در مرورگرهای IE6+، Mozilla و Opera تست شده است.
این مقاله در شماره سوم مجله الکترونیکی برنامه نویس که در خرداد 88 منتشر شد، درج شده است.
منابع:
http://www.codeproject.com/Articles/35118/Optimize-your-Pages-using-CSS-Sprites.aspx
http://www.frankmanno.com/ideas/css-imagemap
مطالب زیر را حتما مطالعه کنید
نحوه نصب ویندوز سرویس سفارشی
یوزر اینترفیس(رابط کاربری) به سبک اجایل #3
یوزر اینترفیس (رابط کاربری) به سبک اجایل #2
نحوه ساخت وب ستاپ در یک برنامه ASP.NET
یوزر اینترفیس (رابط کاربری) به سبک اجایل #1
رفع تداخل کتابخانه MS Ajax با jQuery
8 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام .
من از این روش خواستم برای وب خودم استفاده کنم . برای چند تا عکس برام مشکل بوجود اومد .
من از طریق سایت
http://spritegen.website-performance.org
عکس های رو وارد کردم و مختصات هر کدوم رو بدست آودم و وارد کردم . اما توس بعضی از عکس ها میدیدم که عکس های دیگه هم اومدن و قالب وب سایتم کاملاً بهم میریخت .
چطوری میشه عکس ها رو یکی کرد و بعد مختصاتشون رو بدست آورد ؟
ممنون
من اون سایت رو ندیدم.
ولی برای عکس های ساده نیازی به ابزار برای مشخص شدن مختصات نیست. شما در فوتوشاپ عکس ها رو یا بصورت افقی یا عمودی کنار هم قرار میدی، طول و عرض هر عکس رو هم که میدونی باین صورت خیلی راحت میشه position رو نوشت.
موفق باشید.
عالی بود ممنونم
باسلام و خسته نباشید
این مطلب رو زیاد خونده بودم. اما به این قشنگی توضیح نداده بودند. متشکرم
عالي بود ممنون
اگه کادر ما مثلا تگ p بزرگتر از اندازه قطعه عکس در سپرایت ایمیج باشه چطور میشه دقیق تر کار کرد
سلام دقیقاً متوجه سوال شما نشدم.