چرا باید از CSS Sprite استفاده کنیم؟

اگر سایتی تصاویرزیادی داشته باشد زمان بارگزاری آن سایت بالا میرود چون باید برای هر تصویر یک درخواست به سرورفرستاده شود.با تکنیک CSS Sprite میتوان تعداد درخواست‌ها به سرور را کم کرد و با این کار در زمان و پهنای باند صرفه جویی کرد.تکنیک CSS Sprite کمک زیادی هم به سئو سایت میکند .

دلایل استفاده از CSS Sprite

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

با کد CSS قسمتی از تصویرکه نیاز هست را مشخص میکنیم، یعنی وقتی در مرحله اول  کاربر به سایت مراجعه می‌کند یک درخواست به سرور می‌رود (زیرا تنها یک تصویر وجود دارد) و تنها پیکسل‌هایی که در آن زمان نیاز است نمایش داده می شوند.

میتوان این تکنیک را با خصوصیات و امکانات دیگر CSS ترکیب کرد.به عنوان مثال برای زمانی که تصویر Hover می شود( یعنی زمانی که کاربر نشانگر ماوس را روی تصویرقرار میدهد) میتوان تعریف کرد که کدام قسمت‌ها نمایش داده شوند.


آیا CSS Sprite همیشه مناسب است؟

تنها زمانی که در سایت تعداد زیادی تصاویر کوچک داشته باشید  و یا نیاز باشد که ظاهر این آیکن‌ها و دکمه‌ها با اکشن‌های به‌خصوصی تغییر پیدا کند مزایای CSS Sprite نمود می‌کند .پس به جای بارگذاری این همه تصویر ونوشتن استایل برای آن‌ها، کافیست از تکنیک CSS Sprite استفاده کنید.با این کار هم در زمان مربوط به کدنویسی صرفه جویی می‌کنید و هم در زمان بارگذاری سایت.

اما تکنیک CSS Sprite برای تصاویر بزرگ اصلاً منطقی نمیباشد چون با این تکنیک مجموعه‌ای از تصاویر کم حجم را در یک تصویر قرار میدادیم و با این کار درخواست‌های فرستاده به سرور را محدود میکردیم  پس وقتی بخواهیم از تصاویر بزرگ استفاده کنیم هیچ توجیه منطقی وجود ندارد. البته اگر تصویر نسبتاً بزرگ باشد ولی تنها یک بار در سایت استفاده گردد، شاید CSS Sprite مناسب باشد.

نتیجه‌گیری

وقتی از کدنویسی وب  صحبت میشود همیشه تجربه کاربری اهمیت ویژه ای دارد مخصوصاً در رابطه با زمان. یعنی شما نیاز دارید که سایتی طراحی کنید که  تنها در عرض چند ثانیه بارگذاری گردد و کاربر را فراری ندهد. به یاد داشته باشید کاربران در دنیای مجازی هزاران انتخاب پیش رو دارند و هرگز صبر نمی‌کنند تا ببینند سایت شما ارزش صبر کردن را دارد یا نه.
وقتی هم بحث درباره استراتژی‌های کد نویسی وب و صرفه جویی در پهنای باند و زمان باشد  می‌توان با استفاده از تکنیک CSS Sprite  تفاوت بزرگی ایجاد کرد. 


۱۲
۱۳۹۷/۱۱/۱۶

پربازدید ترین پست های آموزش مراقبت و نگهداری از وب سایت

جلب نظر و ترغیب مشتریان توسط موارد بصری در طراحی وب سایت

جلب نظر و ترغیب مشتریان توسط موارد بصری در طراحی وب سایت

راهکارهای  ارتقاء رتبه بندی در نتایج جستجوی گوگل

راهکارهای ارتقاء رتبه بندی در نتایج جستجوی گوگل

نرخ پرش چیست؟ و چه عواملی باعث می شوند کاربران وب سایت شما را ببندند؟

نرخ پرش چیست؟ و چه عواملی باعث می شوند کاربران وب سایت شما را ببندند؟

حضور بهتر در شبکه های اجتماعی

حضور بهتر در شبکه های اجتماعی

 نکات قابل توجه در طراحی لوگوی سایت

نکات قابل توجه در طراحی لوگوی سایت

در وب سایت خود مرتکب این 9 اشتباه نشوید

در وب سایت خود مرتکب این ۹ اشتباه نشوید

روش های افزایش رتبه وب سایت در الکسا

روش های افزایش رتبه وب سایت در الکسا

 عوامل موثر در رتبه بندی وبسایت در موتورهای جستجو

 عوامل موثر در رتبه بندی وبسایت در موتورهای جستجو

آیا وب سایت شما به گونه ای است که باعث خروج مشتریان تان می شود؟ 

آیا وب سایت شما به گونه ای است که باعث خروج مشتریان تان می شود؟ 

نکات قابل توجه در طراحی وب سایت رستوران

نکات قابل توجه در طراحی وب سایت رستوران

چه کنیم تا تعداد مخاطبین وب سایتمان افزایش یابند؟

چه کنیم تا تعداد مخاطبین وب سایتمان افزایش یابند؟

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

۱۰نکته برای جلوگيري از اشتباهات معمول در بهینه سازی وبسایت

پنج توصیه برای برخورداری از یک وب سایت موفق در سال جدید میلادی

پنج توصیه برای برخورداری از یک وب سایت موفق در سال جدید میلادی

چرا طراحان وب سایت اغلب باید با مشتریان خود در تکاپو باشند؟

چرا طراحان وب سایت اغلب باید با مشتریان خود در تکاپو باشند؟

روش های بالا بردن سرعت وب سایت

روش های بالا بردن سرعت وب سایت

دلایلی که نشان میدهد وب سایت شما نیاز به طراحی مجدد (ریدیزاین) دارد

دلایلی که نشان میدهد وب سایت شما نیاز به طراحی مجدد (ریدیزاین) دارد

طراحی وب سایت برای کسب و کارهای کوچک

طراحی وب سایت برای کسب و کارهای کوچک

تایید رتبه وب سایت در موتورهای جستجو

تایید رتبه وب سایت در موتورهای جستجو

تاثیر  بهینه سازی وب سایت برای موتورهای جستجو در افزایش فروش

تاثیر بهینه سازی وب سایت برای موتورهای جستجو در افزایش فروش

موفقيت وب سايت چه برنامه ریزی هایی  نیاز دارد؟

موفقيت وب سايت چه برنامه ریزی هایی نیاز دارد؟