افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite

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

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

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

باید به این نکته توجه داشته باشید که کاهش زمان بارگذاری صفحات وب سایت یکی از فاکتورها برای تعیین سطح (Page Rank ) توسط موتورهای جستجو مانند گوگل هستند

Css Sprite چیست و چگونه می تواند به کاهش مصرف پهنای باند و افزایش سرعت وب سایت کمک کند؟

مرورگرها برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های CSS و جاوا اسکریپت و…) یک درخواست (HTTP-Request) به سرور ( Server ) ارسال می‌کند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر در خواست و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.

هرچه تعداد درخواست ( HTTP-Request ) کمتر باشد ، زمان بارگذاری صفحه نیز کمترخواهد شد . برای کم کردن تعداد درخواست ها از سرور ( Server ) میتوانید فایلهای جاوااسکریپت ( JavaScript ) ، سی اس اس ( CSS ) با موضوعیت یکسان را با یکدیگر ادغام کنید .

برای ادغام و یکسان سازی تصاویر نیز می توانید از تکنیک فوق العاده CSS Sprite که در این مطلب به توضیح آن خواهیم پرداخت استفاده نمائید.این تکنیک در دکمه ها (Button ) ، آیکون ها ( Icon ) ، بنرها (Banner ) و ..  بسیاری موارد دیگر مورد استفاده قرار میگیرد . با استفاده از این تکنیک می توان تاخیر به وجود آمده در هنگام Roll Over شدن تصاویر که از زمان لازم برای درخواست و پاسخ سرور به وجود می آید را نیز بر طرف نمود . ( این مورد در دکمه ( Button ) موجود در صفحه قبل از استفاده از تکنیک CSS Sprite قابل ملاحظه است )  می توانید صفحات مربوط به این آموزش را ملاحظه کنید.

DEMO

برای این خود آموز در قسمت آیکون ها از تصویر با فرمت JPG و کیفیت 50% و برای دکمه ( Button )  از فرمت GIF با کیفیت 256 رنگ استفاده شده است. سرعت اینترنت مورد استفاده برای تست 512 kb است و از مرورگر فایرفاکس ( Fire Fox ) و افزونه ( Add-ons  Fire Bug )  برای تعیین سرعت بارگذاری صفحه استفاده شده است.

قبل از استفاده از تکنیک CSS Sprite

/* Sprite Style */
.icon { width:70px; height:70px; float:right;}
.rollOverButton { background:url(cssSpriteButton.gif) no-repeat center center;}
.rollOverButton:hover { background:url(cssSpriteButtonHover.gif) no-repeat center center;}

در نمونه اول ( قبل از استفاده از تکنیک CSS Sprite ) که کدهای css مربوط به آن را در بالا ملاحظه میکنید ، از روش معمول برای ایجاد حالت Roll Over بر روی دکمه ( Button ) و از تگ img برای قرار دادن تصاویر درون صفحه استفاده شده است . کلیه تصاویر به صورت مجزا درون صفحات وب مورد استفاده قرار گرفته اند .

بعد از استفاده از تکنیک CSS Sprite

ملاحظه میکنید در نمونه دوم ( بعد از استفاده از تکنیک CSS Sprite ) با توجه به کم شدن تعداد درخواستها ، زمان بارگذاری کاهش پیدا کرده است ، و مشکل تاخیر در Roll Over شدن دکمه ( Button ) نیز برطرف شده است .

چگونه از CSS Sprite برای کاهش سرعت بارگذاری تصاویر و صرفه جویی در مصرف پهنای باند استفاده کنیم ؟

برای استفاده از این تکنیک ، تصاویر ( آیکون ها و دو تصویر از دکمه به صورت مجزا ) را با استفاده از نرم افزار فتوشاپ ( Photoshop ) و خط های راهنما ( Guide ) به صورت کاملا دقیق در یک تصویر ادغام می کنیم . دقیق بودن خط های راهنما و جاگذاری صحیح تصاویر در این تکنیک بسیار با اهمیت می باشد. همانطور که می دانید خط های راهنما فقط برای دقیق تر بودن جاگذاری مورد استفاده قرار می گیرند و در تصویر نهایی قابل رویت نیستند .

در تصویر پایین ، با استفاده از خطوط راهنما مربع هایی با اندازه 70 X 70 px تشکیل شده است

برای استفاده از این تکنیک از خاصیت background-position استفاده میشود.به طور مثال با توجه به مثالها ، آیکون های مرورگرهای متفاوت همگی با استفاده از Class داده شده به آنها به اندازه 70 X 70 px در می آیند .به این نکته توجه داشته باشید که اندازه هر DIV با توجه به محدوده مشخص شده برای هر قطعه از تصویر 70 X 70 px تعیین شده است . این نکته باعث می شود که فقط قسمتی از تصویر که در پس زمینه DIV قرار دارد دیده شود. با توجه به این نکات با حرکت در طول تصویر با استفاده از تعیین موقعیت تصویر پس زمینه (background-position ) می توانیم تمامی آیکون های مورد نظر را به راحتی بسازیم .با استفاده از کلاس های متفاوت داده شده به هر DIV می توانیم موقعیت تصویر پس زمینه آنها را به دلخواه تغییر دهیم .

مقدار های تعیین شده برای خاصیت background-position به ترتیب نشانگر فاصله افقی از مبداء مختصات و فاصله عمودی از مبداء مختصات تصویر است . مبداء مختصات در تصاویر منطقه چپ و بالای تصویر است که دارای موقعیت 0 و 0 است . با توجه به تصویر برای قرار گیری مناسب تصویر در پس زمینه DIV اول ( icon.fireFox ) از موقعیت 0 و 0 استفاده می کنیم.

 .icon.firFox { background-position:0  0;}

با توجه به تصویر ، برای قرار دادن تصویرآیکون دوم (icon.opera ) ، تصویر باید در جهت افقی -70 px نسبت به مبداء مختصات تغییر جهت دهد که به صورت زیر نمایش داده می شود.

.icon.opera { background-position:-70px  0;}

به همین ترتیب برای قرارگیری مناسب تصویر زمینه در آیکون سوم ( icon.safari ) به میزان -140 px در جهت منفی حرکت می کنیم .

.icon.safari {background-position:-140px 0;}

در تصویر پایین دو مستطیل با ابعاد 150 X 70 px تشکیل شده است.

برای ایجاد حرکت در این دکمه ( Button ) به جای استفاده از اعداد برای تغییر موقعیت پس زمینه ( background-position ) از مقادیر ( top center ) و ( bottom center ) استفاده شده است که به ترتیب نمایانگر ، ( بالا و وسط ) و ( پایین و وسط ) است .

می توانید در زیر کدهای CSS مورد استفاده برای ایجاد این آیکون ها را ملاحظه کنید.

/* Sprite Style */

.icon {background:url(css-sprite-full.jpg) no-repeat;}
.icon.firFox { background-position:0  0;}
.icon.opera { background-position:-70px 0;}
.icon.safari {background-position:-140px 0;}
.icon.internetExplorer {background-position:-210px 0;}
.icon.chrome {background-position:-280px 0;}
.rollOverButton {background:url(cssSpriteButtonFull.gif) no-repeat top center;}
.rollOverButton:hover { background:url(cssSpriteButtonFull.gif) no-repeat bottom center;}