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

حساب أحجام الصور المتجاوبة حسب نقاط التوقف

عند كثافة بكسل مضاعفة تحتاج صورة تظهر بعرض 720 بكسل إلى أصل بعرض 1440. أدخل كل نقطة توقف والعرض الذي تظهر به الصورة، واحصل على العروض المطلوب إنشاؤها مرتبة ودون تكرار، مثل 640 و1440 و2160. مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

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

مثال محلول

إذا أدخلت

كثافة البكسل: 2

تحصل على

عروض المصدر: 640, 1,440, 2,160

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

حوّل قواعد التخطيط إلى بكسلات مصدرية

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

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

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

اختر معامل كثافة البكسل بعناية

المعامل الافتراضي هو 2، وهو أساس مناسب للحفاظ على وضوح الصور في الشاشات عالية الكثافة الشائعة. لذلك تحتاج الصورة التي تظهر بعرض 480 بكسلا في CSS إلى مصدر بعرض 960 بكسلا. يمكنك اختيار قيمة أخرى بين 0.1 و8 عندما تكون لسياسة التسليم أهداف مختلفة.

يقلل المعامل 1 أبعاد الملفات للشاشات عادية الكثافة، بينما يجهز المعامل 3 ملفات للشاشات الأعلى كثافة مقابل زيادة التخزين والنقل. يُطبق المعامل نفسه على جميع نقاط التوقف حتى تمثل النتيجة سياسة موحدة. لا تختار الأداة الملف الذي سينزله كل زائر، ولا تقدر الضغط أو حجم الملف؛ بل تحسب العروض المطلوبة فقط.

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

استخدم النتيجة في مسار الصور المتجاوبة

تحتوي الاستجابة على المعامل المطبق، وصف مرتب لكل نقطة توقف، وقائمة رقمية بالعروض المصدرية الفريدة. تساعدك الصفوف على مقارنة التنفيذ بالتصميم، لأن كل صف يعرض العرض الأصلي الظاهر إلى جانب العرض المحسوب. وتفيد القائمة الفريدة في الأتمتة عندما تحتاج قاعدتان إلى الملف نفسه.

فإذا عرض شرطان الصورة بعرض 600 بكسل في CSS، يكفي مع المعامل 2 إنشاء نسخة واحدة بعرض 1200 بكسل. أرسل كل عرض فريد إلى مرحلة تغيير الحجم، وحافظ فيها على نسبة الأبعاد، ثم استخدم عناوين URL الناتجة في المكون. أما القص والتنسيق والجودة والارتفاع فتنتمي إلى تلك المرحلة اللاحقة، لأنها تعتمد على الصورة والتوجيه الفني.

تُرفض القوائم الفارغة ونقاط التوقف المكررة لأنها لا تكوّن مواصفة متجاوبة واضحة لا لبس فيها.

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

إعداد النسخ أثناء البناء

حوّل مواصفات المكون إلى العروض الفريدة الدقيقة التي ينبغي للموقع الثابت إنشاؤها.

مراجعة تسليم التصميم

تحقق من أن الملفات المسلمة تحتوي على عدد كاف من البكسلات للكثافة المتفق عليها في كل حالة.

إعداد شبكة CDN للصور

أنشئ قائمة عروض ثابتة لطلبات تغيير الحجم أو الإعدادات المسبقة أو تهيئة ذاكرة التخزين المؤقت.

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

لماذا تُقرب العروض المصدرية إلى الأعلى؟

لا يمكن أن يكون عرض الصورة كسريا، وقد يؤدي التقريب إلى الأسفل إلى توفير بكسلات أقل من الكثافة المطلوبة.

ما كثافة البكسل الافتراضية؟

المعامل الافتراضي هو 2، ولذلك يتطلب عرض 500 بكسل في CSS مصدرا بعرض 1000 بكسل.

هل تنشئ الأداة الصور أو تغير أحجامها؟

لا. تحسب الأداة العروض المطلوب إنشاؤها، بينما ينفذ معالج الصور أو أداة البناء أو CDN تغيير الحجم.

ماذا يحدث إذا كانت قائمة نقاط التوقف فارغة؟

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

لماذا يكون عدد عروض المصدر أقل من عدد نقاط التوقف؟

لأن العروض المكررة تُحذف. إذا ظهرت الصورة بعرض 720 بكسل عند 768 وعند 1024، فكلاهما يحتاج إلى الأصل نفسه بعرض 1440، فتعطي أربع نقاط توقف ثلاثة عروض فقط: 640 و1440 و2160.

أدوات ذات صلة

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/image/responsive-breakpoint-sizes

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

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

curl -X POST https://api.kit.forhosting.com/image/responsive-breakpoint-sizes \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}'

const res = await fetch("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "breakpoints": [
      {
        "breakpoint": 0,
        "display_width": 320
      },
      {
        "breakpoint": 768,
        "display_width": 720
      },
      {
        "breakpoint": 1200,
        "display_width": 1080
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "breakpoints": [
        {
            "breakpoint": 0,
            "display_width": 320
        },
        {
            "breakpoint": 768,
            "display_width": 720
        },
        {
            "breakpoint": 1200,
            "display_width": 1080
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "breakpoints": [
    {
      "breakpoint": 0,
      "display_width": 320
    },
    {
      "breakpoint": 768,
      "display_width": 720
    },
    {
      "breakpoint": 1200,
      "display_width": 1080
    }
  ]
}

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

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

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

الأسعار

لكل طلب$0.002

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

الحدود

`max_mb`	15
`max_megapixels`	12

الأخطاء

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

أسئلة تقنية

ما تكلفة العملية الحسابية؟

تكلفة كل عملية حسابية عبر API هي $0.002.

لماذا تتضمن النتيجة sizes وsource_widths؟

يحتفظ sizes بالعلاقات للمراجعة، بينما يزيل source_widths التكرار لتوليد الملفات بكفاءة.

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

شغّل الأداة مجانًا