اسپرایت تصویری (Image Sprites)

استفاده از Image Sprites برای کاهش درخواست‌های HTTP و بهینه‌سازی سرعت

اسپرایت تصویری چیست؟

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

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

مزیتتوضیح
کاهش HTTP Requestیک درخواست به جای ده‌ها
بارگذاری سریع‌ترمرورگر یک فایل را دانلود می‌کند
پهنای باند کمترحجم کلی کمتر

روش استفاده

.icon {
        background-image: url("sprites.png");
        background-repeat: no-repeat;
    }
    
    .icon-home    { background-position: 0 0; }
    .icon-user    { background-position: -32px 0; }
    .icon-setting { background-position: -64px 0; }

نکته: SVG جایگزین مدرن

امروزه SVG و Icon Fonts جایگزین بهتری هستند:

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط