css sprite چیست + مثال و فیلم آموزشی

در این پست قصد داریم در مورد مفهوم css sprite چیست + مثال و فیلم آموزشی مطالبی را مطرح کنیم.

اگر بخواهیم در قالب یک سوال css sprite را مطرح کنیم به صورت زیر داریم.

سوال: به کمک تکنیک css sprite در html/css تعداد درخواست های صفحه را کاهش دهید؟

css sprite چیست؟

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

این تکنیک به تعداد درخواست‌های HTTP کاهش می‌دهد و بارگذاری صفحات وب را با سرعت بیشتری انجام می‌دهد.

با این روش، بیشتر تصاویر در یک صفحه وب را در یک درخواست HTTP بارگیری کرده و سپس آن‌ها را برای نمایش در صفحه وب استفاده می‌کنیم.

استفاده از CSS Sprite برای تصاویر پس‌زمینه، آیکون‌ها، دکمه‌ها و تصاویر بزرگ که برای نمایش در سایت استفاده می‌شوند، بسیار مناسب است.

مقاله بعدی: استفاده از ckeditor در html

کاربرد های css sprite

CSS Sprite در وب سایت‌ها به دلایل زیادی مناسب است و در زیر می‌توانید لیستی از کاربردهای آن را مشاهده کنید:

کاهش زمان بارگذاری صفحات وب

با استفاده از CSS Sprite، تعداد درخواست‌های HTTP کاهش پیدا می‌کند و این باعث کاهش زمان بارگذاری صفحات وب می‌شود.

بهبود کارایی وب سایت

CSS Sprite باعث بهبود کارایی وب سایت شما می‌شود و باعث می‌شود که کاربران به راحتی و با سرعت بیشتری در وب سایت شما مشغول به فعالیت شوند.

حجم کمتری برای صفحات وب

با استفاده از CSS Sprite، حجم صفحات وب شما کاهش پیدا می‌کند و این باعث می‌شود که صفحات وب شما با سرعت بیشتری بارگذاری شوند.

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

با استفاده از CSS Sprite، شما می‌توانید طراحی بهتری برای وب سایت خود داشته باشید و این باعث می‌شود که کاربران به راحتی و با لذت بیشتری از وب سایت شما استفاده کنند.

بهینه سازی برای موتورهای جستجو

CSS Sprite باعث بهبود بهینه سازی برای موتورهای جستجو می‌شود و باعث می‌شود که وب سایت شما بهتر در نتایج جستجو نمایش داده شود.

افزایش سرعت بارگذاری تصاویر

با استفاده از CSS Sprite، تصاویر بارگذاری شده بسیار سریع‌تر نمایش داده می‌شوند و به کاربران اجازه می‌دهد که با سرعت بیشتری در وب سایت شما کار کنند.

نمونه مثال از css sprite

برای نمونه می‌توانید فرض کنید که شما در وب سایت خود، چندین آیکون مختلف دارید که باید در سراسر وب سایت استفاده شوند.

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

برای این منظور، می‌توانید ابتدا تمام تصاویر مورد نیاز را در یک تصویر بزرگتر قرار دهید.

سپس با استفاده از CSS، می‌توانید این تصویر را به صورت background-image در css قرار دهید و با استفاده از مقادیر background-position، هر آیکون را به صورت جداگانه نمایش دهید.

به عنوان مثال، فرض کنید که می‌خواهید دکمه‌هایی با ابعاد 30×30 پیکسل را در وب سایت خود استفاده کنید.

شما می‌توانید این دکمه‌ها را در یک تصویر بزرگتر قرار داده و با استفاده از CSS Sprite به صورت جداگانه نمایش دهید. کد CSS زیر نمونه‌ای از این کاربرد است:

.btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("sprite.png");
}

.btn-home {
  background-position: 0 0;
}

.btn-search {
  background-position: -30px 0;
}

.btn-cart {
  background-position: -60px 0;
}

در این مثال، ابتدا یک کلاس .btn تعریف میشود که تصویر sprite برای آن به عنوان background-image در نظر میگیریم.

سپس با تعریف کلاس‌های .btn-home، .btn-search و .btn-cart، با استفاده از مقادیر background-position، هر آیکون به صورت جداگانه نمایش میدهیم.

استفاده از css sprite generator

همانطور که تا اینجای مقاله css sprite چیست + مثال و فیلم آموزشی متوجه شدید تنظیم background-position ها به صورت دستی کار سختی میباشد.

ما در این بخش ابزار css sprites generator را معرفی میکنیم که با کمک آن میتوانید در کمتر از 2 دقیقه این کار را انجام دهید.

اما چطور؟!

ابتدا به وب سایت css sprite generator که در کمی بالاتر لینک آن قرار دارد مراجعه کنید.

سپس با کلیک بر روی گزینه choose files تصاویر خود را به یکباره انتخاب کنید.

سپس مطابق تصویر زیر مشاهده میکنید که تصویر به همه چسبیده و کد های css در دسترس شما میباشند.

خروجی css ابزار css sprite generator

حالا فقط کافیست یک صفحه html باز کنید و از css sprite خود لذت ببرید.

نمونه کد html برای استفاده از css sprite

قطعه کد html زیر برای استفاده از css sprite بالاتر قابل استفاده میباشد.

پس از ثبت نام در وب سایت میتوانید فایل نمونه مثال و مطالب کامل تر را مشاهده نمایید.

در انتهای مقاله به سوال زیر پاسخ میدهیم.

آیا استفاده از css sprite برای تصاویر بزرگ مناسب است؟

استفاده از CSS Sprite برای تصاویر بزرگ مانند تصاویر پس زمینه، به دلایلی مناسب نیست:

بزرگ بودن حجم فایل

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

این باعث می‌شود که زمان بارگذاری سایت بسیار طولانی شود و به کاربران مشکل برساند.

کاهش کیفیت تصویر

در تصاویر پس زمینه، کیفیت تصویر بسیار مهم است و استفاده از CSS Sprite ممکن است باعث کاهش کیفیت تصویر شود، زیرا تصویر بزرگ شده و باید به قسمت‌های کوچکتری تقسیم شود.

محدودیت در عرض و ارتفاع

تصاویر پس زمینه معمولاً محدودیت‌هایی در ارتفاع و عرض دارند و استفاده از CSS Sprite ممکن است باعث شکستگی در تصویر شود و به کاربران مشکل برساند.

در ادامه طراحی اسلایدر با html و css را یاد بگیرید.