مولد صور CSS Sprite مجاني عبر الإنترنت — ادمج الصور وأنشئ CSS تلقائيًا
أنشئ لوحات صور CSS محسّنة من صور متعددة باستخدام مولد الصور Sprite المجاني عبر الإنترنت. حمّل أيقوناتك أو صورك، واختر اتجاه تخطيط (أفقي أو عمودي أو شبكي)، وعيّن الهامش، واحصل فورًا على لوحة صور مدمجة بالإضافة إلى كود CSS الدقيق مع مواضع الخلفية الصحيحة. تقلل صور CSS Sprite من طلبات HTTP عن طريق تجميع العديد من الصور الصغيرة في صورة واحدة، مما يحسن سرعة تحميل موقعك. مثالية لمجموعات الأيقونات وعناصر واجهة المستخدم وحالات الأزرار. تتم جميع المعالجة محليًا في متصفحك.
حمّل صورًا متعددة (أيقونات أو أزرار أو عناصر واجهة مستخدم) لدمجها في لوحة صور واحدة.
اختر اتجاه تخطيط (أفقي أو عمودي أو شبكي) واضبط الهامش بين الصور.
اعرض معاينة للوحة الصور، وانسخ كود CSS المُنشأ، وحمّل صورة Sprite.
نصائح لإنشاء صور CSS Sprite
- استخدم صورًا ذات أحجام متشابهة للحصول على أفضل النتائج. قد تؤدي اختلافات الحجم الكبيرة إلى جعل التموضع أقل قابلية للتنبؤ.
- التخطيط الشبكي مثالي لمجموعات الأيقونات ذات الأحجام الموحدة. يعمل الأفقي بشكل جيد لحالات الأزرار وعناصر التنقل.
- احتفظ بهامش لا يقل عن 2-4 بكسل بين الصور لتجنب التداخل البصري عند استخدام Sprite في الإنتاج.
الأسئلة الشائعة — مولد صور CSS Sprite
ما هي صورة CSS Sprite؟
صورة CSS Sprite هي ملف صورة واحد يجمع عدة صور أصغر (أيقونات، أزرار، إلخ) في صورة واحدة. باستخدام خلفية CSS، يمكنك عرض الجزء الذي تحتاجه فقط من لوحة الصور. يقلل هذا من طلبات HTTP ويحسن سرعة تحميل الصفحة.
هل مولد صور CSS Sprite مجاني؟
نعم، مجاني تمامًا. لا حاجة للتسجيل، ولا رسوم خفية، ولا علامات مائية. تتم جميع المعالجة محليًا في متصفحك.
ما هي صيغ الصور المدعومة؟
تدعم الأداة جميع صيغ الصور الشائعة بما في ذلك JPG و PNG و WebP و GIF و BMP و AVIF و SVG وغيرها. يوصى بـ PNG للصور Sprite للحفاظ على الشفافية.
كيف يمكنني استخدام كود CSS المُنشأ؟
انسخ كود CSS والصقه في ملف الأنماط الخاص بك. ضع صورة Sprite التي تم تحميلها في مجلد الأصول الخاص بمشروعك وقم بتحديث مسار عنوان URL للخلفية ليتوافق مع هيكل مشروعك.
ما التخطيط الذي يجب أن أختاره؟
يضع التخطيط الأفقي الصور في صف واحد — مثالي لحالات الأزرار وعناصر التنقل. يكدسها التخطيط العمودي — رائع للقوائم المنسدلة والقوائم. يرتبها التخطيط الشبكي في شبكة مدمجة — الأفضل لمجموعات الأيقونات ذات الأحجام الموحدة.
هل تدعم الأداة صور عالية الدقة (Retina)؟
تحافظ الأداة على أبعاد الصورة الأصلية. لدعم Retina، قم بتحميل الصور بحجم 2× واستخدم خاصية حجم الخلفية في CSS لتقليل حجمها في ملف الأنماط الخاص بك.
هل يمكنني إعادة ترتيب الصور في Sprite؟
يتم ترتيب الصور بترتيب التحميل. لتغيير الترتيب، ما عليك سوى إزالتها وإعادة تحميلها بالترتيب المطلوب.