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

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


امیر سروری ۲۷ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت , بهینه سازی وب سایت شنبه, ۲ام بهمن , ۱۳۸۹ 26394 بازدید

کاربران یک وب سایت مهمترین هدف از ایجاد و راه اندازی یک وب سایت هستند ،بنابر این طراحی وب سایت با این هدف که تمامی کاربران بتوانند به راحتی از وب سایت استفاده کنند همیشه باید مدنظر یک طراح وب سایت قرار گیرد.سرعت بارگذاری صفحات وب یکی از مهمترین نکاتی است که باید برای راحتی یک بازدید کننده در نظر گرفته شود ، به خصوص در کشورهایی که تعداد بسیار زیادی از مشترکان اینترنت هنوز از سیستم 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 و کیفیت ۵۰% و برای دکمه ( Button )  از فرمت GIF با کیفیت ۲۵۶ رنگ استفاده شده است. سرعت اینترنت مورد استفاده برای تست ۵۱۲ 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 ) به صورت کاملا دقیق در یک تصویر ادغام می کنیم . دقیق بودن خط های راهنما و جاگذاری صحیح تصاویر در این تکنیک بسیار با اهمیت می باشد. همانطور که می دانید خط های راهنما فقط برای دقیق تر بودن جاگذاری مورد استفاده قرار می گیرند و در تصویر نهایی قابل رویت نیستند .

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

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

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

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

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

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

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

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

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

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

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

در تصویر پایین دو مستطیل با ابعاد ۱۵۰ 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;}

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

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

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

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



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

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


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


  1. Ali Aghdam
    ۳ بهمن ۱۳۸۹

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

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




    • امیر سروری
      ۳ بهمن ۱۳۸۹

      ممنون علی جان ، شما که لطف داری ، این آیکون هام به روی چشم تو فکرش بودم اتفاقا




  2. کامران
    ۵ بهمن ۱۳۸۹

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




    • امیر سروری
      ۵ بهمن ۱۳۸۹

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




  3. محسن
    ۱۳ بهمن ۱۳۸۹

    سلام

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




  4. هوشمند
    ۲۲ بهمن ۱۳۸۹

    سلام

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

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




  5. مجید ابراهیمی
    ۲۵ شهریور ۱۳۹۰

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




  6. kourosh
    ۳ مهر ۱۳۹۰

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




    • امیر سروری
      ۳ مهر ۱۳۹۰

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




  7. kourosh
    ۷ مهر ۱۳۹۰

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




    • امیر سروری
      ۷ مهر ۱۳۹۰

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




  8. kourosh
    ۸ مهر ۱۳۹۰

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




  9. محمد مردانی
    ۲۹ آبان ۱۳۹۰

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




  10. محمد
    ۴ دی ۱۳۹۰

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




    • miracle
      ۱۲ آبان ۱۳۹۱

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




  11. محمد
    ۲۶ اردیبهشت ۱۳۹۱

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




  12. مهدي
    ۱۷ مهر ۱۳۹۱

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




  13. فرزاد
    ۱۸ مهر ۱۳۹۱

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




  14. محسن شهبازی
    ۱ آبان ۱۳۹۱

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



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




  16. اهورا وب
    ۱۲ فروردین ۱۳۹۲

    عالی بود




  17. فهیمه
    ۱۱ مرداد ۱۳۹۲

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




  18. amir
    ۲۷ مرداد ۱۳۹۲

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




  19. hadi
    ۱۵ شهریور ۱۳۹۲

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




  20. علی
    ۱۹ تیر ۱۳۹۳

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



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





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

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

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

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

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



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

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