Image Sprite

Image Sprite یک تصویر واحد هست که شامل چندین آیکن یا تصویر کوچیکه.
به جای اینکه برای هر آیکن یک فایل جداگانه بارگذاری کنیم (که سرعت سایت رو پایین میاره 🚀)، همه رو در یک تصویر بزرگ قرار می‌دیم و با کمک CSS background-position بخش موردنظر رو نمایش می‌دیم.

این تکنیک باعث میشه:
✅ تعداد درخواست‌های HTTP کمتر بشه.
✅ سرعت لود سایت بیشتر بشه.
✅ مدیریت آیکن‌ها راحت‌تر بشه.

✅ مثال ساده: استفاده از Image Sprite

فرض کن تصویری داریم به نام icons.png که شامل چند آیکن (خانه، جستجو، پیام، تنظیمات) کنار هم هست.

HTML:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Image Sprites</title>
  <style>
    .icon {
      width: 50px;   /* عرض هر آیکن */
      height: 50px;  /* ارتفاع هر آیکن */
      background: url("icons.png") no-repeat;
      display: inline-block;
      margin: 10px;
    }

    .home {
      background-position: 0 0; /* آیکن خانه */
    }

    .search {
      background-position: -50px 0; /* آیکن جستجو */
    }

    .message {
      background-position: -100px 0; /* آیکن پیام */
    }

    .settings {
      background-position: -150px 0; /* آیکن تنظیمات */
    }
  </style>
</head>
<body>

  <h2>CSS Image Sprites Example</h2>

  <div class="icon home"></div>
  <div class="icon search"></div>
  <div class="icon message"></div>
  <div class="icon settings"></div>

</body>
</html>

📌 توضیحات:

  • ما یک تصویر بزرگ icons.png داریم.

  • هر آیکن در یک جای خاص از تصویر قرار داره.

  • با background-position مشخص می‌کنیم که کدوم بخش تصویر نشون داده بشه.

🎨 نکته حرفه‌ای:

امروزه برای راحتی کار خیلی‌ها به جای Image Sprites از SVG Sprite یا آیکن فونت‌ها (مثل Font Awesome) استفاده می‌کنن، چون راحت‌تر مدیریت میشه و ریسپانسیو هم هست.