طريقة دمج الأيقونات في ملف Sprite واحد
أرسل صورتين أو أكثر واستلم ورقة PNG واحدة مع خريطة تذكر اسم كل قطعة وموضعها وحجمها، فتُحمَّل 30 شارة صغيرة كملف واحد بدل 30 ملفًا. تدفع حسب الاستخدام دون اشتراك.
هذه المهمة غير متاحة حاليًا، لذا لا يمكن شراؤها. ولا يتم تحصيل أي رسوم مقابلها.
اطّلع على الـAPIتجمع هذه الأداة عدة صور صغيرة — أيقونات أو رسوم لعبة — في ملف واحد، وتُرفق معها إحداثيات كل قطعة. النتيجة ملف Sprite واحد يوفّر على متصفح الزائر تحميل عشرات الملفات الصغيرة منفردة، وهي مفيدة لمواقع ذات أيقونات كثيرة أو ألعاب المتصفح تحتاج سرعة تحميل عالية دون تفريط في عدد الرموز البصرية.
ما تحلّه صورة Sprite
المواقع والألعاب التي تحوي أيقونات كثيرة تُحمَّل أسرع حين تكون هذه الأيقونات كلها في ملف واحد، بدل أن يطلب المتصفح كل أيقونة على حدة من الخادم. صورة Sprite هي بالضبط ذلك: صورة كبيرة تحتل فيها كل قطعة موضعًا ثابتًا.
خطوات المعالجة
ترفع الصور المنفردة، وترتّبها الأداة تلقائيًا في شبكة متراصّة، وتعيد ملف Sprite جاهزًا مع قائمة الإحداثيات. الترتيب لا يتّبع نمطًا ثابتًا، بل يحاول شغل المساحة المتاحة بأقل فراغ ممكن. الفارق يظهر بوضوح أكبر مع تشكيلات من عشرين أيقونة أو أكثر، حيث يقلّ عدد الملفات المنفردة من عشرين إلى واحد.
لا حاجة لترتيب الصور يدويًا قبل الرفع؛ الخوارزمية تتولى التنظيم، وما يهمّك فعليًا هو قائمة الإحداثيات المرفقة لاستخدامها لاحقًا في الكود.
السعر وملاحظة عن مرحلة التجربة
الأداة اليوم في مرحلة تجريبية (Beta)، وقد تتغيّر بنية قائمة الإحداثيات قليلًا في نسخ لاحقة؛ يُستحسن مراجعة الصيغة الحالية قبل تثبيتها داخل مسار بناء (Build Pipeline) دائم. لا يوجد فرق في السعر بين أيقونة بسيطة وأخرى مفصّلة الألوان؛ التكلفة مرتبطة بعدد الصور المعالَجة وحده، لا بحجم كل صورة على حدة.
حالات الاستخدام
متجر إلكتروني يسرّع تحميل أيقوناته
يستخدم متجر إلكتروني في الشارقة عشرين أيقونة لواجهته. بدل عشرين ملفًا منفردًا، صار الموقع يحمّل ملف Sprite واحدًا، وتحسّنت سرعة تحميل الصفحة تحسّنًا ملحوظًا.
فريق تطوير ألعاب متصفح صغير
يجمّع فريق تطوير صغير في دبي مراحل حركة شخصية تتكوّن من اثنتي عشرة صورة في ملف Sprite واحد، ويوفّر بذلك التجميع اليدوي في برنامج تحرير.
لوحة تحكم داخلية بعشرات الرموز
يدير عبدالله المنصوري لوحة تحكم داخلية فيها أكثر من ثلاثين رمز حالة. ملف Sprite واحد حلّ محل مجموعة ملفات PNG منفردة في مجلد المشروع.
الأسئلة الشائعة
ما معنى أن الأداة في مرحلة تجريبية؟
الأداة تعمل وتعطي نتائج موثوقة، لكن بنية قائمة الإحداثيات قد تتغيّر قليلًا في نسخ لاحقة. للمشاريع الإنتاجية يُستحسن اختبار سريع مسبقًا.
بأي ترتيب تُوضع الصور داخل الملف؟
تُرتَّب الصور تلقائيًا بأقل فراغ ممكن؛ الموضع الدقيق لكل قطعة موجود في قائمة الإحداثيات المرفقة، لا في ترتيب ثابت يمكن الاعتماد عليه.
هل تُحفظ الصور المرفوعة بعد المعالجة؟
لا، تُستخدم فقط لحساب ملف Sprite ولا تُحفظ بعد تسليم النتيجة.
هل هناك حد لعدد الصور في الملف الواحد؟
لا حد مباشر على العدد، لكن كل صورة منفردة يجب ألا تتجاوز 15 ميجابايت و12 ميجابكسل.
ماذا أستلم مع الصورة المجمّعة؟
تستلم خريطة تسرد كل صورة أصلية باسمها، مع موضعها وعرضها وارتفاعها داخل الورقة. وهذه هي المعلومات التي تحتاجها ورقة الأنماط أو محرك الألعاب لعرض كل قطعة على حدة.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
يُنشئ طلب POST موثَّق المهمة، وتصل النتيجة عبر webhook أو رابط موقَّع. هذه الإمكانية متاحة عبر الواجهة البرمجية، لا كأداة ويب تفاعلية.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/image/sprite \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}'const res = await fetch("https://api.kit.forhosting.com/image/sprite", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/sprite",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/sprite", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"images":["https://ejemplo.com/imagen.jpg","https://ejemplo.com/imagen-2.jpg"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/sprite", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"images": [
"https://ejemplo.com/imagen.jpg",
"https://ejemplo.com/imagen-2.jpg"
]
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.sprite",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_mb | 15 |
max_megapixels | 12 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
ما تحلّه صورة Sprite
إلى جانب الصورة نفسها، تحصل على قائمة إحداثيات بصيغة JSON تتيح لك الوصول إلى كل قطعة داخل CSS أو كود اللعبة.
السعر وملاحظة عن مرحلة التجربة
السعر $0.002 لكل طلب إضافة إلى $0.005 لكل صورة معالَجة — ملف من عشرين أيقونة يكلّف نحو $0.10.
أسئلة تقنية
كم تكلفة ملف Sprite بعدد كبير من الصور؟
$0.002 لكل طلب إضافة إلى $0.005 لكل صورة. ملف من خمسين أيقونة يكلّف نحو $0.25، بصرف النظر عن حجم الملف الناتج.
هل يمكن ربط الأداة بمسار بناء آلي عبر API؟
نعم، الوظيفة نفسها متاحة عبر API، وهو خيار مناسب لمسارات البناء الآلية التي تتغيّر فيها تشكيلة الأيقونات باستمرار.