مولد أوراق السبرايت

اجمع صوراً متعددة في ورقة سبرايت واحدة وأنشئ كود CSS.

مشاركة:

اسحب وأفلت الصور هنا

أو انقر لرفع ملفات متعددة

Why Use This Tool?

الميزات الرئيسية

Reduce HTTP requests and speed up loading.

1

توليد إحداثيات تلقائي

نحن نقوم بالحسابات حتى لا تضطر لذلك. احصل فوراً على إحداثيات X و Y دقيقة لكل صورة فردية في ورقة السبرايت الموحدة الخاصة بك.

2

خوارزمية تعبئة الشبكة الذكية

يقوم محركنا بترتيب الصور ذات الأحجام المختلفة بذكاء في أكثر شبكة كفاءة ممكنة، مما يقلل من المساحة الفارغة ويقلل من حجم الملف النهائي.

3

فئات CSS جاهزة للاستخدام

يولد كتلة CSS نظيفة وقابلة للنسخ واللصق مع فئات فردية لكل أصل، بما في ذلك خصائص background-position و dimension.

4

أوضاع تخطيط قابلة للتخصيص

اختر بين الشرائط الرأسية، الشرائط الأفقية، أو وضع 'الشبكة' الأكثر كفاءة بناءً على احتياجات بنية مشروعك المحددة.

5

التحكم في الحشو والتباعد

أضف تباعداً مخصصاً بين السبرايت لمنع 'نزيف البكسل' — حيث تظهر أجزاء من الأيقونة المجاورة عن طريق الخطأ في واجهة المستخدم الخاصة بك.

6

حماية المعالجة في الذاكرة المحلية

أصول واجهة المستخدم الخاصة بك هي ملكك. تحدث كل عمليات التعبئة وتوليد الكود مباشرة في متصفحك، مما يضمن عدم مغادرة أي بيانات لجهازك أبداً.

كيفية الاستخدام

Create sprites in minimal steps.

1

اجمع أصولك الصغيرة

اجمع كل الأيقونات الصغيرة أو الأزرار أو إطارات الرسوم المتحركة التي تريد دمجها. تأكد من أنها بتنسيق عالي الجودة مثل PNG.

2

رفع مجمع للأداة

حدد جميع الملفات في وقت واحد وقم برفعها. ستقوم الأداة فوراً بإنشاء معاينة مرئية لكيفية تعبئتها معاً.

3

تكوين التحسين

اضبط 'الحشو' إذا كنت قلقاً بشأن ظهور الحواف على شاشات شبكية العين، أو اختر تخطيطاً 'رأسياً' إذا كنت تبني قائمة جانبية أو شريط فيلم.

4

مراجعة معاينة السبرايت

تحقق من الورقة المولدة. تأكد من أن كل عنصر مرئي وأن الشبكة محكمة وفعالة مع عدم وجود مساحة مهدرة.

5

تنزيل صورة الأطلس

انقر فوق زر 'تنزيل ورقة السبرايت' لحفظ ملف الصورة الموحد في مجلد أصول مشروعك.

الأسئلة الشائعة

هل لا تزال أوراق السبرايت ذات صلة مع HTTP/2؟
نعم! بينما يتعامل HTTP/2 مع طلبات متعددة بشكل أفضل، لا تزال أوراق السبرايت أسرع لأنها تقلل من الكمية الإجمالية للبيانات الوصفية وعبء الضغط.
ماذا يحدث إذا كان لدي صور بأحجام مختلفة؟
تم تصميم خوارزمية الشبكة الذكية الخاصة بنا لهذا الغرض! ستقوم بترتيب صورك من جميع الأشكال والأحجام في أكثر مستطيل مضغوط ممكن.
هل يجب أن أستخدم JPG أو PNG لورقة السبرايت الخاصة بي؟
نوصي بشدة بـ PNG. إنه يتعامل مع 'الحواف الحادة' للأيقونات بشكل أفضل ويدعم الشفافية، وهو أمر ضروري لمعظم أعمال واجهة المستخدم للويب.
هل هناك حد لعدد الصور التي يمكنني تضمينها؟
تقنياً، لا. ومع ذلك، نوصي بالالتزام بحوالي 50-100 صورة لكل ورقة لمنع أبعاد الملف من أن تصبح كبيرة بشكل هائل.
ما هو 'نزيف البكسل'؟
يحدث هذا عندما يظهر عرض البكسل الفرعي شظية من الصورة التالية في الورقة. أضف 1-2 بكسل من 'الحشو' في أداتنا لمنع ذلك.
هل تدعم هذه الأداة SVG؟
هذه الأداة مخصصة للسبرايت النقطية (PNG/JPG). بالنسبة لـ SVG، يجب عليك استخدام نهج 'SVG Sprite' الذي يتم التعامل معه بشكل مختلف في المتصفحات الحديثة.
كيف أقوم بتحديث ورقة السبرايت لاحقاً؟
ما عليك سوى إعادة رفع الأيقونات الأصلية بالإضافة إلى الأيقونة الجديدة. ستمنحك أداتنا ورقة جديدة وكود CSS جديد في ثوانٍ.
هل هذه الأداة مجانية لمطوري الألعاب؟
نعم! سواء كنت تنشئ موقع ويب أو لعبة محمولة، فإن مولدنا مجاني 100% ولا توجد قيود تجارية.
هل يمكن للمتصفحات تخزين أوراق السبرايت مؤقتاً؟
نعم! هذه واحدة من أكبر الفوائد. يحتاج المتصفح فقط إلى تخزين ملف واحد مؤقتاً ليكون كل رمز جاهزاً لجميع صفحات موقعك.
هل بيانات الأيقونات الخاصة بي آمنة؟
بالتأكيد. نظراً لأن ملفاتك تتم معالجتها محلياً في متصفحك، لا يتم رفع تصميماتك أو تخزينها أو عرضها بواسطة نظامنا أبداً.