مولّد CSS Sprite Sheet

كيفية إنشاء Sprite Sheet

1. أفلت صورك في منطقة الإفلات، أو انقر عليها لاختيارها. تُقبل صيغ PNG وSVG وWebP وJPG وغيرها مما يستطيع متصفحك قراءته، حتى 500 صورة. يظهر كل ملف في قائمة الصور مع مقاسه؛ ويزيل زر × صورة واحدة، بينما يُفرغ إزالة كل الصور القائمة.
2. اختر التخطيط: شبكة أو مضغوط (أصغر ورقة) أو شريط أفقي أو شريط عمودي. ومع شبكة، يحدّد حقل الأعمدة (0 = تلقائي) عدد الأعمدة.
3. اضبط الحشو (px) بين الصور (2 افتراضيًا)، وحدّد مقاس من قوى العدد 2 (256، 512، 1024…) إن كان محرّكك أو معالج الرسومات يتطلب ذلك.
4. اختر ملف البيانات: CSS (أصناف background-position) أو JSON (خريطة الإطارات) أو CSS وJSON. واضبط اسم الملف وبادئة أصناف CSS (كلاهما «sprite» افتراضيًا).
5. راجع المعاينة ومقاس الورقة والمساحة المستخدمة، ثم انقر تنزيل ZIP (PNG + البيانات) أو تنزيل PNG فقط. ويمكن أيضًا نسخ الشيفرة المولّدة مباشرةً.

تُفك الصور في متصفحك ولا يُرفع أي شيء. وملف SVG الذي لا يحدد عرضه وارتفاعه يُحوَّل إلى صورة نقطية بضلع أطول قدره 256 px.

اختيار التخطيط

• شبكة تمنح كل صورة خانة بحجم أكبر صورة. ومع الأعمدة التلقائية تكون الشبكة مربعة تقريبًا. هذا التخطيط بسيط ويمكن توقعه، ومثالي عندما تكون الصور كلها بالحجم نفسه، مثل مجموعة بلاطات (tile set).
• مضغوط (أصغر ورقة) يستخدم التعبئة على رفوف: تُرتَّب الصور من الأطول إلى الأقصر وتوضع من اليسار إلى اليمين في صفوف. تجرّب الأداة عروضًا كثيرة للورقة وتحتفظ بالعرض الذي يعطي أصغر مساحة، مع مراعاة التقريب إلى قوى العدد 2 عند تفعيل ذلك الخيار. وهو الأفضل للأيقونات مختلفة الأحجام.
• شريط أفقي وشريط عمودي يضعان الصور في صف أو عمود واحد بالترتيب الذي أضفتها به. وهذا ما تتوقعه كثير من مشغلات الرسوم المتحركة للإطارات.

لا يمكن أن تتجاوز الورقة 16,384 px لكل ضلع أو نحو 16.7 ميغابكسل، وهو الحد الذي تستطيع المتصفحات رسمه.

استخدام CSS

تحتوي شيفرة CSS على صنف أساسي يضع الورقة في background-image مع no-repeat، ثم صنفًا لكل صورة يُسمّى باسم ملفها: home.png يصبح sprite-home. تُحوَّل الأسماء إلى أحرف صغيرة، وتُزال علامات التشكيل اللاتينية، وتصبح الأحرف الأخرى شَرطات، وتحصل الأسماء المكررة على -2 و-3.

تنبيه لأسماء الملفات العربية: لا تُقبل في أسماء الأصناف إلا الحروف اللاتينية والأرقام، فالاسم المكتوب بالعربية بالكامل يصبح sprite ثم sprite-2 وهكذا. أعطِ ملفاتك أسماء لاتينية واضحة قبل إضافتها لتحصل على أصناف مفهومة.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

يضبط كل صنف width وheight وbackground-position بإزاحات سالبة. فالصورة الموضوعة عند x = 40 وy = 20 تحصل على background-position: -40px -20px: تُزاح الورقة كلها 40 px إلى اليسار و20 px إلى الأعلى داخل العنصر، فلا يظهر عبر إطار العنصر إلا تلك الصورة. ويمنع الحشو تسرّب الصور المجاورة عند تكبير الصفحة أو ترشيح النسيج.

الشاشات عالية الكثافة: ارسم صورك بضعف حجم عرضها، وأنشئ الورقة، ثم أضف إلى الصنف الأساسي background-size بنصف مقاس الورقة، واقسم العروض والارتفاعات والإزاحات على اثنين. لا تولّد الأداة هذا تلقائيًا؛ إنه تعديل يدوي.

هل ما زالت الـ Sprites مفيدة مع HTTP/2؟

اختُرعت الـ Sprites لتوفير طلبات HTTP. ومع تعدد الإرسال في HTTP/2، تُحمَّل ملفات صغيرة كثيرة بسرعة تقارب ملفًا واحدًا، فيصبح المكسب للمواقع أصغر بكثير، وغالبًا ما تكون أيقونات SVG أو خطوط الأيقونات أفضل للأيقونات القابلة للتكبير. لكن الـ Sprite Sheets تبقى المعيار في ألعاب 2D وإطارات الرسوم المتحركة: نسيج واحد يعني تبديلات أقل للنسيج في معالج الرسومات وملفًا واحدًا للتحميل.