CSS - Image Sprites صور السبرايت

CSS - صور السبرايت (Image Sprites)

🔸 صورة الـ Sprite هي صورة واحدة تحتوي على عدة صور صغيرة (أيقونات مثلاً) يتم عرض كل جزء منها على حدة باستخدام CSS. هذا الأسلوب يُستخدم لتحسين الأداء من خلال تقليل عدد الطلبات إلى الخادم.

🧠 لماذا نستخدم Image Sprites؟

• لتقليل عدد طلبات HTTP عند تحميل الصفحة.
• لتحسين سرعة التحميل والأداء خاصة في المواقع الكبيرة.
• لتوحيد حجم وجودة الأيقونات أو الصور الصغيرة.

🧪 مثال عملي: استخدام Sprite

<style>
  .icon {
    background-image: url('img_navsprites.gif');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 50px;
  }

  .home {
    background-position: 0 0;
  }

  .about {
    background-position: -50px 0;
  }

  .contact {
    background-position: -100px 0;
  }
</style>

<div class="icon home"></div>
<div class="icon about"></div>
<div class="icon contact"></div>

📌 شرح سريع للكود

• .icon: العنصر العام الذي يحتوي الصورة الخلفية.
• background-position: يُحدد أي جزء من الصورة الكبيرة يتم عرضه داخل العنصر.
• كل عنصر يأخذ مساحة 50×50 بكسل من الصورة الكاملة.

🧪 كيفية تحديد الإزاحة (Position)

لو عندك صورة سبرايت فيها 4 أيقونات عرض كل واحدة 50px، يكون ترتيبهم كالتالي:

• الأولى: background-position: 0 0;
• الثانية: background-position: -50px 0;
• الثالثة: background-position: -100px 0;
• الرابعة: background-position: -150px 0;

💡 ملاحظات هامة

• لا تنسَ تحديد width و height للعناصر اللي هتستخدم السبرايت.
• الصورة يجب أن تكون مصممة بحيث تكون الأيقونات مُرتبة بشكل دقيق ومتساوي.
• يمكنك استخدام أدوات تصميم مثل Photoshop أو أدوات online لتوليد sprite مع CSS تلقائيًا.