حساب أحجام الصور المتجاوبة حسب نقاط التوقف
تحدد التصاميم المتجاوبة عادة عرض الصورة عند عدة نقاط توقف في CSS، بينما يحتاج مسار معالجة الصور إلى عروض الملفات الفعلية بالبكسل. تحوّل هذه الحاسبة كل عرض ظاهر إلى عرض مصدري مطلوب باستخدام معامل كثافة البكسل، ثم تعيد قائمة مرتبة خالية من التكرار. وبذلك تصبح العلاقة بين التخطيط وكثافة الشاشة وملفات الصور واضحة وقابلة للتكرار والأتمتة.
شغّل الأداة مجانًا
حوّل قواعد التخطيط إلى بكسلات مصدرية
ابدأ بنقاط التوقف المحددة في التصميم أو ورقة الأنماط. أدخل لكل نقطة الحد الأدنى لعرض إطار العرض الذي تبدأ عنده القاعدة، والعرض الفعلي الذي تظهر به الصورة. تُقاس القيمتان ببكسلات CSS، ولذلك يمكنك نسخهما مباشرة من المواصفات. ترتب الحاسبة الصفوف حسب نقطة التوقف مهما كان ترتيب إدخالها. ثم تضرب كل عرض ظاهر في معامل الكثافة المختار، وتقرّب الناتج إلى العدد الصحيح الأعلى. يمنع التقريب إلى الأعلى أن ينتج عن القيمة الكسرية ملف أصغر ببكسل واحد من المطلوب. تحتفظ الاستجابة بكل علاقة بين نقطة التوقف والعرض لتتمكن من مراجعتها، وتقدم كذلك قائمة مستقلة بالعروض المصدرية الفريدة. تمثل هذه القائمة مجموعة النسخ العملية التي ينبغي إنشاؤها وتخزينها مؤقتا والإشارة إليها ضمن مسار الصور المتجاوبة.
اختر معامل كثافة البكسل بعناية
المعامل الافتراضي هو 2، وهو أساس مناسب للحفاظ على وضوح الصور في الشاشات عالية الكثافة الشائعة. لذلك تحتاج الصورة التي تظهر بعرض 480 بكسلا في CSS إلى مصدر بعرض 960 بكسلا. يمكنك اختيار قيمة أخرى بين 0.1 و8 عندما تكون لسياسة التسليم أهداف مختلفة. يقلل المعامل 1 أبعاد الملفات للشاشات عادية الكثافة، بينما يجهز المعامل 3 ملفات للشاشات الأعلى كثافة مقابل زيادة التخزين والنقل. يُطبق المعامل نفسه على جميع نقاط التوقف حتى تمثل النتيجة سياسة موحدة. لا تختار الأداة الملف الذي سينزله كل زائر، ولا تقدر الضغط أو حجم الملف؛ بل تحسب العروض المطلوبة فقط. مرر القائمة الناتجة إلى أداة تحسين أو خدمة تحويل، ودع المتصفح يختار المورد المناسب من خلال ترميز المكون وقواعد الوسائط.
استخدم النتيجة في مسار الصور المتجاوبة
تحتوي الاستجابة على المعامل المطبق، وصف مرتب لكل نقطة توقف، وقائمة رقمية بالعروض المصدرية الفريدة. تساعدك الصفوف على مقارنة التنفيذ بالتصميم، لأن كل صف يعرض العرض الأصلي الظاهر إلى جانب العرض المحسوب. وتفيد القائمة الفريدة في الأتمتة عندما تحتاج قاعدتان إلى الملف نفسه. فإذا عرض شرطان الصورة بعرض 600 بكسل في CSS، يكفي مع المعامل 2 إنشاء نسخة واحدة بعرض 1200 بكسل. أرسل كل عرض فريد إلى مرحلة تغيير الحجم، وحافظ فيها على نسبة الأبعاد، ثم استخدم عناوين URL الناتجة في المكون. أما القص والتنسيق والجودة والارتفاع فتنتمي إلى تلك المرحلة اللاحقة، لأنها تعتمد على الصورة والتوجيه الفني. تُرفض القوائم الفارغة ونقاط التوقف المكررة لأنها لا تكوّن مواصفة متجاوبة واضحة لا لبس فيها.
حالات الاستخدام
إعداد النسخ أثناء البناء
حوّل مواصفات المكون إلى العروض الفريدة الدقيقة التي ينبغي للموقع الثابت إنشاؤها.
مراجعة تسليم التصميم
تحقق من أن الملفات المسلمة تحتوي على عدد كاف من البكسلات للكثافة المتفق عليها في كل حالة.
إعداد شبكة CDN للصور
أنشئ قائمة عروض ثابتة لطلبات تغيير الحجم أو الإعدادات المسبقة أو تهيئة ذاكرة التخزين المؤقت.
الأسئلة الشائعة
ما تكلفة العملية الحسابية؟
تكلفة كل عملية حسابية عبر API هي $0.002.
لماذا تُقرب العروض المصدرية إلى الأعلى؟
لا يمكن أن يكون عرض الصورة كسريا، وقد يؤدي التقريب إلى الأسفل إلى توفير بكسلات أقل من الكثافة المطلوبة.
ما كثافة البكسل الافتراضية؟
المعامل الافتراضي هو 2، ولذلك يتطلب عرض 500 بكسل في CSS مصدرا بعرض 1000 بكسل.
هل تنشئ الأداة الصور أو تغير أحجامها؟
لا. تحسب الأداة العروض المطلوب إنشاؤها، بينما ينفذ معالج الصور أو أداة البناء أو CDN تغيير الحجم.
لماذا تتضمن النتيجة sizes وsource_widths؟
يحتفظ sizes بالعلاقات للمراجعة، بينما يزيل source_widths التكرار لتوليد الملفات بكفاءة.
ماذا يحدث إذا كانت قائمة نقاط التوقف فارغة؟
يفشل الطلب بخطأ إدخال غير صالح، لأن وجود قاعدة تخطيط واحدة على الأقل أمر مطلوب.
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة 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 فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_mb | 15 |
max_megapixels | 12 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |