ForHosting KIT · تحرير الصور وتحليلها

طريقة دمج الأيقونات في ملف Sprite واحد

تجمع هذه الأداة عدة صور صغيرة — أيقونات أو رسوم لعبة — في ملف واحد، وتُرفق معها إحداثيات كل قطعة. النتيجة ملف Sprite واحد يوفّر على متصفح الزائر تحميل عشرات الملفات الصغيرة منفردة، وهي مفيدة لمواقع ذات أيقونات كثيرة أو ألعاب المتصفح تحتاج سرعة تحميل عالية دون تفريط في عدد الرموز البصرية.

● Betaلكل طلب · لكل صورة$0.002

تشغيل — $0.002 + $0.005/صورة اطّلع على الـAPI

استخدمها من الويبAPIالبريدالتطبيق قريبًاTelegram قريبًا

شغّلها أونلاين

شغّل هذه المهمة على خوادمنا باستخدام حسابك. الأدوات المجانية تعمل داخل متصفحك، أما هذه فتُخصم من رصيدك في KIT حسب السعر الموضّح أعلاه.

ما تحلّه صورة Sprite

المواقع والألعاب التي تحوي أيقونات كثيرة تُحمَّل أسرع حين تكون هذه الأيقونات كلها في ملف واحد، بدل أن يطلب المتصفح كل أيقونة على حدة من الخادم. صورة Sprite هي بالضبط ذلك: صورة كبيرة تحتل فيها كل قطعة موضعًا ثابتًا. إلى جانب الصورة نفسها، تحصل على قائمة إحداثيات بصيغة JSON تتيح لك الوصول إلى كل قطعة داخل CSS أو كود اللعبة.

خطوات المعالجة

ترفع الصور المنفردة، وترتّبها الأداة تلقائيًا في شبكة متراصّة، وتعيد ملف Sprite جاهزًا مع قائمة الإحداثيات. الترتيب لا يتّبع نمطًا ثابتًا، بل يحاول شغل المساحة المتاحة بأقل فراغ ممكن. الفارق يظهر بوضوح أكبر مع تشكيلات من عشرين أيقونة أو أكثر، حيث يقلّ عدد الملفات المنفردة من عشرين إلى واحد. لا حاجة لترتيب الصور يدويًا قبل الرفع؛ الخوارزمية تتولى التنظيم، وما يهمّك فعليًا هو قائمة الإحداثيات المرفقة لاستخدامها لاحقًا في الكود.

السعر وملاحظة عن مرحلة التجربة

السعر $0.002 لكل طلب إضافة إلى $0.005 لكل صورة معالَجة — ملف من عشرين أيقونة يكلّف نحو $0.10. الأداة اليوم في مرحلة تجريبية (Beta)، وقد تتغيّر بنية قائمة الإحداثيات قليلًا في نسخ لاحقة؛ يُستحسن مراجعة الصيغة الحالية قبل تثبيتها داخل مسار بناء (Build Pipeline) دائم. لا يوجد فرق في السعر بين أيقونة بسيطة وأخرى مفصّلة الألوان؛ التكلفة مرتبطة بعدد الصور المعالَجة وحده، لا بحجم كل صورة على حدة.

حالات الاستخدام

متجر إلكتروني يسرّع تحميل أيقوناته

يستخدم متجر إلكتروني في الشارقة عشرين أيقونة لواجهته. بدل عشرين ملفًا منفردًا، صار الموقع يحمّل ملف Sprite واحدًا، وتحسّنت سرعة تحميل الصفحة تحسّنًا ملحوظًا.

فريق تطوير ألعاب متصفح صغير

يجمّع فريق تطوير صغير في دبي مراحل حركة شخصية تتكوّن من اثنتي عشرة صورة في ملف Sprite واحد، ويوفّر بذلك التجميع اليدوي في برنامج تحرير.

لوحة تحكم داخلية بعشرات الرموز

يدير عبدالله المنصوري لوحة تحكم داخلية فيها أكثر من ثلاثين رمز حالة. ملف Sprite واحد حلّ محل مجموعة ملفات PNG منفردة في مجلد المشروع.

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

ما معنى أن الأداة في مرحلة تجريبية؟

الأداة تعمل وتعطي نتائج موثوقة، لكن بنية قائمة الإحداثيات قد تتغيّر قليلًا في نسخ لاحقة. للمشاريع الإنتاجية يُستحسن اختبار سريع مسبقًا.

بأي ترتيب تُوضع الصور داخل الملف؟

تُرتَّب الصور تلقائيًا بأقل فراغ ممكن؛ الموضع الدقيق لكل قطعة موجود في قائمة الإحداثيات المرفقة، لا في ترتيب ثابت يمكن الاعتماد عليه.

كم تكلفة ملف Sprite بعدد كبير من الصور؟

$0.002 لكل طلب إضافة إلى $0.005 لكل صورة. ملف من خمسين أيقونة يكلّف نحو $0.25، بصرف النظر عن حجم الملف الناتج.

هل تُحفظ الصور المرفوعة بعد المعالجة؟

لا، تُستخدم فقط لحساب ملف Sprite ولا تُحفظ بعد تسليم النتيجة.

هل هناك حد لعدد الصور في الملف الواحد؟

لا حد مباشر على العدد، لكن كل صورة منفردة يجب ألا تتجاوز 15 ميجابايت و12 ميجابكسل.

هل يمكن ربط الأداة بمسار بناء آلي عبر API؟

نعم، الوظيفة نفسها متاحة عبر API، وهو خيار مناسب لمسارات البناء الآلية التي تتغيّر فيها تشكيلة الأيقونات باستمرار.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/image/sprite

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/image/sprite \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"image":"https://ejemplo.com/imagen.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({
    "image": "https://ejemplo.com/imagen.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[&#39;KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.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" => &#39;{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.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)

مثال على الطلب

{
  "image": "https://ejemplo.com/imagen.jpg"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.sprite",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

لكل صورة$0.005

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`max_mb`	15
`max_megapixels`	12

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←