شاید تا به حال با عبارت CSS Sprites برخورد نکرده باشید و یا آن را نشنیده باشید. اما آن دسته از افراد که به طراحی سایت علاقه دارند و در این زمینه فعالیت می کنند با این عبارت آشنا هستند.
امروز و در ادامه آموزش های یخش طراحی سایت قصد داریم برایتان عنوان کنیم که CSS Sprites چیست؟ و یکی از بهترین تکنیک های آن را با شما در میان بگذاریم تا به کمک این روش بتوانید سئو وب سایت خود را بخوبی مدیریت کنید.
همینجا لازم است که در ابتدا بدانیم css چیست؟
اگر پاسخ سئوال فوق را میدانید، مطالعه این آموزش را ادامه دهید.
CSS Sprites
فهرست موضوعات در این آموزش
CSS Sprites چیست؟
افرادی که به طراحی سایت مشغول می باشند و در این زمینه فعالیت دارند برای اینکه بتوانند کار خود را به نحو احسن انجام دهند تا وب سایتی را که طراحی می کنند از لحاظ ظاهر بی نظیر باشد از عناصر گرافیکی متعددی استفاده می کنند.
شاید این موضوع را ندانید که در طراحی سایت به طور معمول برای یک صفحه چیزی نزدیک به 20 صفحه مورد استفاده قرار می گیرد البته این تعداد تصاویر در برخی از موارد بیشتر نیز خواهد شد.
اما می خواهیم بدانیم که CSS Sprites چیست؟ در واقع CSS Sprites تکنیکی می باشد که به شما و طراحان سایت این اجازه را می دهد تا تمام تصاویری که در طراحی سایت بکار می برند را درون یک تصویر قرار دهند.
معمولا در تمام صفحات وب سایت ها تعدادی عکس مورد استفاده قرار می گیرد که برای دریافت این عکس ها مرورگر ها مجبور می شوند درخواستی را به سمت سرور ارسال کنند. این درخواست هایی که توسط مرورگر به سمت سرور رد و بدل می شود به زمان بسیاری نیاز دارد.
هر چه تعداد عکس ها بیشتر باشد طبیعتا تعداد درخواست ها نیز بیشتر خواهد بود و باعث درگیری میان سرورها می شود. این موضوع می تواند در وب سایت های بزرگ به وضوح مشخص نباشد اما زمانیکه تعداد کاربران و بازدید کنندگان سایت بالا رود بدون شک با خطا مواجه خواهد شد و رفع ارور بزرگ ترین قدمی می باشد که در بهینه سازی سئو سایت باید انجام شود.
با استفاده از CSS sprites می توان تمام تصاویر را ترکیب کرده و در یک عکس و در قسمت های مختلف آن ها را استفاده کرد. شما یا کمک این روش تنها یک درخواست را به سرور ارسال می کنید ولی از عکس خود چندین بار در قسمت های مختلف سایت می توانید استفاده کنید. این کار باعث می شود تا سرعت وب سایت شما نیز بیشتر شود.
همانطور که می دانید سرعت بارگذاری وب سایت از ویژگی های بسیار مهمی می باشد که باید به آن توجه شود. این روش علاوه بر اینکه میزان رضایت کاربران را افزایش داده و بر روی آن تاثیر گذار می باشد می تواند به شما در بدست آوردن رتبه مناسب در نتایج گوگل نیز کمک بسیار کند.
دلیل استفاده از CSS sprites
با دانستن اینکه CSS sprites چیست؟ بد نیست که دلیل استفاده از آن را نیز بدانیم. یکی از مزیت هایی که CSS sprites دارد این است که باعث می شود تعداد درخواست هایی که در طراحی سایت برای سرور ها ارسال می شود کاهش پیدا کند.
زمانیکه وب سایت را طراحی و راه اندازی می کنید برای بارگذاری عکس ها در سایت یک درخواست برای آدرس آن عکس به سرور ارسال می شود و با استفاده از CSS sprites تعداد این درخواست ها به حداقل می رسد.
تعداد درخواست های زیادی که به سمت سرور ها انتقال داده می شود در زمانیکه مشکلات اینترنتی و یا مشکل در پایداری خود سرور وجود داشته باشد، موجب بروز تجربه کاربری منفی می شود.
روش استفاده از CSS sprites
از روش هایی که در CSS sprites استفاده می شود می توان به دو روش CSS sprites به کمک فتوشاپ که به”روش سخت” معروف می باشد و روش CSS sprites به کمک ابزارهای آنلاین که”روش ساده” به آن گفته می شود استفاده کرد.
برای استفاده از CSS sprites دو روش مختلف وجود دارد. شما می توانید با این روش ها برای ادغام عکس ها کوچک به وسیله فتوشاپ استفاده کنید وبا کد نویسی آن ها را در وب سایت خود اجرا و عملی سازید. همچنین می توانید با استفاده از ابزارهای آنلاین تمام کارهایی را که لازم به اجرا می باشد به آنها سپرده و سپس با خروجی گرفتن از آنها عکس ها را ادغام کرده و کد های دریافتی را در مکان مناسب وارد کنید.
روش های استفاده از CSS Sprites
چه تصاویری برای CSS sprites مناسب نمی باشد؟
در طراحی وب سایت شما از تصاویر مختلفی استفاده می کنید که ممکن است در بارگذاری وب سایت شما خلل ایجاد کند اما با استفاده از CSS sprites این موضوع را متوجه خواهید شد که چگونه می توانید از تصاویر مناسب برای وب سایت خود استفاده کنید.
با تمام تعرف هایی که درباره CSS sprites چیست؟ برایتان عنوان کردیم باید این موضوع را نیز بدانید که در طراحی وب سایت خود چه تصاویری را استفاده نکنید.
CSS sprites برای تصاویری که در وب سایت خود استفاده می کنید ثابت می باشند و در زمان هایی که تغییرات زیادی را در وب سایت خود اجرا نمی کنید مناسب می باشند.
با در نظر گرفتن اینکه تصاویر در وب سایت در یک تصویر گنجانده می شود چیدمان آنها می تواند نقش مهمی را در حجم تصاویر بر عهده داشته باشد بنابراین تصاویری که ابعاد همخوان مناسبی ندارند برای CSS sprites مناسب نمی باشند. شما می توانید مجموع تصاویر وب سایت خود را در 2 یا 3 نصویر اصلی جای دهید.
سخن پایانی
دانستیم که CSS sprites جیست؟ و برای بررسی سئو سایت چگونه می توان از این روش در طراحی وب سایت استفاده کرد. CSS sprites روشی کاربردی است که برای کاهش دادن ارسال درخواست سرور و افزایش سرعت سایت مورد استفاده قرار می گیرد.
این روش امکان استفاده از یک عکس را برای استفاده در چندین زمینه مختلف برایتان به وجود می آورد. CSS sprites برای تصاویر کوچک طراحی شده است اما برای تصاویر بزرگ نیز می توانید از مزیت هایی که این روش دارا می باشد استفاده کرده و آنها را در وب سایت خود بار گذاری کنید و در نهایت سرعت بارگذاری سایت خود را نیز افزایش داده و به تعداد کاربران وب سایت خود نیز بیافزاید.
