الصورة نفسها يمكن أن تكون 16:9 أو 4:3 أو 1:1 من دون أن تصبح “صيغة” مختلفة. ما يتغير هو شكل الإطار والعلاقة بين العرض والارتفاع. المشكلة تبدأ عندما نحاول إجبار صورة على نسبة جديدة من دون قص أو مساحة فارغة، فتظهر الوجوه والسيارات والأشياء ممدودة أو مضغوطة.
فهم نسبة الأبعاد قبل تغيير المقاس
ما معنى 16:9 أصلًا؟
النسبة 16:9 لا تعني أن الصورة يجب أن تكون 1600×900 بكسل تحديدًا. أي أبعاد تحافظ على العلاقة نفسها تنتمي إلى 16:9، مثل 1920×1080 أو 1280×720. إذا قسمت العرض على الارتفاع تحصل على القيمة نفسها تقريبًا.
والفكرة نفسها تنطبق على 4:3 و1:1. لذلك يمكن لصورتين مختلفتين جدًا في الدقة أن تشتركا في نسبة الأبعاد نفسها.
تغيير الحجم شيء، وتغيير النسبة شيء آخر
إذا قللت صورة 1920×1080 إلى 1280×720 فأنت غيّرت الحجم مع الحفاظ على 16:9. أما إذا حولتها إلى 1280×960 فأنت انتقلت إلى 4:3. عند هذه النقطة يجب أن تقرر ماذا سيحدث للمحتوى: هل نقص جزءًا منه؟ أم نترك فراغًا؟ أم نشوّه الصورة؟
العرض والارتفاع يتغيران معًا. الأشخاص والدوائر والأشياء تحتفظ بشكلها الطبيعي.
العرض أو الارتفاع يتغير وحده للوصول إلى أبعاد مفروضة. النتيجة قد تكون صورة مشوهة.
لماذا يحدث التشويه؟
عندما تفرض على المحتوى عرضًا وارتفاعًا لا يتوافقان مع نسبته الطبيعية، فإنك تطلب منه أن يملأ مستطيلًا مختلف الشكل. في الويب، توضح مواصفة W3C CSS Images أن قيمة object-fit: fill تملأ صندوق العنصر بالعرض والارتفاع المستخدمين، بينما contain وcover يحافظان على نسبة الصورة. [المصدر: W3C CSS Images]
القص أم الاحتواء؟
Contain أم Cover؟
في الويب يوجد فرق عملي مهم. contain يجعل الصورة كلها ظاهرة داخل الصندوق مع الحفاظ على نسبتها، وقد يترك مساحة فارغة. أما cover فيجعل الصورة تغطي الصندوق بالكامل مع الحفاظ على النسبة، وهذا قد يعني قص أجزاء من الصورة.
W3C يعرّف contain بأنه أكبر مستطيل يحافظ على النسبة ولا يتجاوز الصندوق، وcover بأنه أصغر مستطيل يحافظ على النسبة ويغطي الصندوق كاملًا. [المصدر: W3C CSS Images — Cover and Contain]
متى يكون القص هو الخيار الصحيح؟
القص مناسب عندما يكون هدفك إطارًا موحدًا، مثل صور المقالات أو بطاقات المنتجات، وتستطيع الاستغناء عن الأطراف. الصورة تبقى طبيعية لأنك لا تمددها؛ أنت تختار جزءًا منها.
لكن القص يحتاج انتباهًا لموضع العنصر المهم. إذا كان الوجه قريبًا من الحافة، قد يختفي بعد تحويل صورة أفقية إلى مربع.
ومتى يكون contain أفضل؟
عندما يجب أن يظهر المنتج أو المستند أو الرسم كاملًا. في هذه الحالة وجود مساحة فارغة حول الصورة أهون من قطع جزء مهم منها.
نسبة الأبعاد في CSS ليست مجرد حيلة للصور
مواصفة CSS Box Sizing تعرف الخاصية aspect-ratio كنسبة مفضلة للصندوق نفسه، وتستخدمها حسابات الحجم التلقائي. هذا مفيد لحجز مساحة صحيحة قبل تحميل الصورة أو للحفاظ على شكل بطاقات وفيديوهات وعناصر أخرى. [المصدر: W3C CSS Box Sizing]
كيف تختار النسبة المناسبة؟
كيف تختار بين 16:9 و4:3 و1:1؟
مناسب للصور العريضة، أغلفة المقالات، الفيديو، والمساحات الأفقية الواسعة.
يعطي ارتفاعًا أكبر من 16:9 ويصلح لصور تحتاج مساحة رأسية أكثر من دون التحول إلى مربع.
مفيد للبطاقات والشبكات وصور المنتجات عندما تريد خلايا متساوية وواضحة.
لا تخلط بين النسبة والدقة
صورة 160×90 وصورة 3840×2160 كلاهما 16:9، لكن الدقة مختلفة جذريًا. نسبة الأبعاد لا تخبرك هل الصورة حادة أو كافية لشاشة كبيرة؛ هي تصف الشكل فقط.
ولهذا يجب أن تفصل بين ثلاثة أسئلة: ما نسبة الإطار؟ ما أبعاد الصورة بالبكسل؟ وما الحجم المناسب للتحميل؟ مقال تقليل حجم الصور دون إفساد الجودة يتعامل مع السؤال الثالث بصورة أوسع.
خطأ شائع: اختيار أبعاد جميلة ثم فرضها على كل صورة
إذا قررت أن كل الصور 1200×800 ثم بدأت تمدد صورًا مربعة وعريضة لتطابق هذا الرقم، ستكسب توحيدًا في المقاس وتخسر الشكل الطبيعي. الأفضل تحديد نسبة الهدف ثم قص أو احتواء الصورة بحسب نوع المحتوى.
كيف تحسب البعد الثاني من النسبة؟
إذا كان لديك عرض مستهدف وتريد الحفاظ على النسبة، لا تخمّن الارتفاع. في 16:9 مثلًا يمكنك حساب الارتفاع بهذه الفكرة: الارتفاع = العرض × 9 ÷ 16. فإذا كان العرض 1600 بكسل، يكون الارتفاع 900 بكسل. وفي 4:3: الارتفاع = العرض × 3 ÷ 4.
والعكس صحيح إذا عرفت الارتفاع فقط. هذه الطريقة أفضل من إدخال رقمين منفصلين ثم اكتشاف التشويه بعد التصدير.
من 4:3 إلى 16:9 عمليًا
ماذا يحدث عند تحويل صورة 4:3 إلى 16:9؟
صورة 4:3 أكثر ارتفاعًا نسبيًا من إطار 16:9. إذا أردت أن تملأ 16:9 بالكامل مع الحفاظ على الشكل الطبيعي، يجب قص جزء من أعلى وأسفل الصورة غالبًا. وإذا أردت إظهار الصورة كاملة، سيظهر فراغ على الجانبين أو داخل الإطار بحسب طريقة العرض.
هذا ليس عيبًا في الأداة؛ هو نتيجة هندسية مباشرة لاختلاف النسب. لا يمكن الاحتفاظ بكل البكسلات، وملء الإطار، والحفاظ على النسبة في الوقت نفسه عندما يكون شكل المصدر والهدف مختلفًا.
القص الذكي يحتاج نقطة تركيز
عند استخدام cover أو قص صورة يدويًا، لا يكفي أن تحافظ على النسبة. عليك أيضًا اختيار أي جزء سيبقى داخل الإطار. في CSS يمكن استخدام object-position لتغيير موضع الصورة داخل الصندوق، بدل الاعتماد دائمًا على المركز.
إذا كان الشخص في يمين الصورة، فقص مركزي قد يقطع نصفه. تحريك نقطة التركيز نحو اليمين يحافظ على العنصر المهم مع بقاء الإطار 16:9 أو 1:1 كما هو.
نسبة مطلوبة أم مقاس مطلوب؟
عندما تقول منصة إنها تريد 16:9، فهذه معلومة عن الشكل. وعندما تطلب 1280×720، فهي تحدد الشكل والدقة معًا. قد تقبل المنصة صورة 1920×1080 لأنها تملك النسبة نفسها، ثم تصغرها لاحقًا.
أما إذا كان المطلوب حدًا أدنى محددًا بالبكسل، فلا يكفي أن تكون النسبة صحيحة؛ يجب أن تكون الأبعاد أيضًا كبيرة بما يكفي.
اضبط أبعاد الصور مع الحفاظ على شكلها
أداة الصور في تولاتي تسمح بتحديد الأبعاد أثناء معالجة الصورة. عند تغيير العرض والارتفاع، راقب النسبة حتى لا تحول تصغيرًا بسيطًا إلى تشويه.
المصادر الرسمية المستخدمة
- W3C — CSS Images Module Level 3: تعريف object-fit وcontain وcover والحفاظ على النسبة الطبيعية للمحتوى.
- W3C — CSS Box Sizing Module Level 4: تعريف الخاصية aspect-ratio والنسبة المفضلة للصندوق.