مولّد CSS Sprite هو أداة مجانية قوية تجمع صور متعددة في ورقة sprite واحدة محسّنة، مما يقلل بشكل كبير من طلبات HTTP ويحسّن سرعة تحميل الموقع. من خلال دمج الأيقونات والأزرار وعناصر واجهة المستخدم في ملف صورة واحد واستخدام CSS background-position لعرض أجزاء محددة، يمكنك تقليل أوقات تحميل الصفحة بنسبة 50% أو أكثر. يعمل مولّد CSS Sprite الخاص بنا على أتمتة العملية بأكملها — فقط قم بتحميل صورك وستقوم الأداة بإنشاء ورقة sprite المجمّعة مع كود CSS اللازم.
يقبل المولّد تحميلات صور متعددة، ويرتبها بكفاءة في تخطيط شبكي لتقليل المساحة البيضاء، ويجمعها في ورقة sprite PNG واحدة. كما يولّد كود CSS مع إحداثيات background-position الدقيقة لكل صورة.
CSS sprite هو ملف صورة واحد يحتوي على صور أصغر متعددة مرتبة في شبكة. باستخدام خاصية CSS background-position، تعرض فقط الجزء المحدد من sprite الذي تحتاجه.
نعم، لا تزال CSS sprites توفر فوائد في الأداء، خاصةً لاتصالات HTTP/1.1 والمستخدمين عبر الهاتف المحمول على شبكات أبطأ.
PNG هو أفضل صيغة لـ CSS sprites، خاصةً عندما تكون صورك ذات خلفيات شفافة أو حواف حادة.
بعد إنشاء sprite الخاص بك، اضبط صورة sprite كـ background-image لعنصرك، ثم استخدم background-position للإزاحة إلى الصورة الصحيحة داخل sprite.