كيفية تحديد حجم الصور وموضعها في مقال يجمع بين النص والصورة

ابدأ بالهدف من الصورة

قبل تحريك أي صورة أو تغيير حجمها، حدد ما يفترض أن يستفيده القارئ منها. هل هي دليل يحتاج إلى فحصه وتدقيقه، أم مثال يسهل تخيل الفقرة، أم مجرد عنصر تزييني؟ هذا التمييز أكثر فائدة بكثير من البدء بعرض محدد مسبقاً للصورة.

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

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

اختر الحجم بناءً على الأهمية والمساحة المتاحة

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

إليك نموذجاً توضيحياً لاتخاذ القرار، وليس قالباً تم اختباره: لنفترض أن عمود محتوى بعرض 700 بكسل يحتوي على صورة توضح جسماً من جزأين، والفرق بينهما يمثل محور الفقرة. قد يجعل عرض الصورة بعرض يقارب عرض العمود بالكامل المقارنة أسهل. وإذا كانت الصورة نفسها مجرد مشهد عام وكانت الفقرة تحتوي على الشرح الكامل، فقد يحافظ العرض الأضيق على التركيز على النص. إن رقم 700 بكسل هو مجرد مثال لعرض العمود، وليس معياراً قياسياً موصى به.

عندما تظهر الصورة بجانب النص على شاشة عريضة، تعامل معهما كوحدة مقترنة. امنح الصورة عرضاً كافياً لإظهار موضوعها، وامنح النص مساحة كافية ليظل مريحاً للقراءة. إذا أصبح أحدهما ضيقاً، ضعهما فوق بعضهما (تنسيق رأسي) بدلاً من تقليص حجم الصورة وحشر النص في شريط ضيق. وعلى الشاشات الأصغر، غالباً ما يكون التسلسل في عمود واحد هو الترتيب الأكثر وضوحاً: النص، يليه الصورة المرتبطة به، ثم الفقرة التالية. يوضح شرح W3C لمعيار WCAG 2.2 الخاص بإعادة التدفق (Reflow) كيف يمكن للعديد من صفحات المقالات أن تتكيف مع عمود واحد، ويشرح هدف تجنب التمرير في اتجاهين لمحتوى القراءة العادي. كما يشير أيضاً إلى استثناءات للمحتوى الذي يتطلب معناه أو استخدامه تخطيطاً ثنائي الأبعاد. والمغزى من ذلك لتنسيق المقال هو التأكد من أن اقتران الصورة بالنص لا يجبر القراء على التمرير أفقياً لمتابعة القراءة.

ضع كل صورة في مكان يبين صلتها بالنص بوضوح

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

استخدم التعليق التوضيحي (الكابشن) عندما يضيف شيئاً محدداً: كتحديد موضوع الصورة، أو الإشارة إلى تفصيل معين، أو توضيح سبب أهميتها. لا تستخدم التعليق لتكرار الجملة المحيطة كلمة بكلمة. وإذا كانت الصورة تتطلب فحصاً دقيقاً، فحدد ما يجب النظر إليه في النص القريب وكذلك في التعليق؛ إذ لا ينبغي إجبار القراء على استنتاج الهدف من موضع الصورة بمفرده.

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

حافظ على الأبعاد والشكل المفيد للصورة

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

إذا كان القص يزيل السياق، أو يغير المعنى المقصود، أو يخفي تفصيلاً تمت مناقشته في المقال، فاستخدم قصاً مختلفاً أو اعرض الصورة بأبعادها الأصلية. وبالنسبة للمخططات أو الملصقات التوضيحية أو الوثائق، تحقق من حجم العرض النهائي: فقد يصبح النص المدمج في الصورة صغيراً جداً بحيث يصعب قراءته. وتنصح إرشادات الصور في GOV.UK عموماً بعدم وضع نصوص داخل الصور لأنها قد تكون صعبة القراءة أو النسخ أو تغيير الحجم أو الوصول إليها عبر قارئات الشاشة؛ وعندما يكون النص ضرورياً في الصورة، قدم معناه في المحتوى المكتوب المجاور لها أيضاً.

تحقق من التنسيق بالأحجام التي يستخدمها القراء

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

بالنسبة لصفحات الويب، يُعد حجم العرض وحجم الملف قرارين منفصلين. قد يتطلب العرض بحجم كبير ملفاً أصلياً كبيراً، ولكن إرسال ملفات صور كبيرة دون داعٍ إلى الشاشات الأصغر قد يهدر بيانات الإنترنت. يشرح دليل web.dev من Google حول الصور المتجاوبة كيف يمكن للمتصفحات الاختيار من بين أحجام متعددة للصور وفقاً لظروف العرض المختلفة، ويشير إلى عدم وجود عدد صحيح واحد محدد لنسخ الصورة. هذا توجيه تقني خاص بالنشر على الويب؛ ولا يحدد الموضع الذي تنتمي إليه الصورة داخل المقال.

تسلسل سريع لاتخاذ القرار

حدد دور الصورة. هل الهدف منها هو الفحص والتدقيق، أم توضيح النص، أم مجرد تزيين الصفحة؟

حدد موضع ربطها. حدد الفقرة التي تقدمها أو تعتمد عليها، ثم ضع الصورة بجانب تلك الفقرة.

حدد عرض العرض. امنح الدليل الرئيسي مساحة كافية؛ واجعل الصورة الداعمة تشغل مساحة أقل إذا لم تكن التفاصيل ضرورية.

تحقق من القص. حافظ على وضوح الموضوع الرئيسي وجميع عناصر السياق المهمة.

اقرأ التنسيق بصوت عالٍ بالتسلسل. على الشاشة الضيقة، تأكد من أن النص والصورة يظهران بترتيب منطقي وأن النص يظل مريحاً للقراءة.

صف المعلومات. أضف تعليقاً توضيحياً عندما يكون ذلك مفيداً، وقدم نصاً بديلاً بناءً على دور الصورة.

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

متابعة استكشاف الموضوع