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

طريقة إنشاء مجموعة أحجام متجاوبة

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

● مستقرةلكل طلب · لكل صورة$0.002

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

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

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

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

لماذا لا تكفي صورة واحدة بكل المقاسات

حين يفتح زائر الموقع من هاتفه صورة مُعدّة أصلًا لشاشة حاسوب كبيرة، يُحمَّل الملف الكبير كاملًا رغم أن المساحة المعروضة أصغر بكثير، فيهدر بيانات الإنترنت ويبطّئ الصفحة. توليد مجموعة مقاسات — مثل 400 و800 و1200 و1600 بكسل — يتيح للمتصفح اختيار النسخة الأقرب لحجم العرض الفعلي، فيصل المحتوى أسرع خصوصًا على شبكات الجوال المتذبذبة. هذا الفرق يتراكم عبر عشرات الصور في الصفحة الواحدة ليصبح فارقًا حقيقيًا في زمن التحميل الكلي.

مخرجات جاهزة لسمة srcset

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

اختيار المقاسات حسب طبيعة الصفحة

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

أثر مباشر على سرعة الموقع

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

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

بانر الصفحة الرئيسية لموقع مؤسسي

تريد شركة الخليج الرقمية أن يظهر بانر الصفحة الرئيسية بجودة عالية على شاشة الحاسوب دون أن يبطّئ تحميله على الجوال. تولّد مجموعة مقاسات من الصورة الأصلية، وتلصق نص srcset الجاهز في قالب الموقع مباشرة.

صور منتجات متجر إلكتروني

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

صورة غلاف مقال على مدونة

تحرص فاطمة الزهراني على أن تظهر صورة غلاف كل مقال بوضوح على الجوال دون أن تُحمَّل نسخة الحاسوب الثقيلة بلا داعٍ، فتستخدم مجموعة الأحجام المتجاوبة لكل صورة غلاف جديدة.

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

كم مقاسًا تُنتِج الأداة من الصورة الواحدة؟

يمكن اختيار عدد المقاسات المطلوبة، وعادة أربعة إلى ستة مقاسات تغطي الجوال والحاسوب اللوحي وشاشات الحاسوب المختلفة. كل مقاس يُحتسَب كصورة منفصلة ضمن السعر.

هل أحتاج إلى تعديل قالب الموقع يدويًا لاستخدام النتيجة؟

تسلَّم مع الصور نص srcset جاهز يُلصَق مباشرة في وسم الصورة على الصفحة؛ لا حاجة إلى حساب النسب أو كتابة الكود من الصفر.

هل تدعم الصيغ الحديثة مثل WebP ضمن المجموعة؟

نعم، يمكن توليد المجموعة بصيغة JPG أو PNG أو WebP حسب ما يناسب موقعك، وWebP عادة يمنح حجم ملف أصغر بجودة مقاربة.

ما تكلفة توليد مجموعة أحجام متجاوبة؟

السعر $0.002 للطلب الواحد إضافة إلى $0.005 لكل مقاس يُنتَج، فتوليد أربعة مقاسات من صورة واحدة تكلفة معلنة ومحسوبة مسبقًا.

هل تبقى الصورة الأصلية محفوظة لديكم؟

لا. تُستخدم الصورة الأصلية أثناء توليد المقاسات فقط، عبر اتصال مشفّر، ثم لا تبقى محفوظة على خوادمنا بعد تسليم النتيجة.

هل يعمل هذا من الجوال أيضًا؟

نعم، يمكنك رفع الصورة وتوليد المجموعة من متصفح الجوال مباشرة، ثم تنزيل الملفات أو نسخ نص srcset إلى نظام إدارة المحتوى.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/image/responsive-set

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

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

curl -X POST https://api.kit.forhosting.com/image/responsive-set \
  -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/responsive-set", {
  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/responsive-set",
    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/responsive-set", 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/responsive-set", 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.responsive_set",
  "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 الكامل ←