نسبة الأبعاد هي العرض مقسومًا على الارتفاع، وذلك الرقم الواحد هو كل الحساب. 16:9 هي 1.777…؛ اضرب فيه أو اقسم عليه لتنتقل من بُعد إلى الآخر.
من ملّيمتر إلى نسبة
اقسم الاثنين على قاسمهما المشترك الأكبر
النسبة بلا وحدات، فالملّيمترات لا تحتاج تحويلًا — اختزل الرقمين بقاسمهما المشترك الأكبر فالنسبة هي ما يبقى. 210 × 297 ملّيمترًا، أي ورقة A4، قاسمها المشترك الأكبر 3 فهي 70:99. يعمل الحساب نفسه على البكسلات أو البوصات أو أي شيء آخر، لأن الوحدات تُختصر.
مكتوبةً a:b هي الكسر نفسه مختزَلًا — فـ1920:1080 مقسومةً على قاسمهما المشترك الأكبر 120 تعطي 16:9. لهذا تكون 1920 × 1080 و640 × 360 النسبة نفسها بمقاسين مختلفين جدًّا.
التي تستحق المعرفة
16:9 — الفيديو، والشاشات، ويوتيوب، والعروض التقديمية. الافتراضية لكل ما يتحرّك.
9:16 — الفيديو العمودي. الريلز، والشورتس، وتيك توك، والقصص.
4:5 — أطول ما يُسمح به لمنشور خلاصة في إنستغرام، ومن ثمّ التي تشغل أكبر قدر من الشاشة.
1:1 — مربّعة. الصور الشخصية، ومنشورات الخلاصة التي يجب أن يكون القصّ فيها متوقَّعًا.
1.91:1 — شكل معاينة الرابط، وهو ما تُقصّ إليه بطاقة Open Graph. 1200 × 630 هو المقاس المعتاد.
3:2 — معظم الكاميرات، ومطبوعات 6 × 4. 4:3 — الشاشات الأقدم، وأجهزة iPad، وقدر كبير من صور الأرشيف.
√2:1 — ورق سلسلة A، وهي النسبة التي تنجو من الطيّ نصفين. فطيّ A4 يعطي A5 بالشكل نفسه، ولا نسبة أخرى تفعل ذلك.
القصّ، وما يكلّفه
تغيير النسبة يعني حذف بكسلات أو إضافة مساحة فارغة. لا خيار ثالث.
cover يملأ الصندوق ويقصّ الفائض. صحيح للخلفيات والمصغَّرات، وسيقطع رأسًا من صورة شخصية حين يكون الصندوق عريضًا.
contain يُدخل الصورة كلها ويترك فجوات. صحيح للشعارات والرسوم، حيث يفقد ضياع حافّة المعنى.
ما ينبغي تفاديه هو المطّ للملاءمة، فهو يشوّه كل شيء ويُرى فورًا على أي وجه. فإن كان لا بدّ أن تتغيّر النسبة، فقُصّ عمدًا لتختار أنت ما يذهب بدل ترك القرار لحاوية.
حيث تُعرض الصورة نفسها بنسب عدّة — بطاقة، ولافتة، ومصغَّرة — لا بدّ أن ينجو الموضوع من أضيق قصّ. التكوين بجعل الجزء المهمّ قرب الوسط هو الجواب الوحيد الذي يُعتمد عليه.
مشكلة إزاحة التخطيط
الصورة بلا أبعاد معلَنة لا تشغل مساحة حتى تُحمَّل، فتُعرض الصفحة، وتصل الصورة، ويقفز كل ما تحتها نزولًا. هي من أشيع أسباب درجة إزاحة التخطيط السيّئة ومن أيسرها إصلاحًا.
اضبط سمتَي width وheight على الصورة. تستعملهما المتصفّحات لحساب النسبة وحجز المساحة فقط — فـCSS ما زال يتحكّم في المقاس المعروض، فهذا لا يصارع ورقة أنماطك.
للحاويات والتضمينات والفيديو، تؤدّي خاصّية aspect-ratio في CSS العمل نفسه، وقد حلّت محلّ حيلة padding-top بالنسبة المئوية التي كان هذا يتطلّبها.
الدقّة ليست النسبة
«1080p» ارتفاع. «4K» عرض تقريبًا. لا واحدة منهما تذكر شكلًا، ولهذا تكون 4K السينمائية و4K الاستهلاكية نسبتين مختلفتين بعدد بكسلات متقارب.
حين يطلب أحدهم 16:9 فهو يعني الشكل؛ وحين يطلب 1080p فهو يعني المقاس. تقديم أحدهما مكان الآخر هو مصدر معظم الالتباس في التسليم — ولأعداد البكسلات التباسها الخاصّ.
حسابها
الحاسبة تجيب عن السؤالين اللذين يظهران: أي ارتفاع يطابق هذا العرض عند هذه النسبة، وأي نسبة هذا الزوج من الأرقام. الثاني هو الذي يستحق أن يُفعل قبل الافتراض — فمجموعة أصول تبدو متّسقة كثيرًا ما تكون ثلاث نسب مختلفة اختلافًا طفيفًا.
الخلاصة
العرض على الارتفاع، رقم واحد، وكل سؤال عن نسبة هو ذلك الحساب. 16:9 للفيديو، و9:16 للعمودي، و4:5 للخلاصات، و1.91:1 لمعاينات الروابط. أعطِ الصورة أبعادها دائمًا كي لا تقفز الصفحة. قُصّ عمدًا بدل ترك حاوية تختار.