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

استفاده از تکنیک 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 تشکیل شده است

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

برای استفاده از این تکنیک از خاصیت 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;}

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

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

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

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

برای ایجاد حرکت در این دکمه ( 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;}

سخنی با شما دوستان

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

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

با تشکر – امیر سروری



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


27 دیدگاه برای این نوشته ثبت شده است


  1. Ali Aghdam
    23 January 2011

    آفرین بر شما به خاطر مطالب خوبتون ، آقا اصلا ما از شما حمایت می کنیم!!!

    راستی اگه چند تا دکمه به اشتراک گذاری برای پست هات داشته باشی، این امر خطیر آسان تر می شود




  2. کامران
    25 January 2011

    آقا مبارکه
    ظاهرا من آخرین نفری هستم که از استارت کارت با خبر شدم. حالا می فهمم چرا آی تی تی رو تحویل نمیگیری و باهاش کاری نداری دیگه
    امیدورام که موفق باشی ;)




    • امیر سروری
      25 January 2011

      ممنون کامران جان ، شما لطف داری ، آی تی تی خونه اول منه و امیدوارم همیشه همینطور موفق باشه و من هم که در خدمت شما هستم حالا حالا ها .




  3. محسن
    2 February 2011

    سلام

    واقعا عالی بود.
    خدا به شما توفیق بده.




  4. هوشمند
    11 February 2011

    سلام

    خسته نباشی داداش. کارت درسته. مطالب کاریرذی رو گذاشتی.

    مطمئن باش خواننده همیشگی سایتت خواهم بود




  5. مجید ابراهیمی
    16 September 2011

    برخورد کرده بودم با این عکس ها ولی نمی دونستم بازم کاره این سی اس اس باشه عجبااااااااا




  6. kourosh
    25 September 2011

    سلام آقای سروری
    می رسی از مطلب خوبت ، منم یکی دو ساله از این تکنیک استفاده می کنم ، ولی خوب همونطور که می دونی رو ie6 کار نمی کنه این ویژگی background-position ، واسه ie6 راه حلی داری ؟ یا اینکه واسه ایجاد hover به این شکل ، باید از حک IE استفاده کنیم ؟




    • امیر سروری
      25 September 2011

      kourosh @ سلام . ممنون از لطفت و من تقربا یک سالی هست که دیگه IE 6 رو چک نمیکنم وتوصیه میکنم که شما هم دیگه چک نکنی ;-) ولی اگر بخوای برای این ورژن هم درست نمایش داده بشه بهتره از حک برای IE استفاده کنی و یک css دیگه برای این مرورگر لود کنی و سیستم رو تغییر بدی ;-) موفق و پیروز باشی




  7. kourosh
    29 September 2011

    ممنون از راهنماییت ، کاش واقعا می شد بی خیال ie6 شد ، ولی همونطور که می دونی اگه بخوای واسه یه بیزینس ، وب سایت طراحی کنی با توجه به اینکه هنوز یک عده ی بسیار زیادی از این مرورگر مزخرف استفاده می کنن ، باید تا حدودی ie6 رو مد نظر قرار داد ، باز خدا رو شکر ، این ویندوز 7 خدمت بزرگی کرد با اون ie8 که روش داره




    • امیر سروری
      29 September 2011

      korurosh @ یه روش دیگه هم هست :-) میتونی با استفاده از یک دستور شرطی برای مرورگر IE6 کاربر رو به صفحه بروز رسانی مرورگر IE بفرستی تا مرورگرش رو بروز رسانی کنه ;-) ولی در حال حاضر استفاده از این مرورگر خیلی کم هست و میشه از اون صرف نظر کرد بدون نگرانی :-)




  8. kourosh
    30 September 2011

    آره با جاوا اسکریپت میشه یه حرکتی زد که حداقل یه وارنینگ بده به طرف که مرورگرت قدیمیه ، البته با توجه به اینکه دیگه ویندوز xp داره منسوخ میشه ، استفاده از ie6 هم کاهش پیدا می کنه ، راستی بی زحمت اگه یه کد مناسب و درست واسه جاوا اسکریپت این قضیه شناسایی مرورگر و نمایش پیغامش ، توی سایتی می شناسی یه لینک بده ، من جاوا اسکریپتم خوب نیست ، گوگل هم کردم کد درست درمونی پیدا نشد




  9. محمد مردانی
    20 November 2011

    آفرین بسیار مفید بود




  10. محمد
    25 December 2011

    چطور میشه با این روش چند عکس بکگراند رو که repeat میشند در یک عکس ادغام و فراخونی کرد




    • miracle
      2 November 2012

      با اجازه آقا امیر؛ فکر می کنم این سایت تو این تکنیک میتونه موثر باشه. طرز استفاده هم توش نوشته.
      http://www.spritebox.net/
      امیر جان بابت مطالب قشنگت ممنون.




  11. محمد
    15 May 2012

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




  12. مهدي
    8 October 2012

    سلام
    از وب سايت بسيار زيبا و خلاقانه اي كه داره روز به روز كامل تر مي شه ممنونم
    مطالب سايت خيلي كاربردي است
    اميدوارم موفق باشيد




  13. فرزاد
    9 October 2012

    ممنونم از پست مفید تون … عالی بود …




  14. محسن شهبازی
    22 October 2012

    بسیار استفاده کردیم ممنونم اگر دوست داشتید میتونم مطالبی براتون آماده کنم بزارید توی سایت



  15. جالب بود … :)




  16. اهورا وب
    1 April 2013

    عالی بود




  17. فهیمه
    2 August 2013

    عالی عالی
    همین طوری که داره پیش میره میفهمم که نمی فهمم.من کجا بودم .شما کجاااااااااااااااااااااااااااااااااااایی
    امیدوارم همیشه موفق باشی




  18. amir
    18 August 2013

    ممنون مطلب خوبی بود




  19. hadi
    6 September 2013

    سلام چجوری می شه برای بنر ها هم استفاده کرد اگر آموزش شو بزارید خیلی ممنون می شم




  20. علی
    10 July 2014

    عالی بود ، خیلی دنبال این روش بود .



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.