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

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

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

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

مرّر الجدول أفقيًا لقراءة جميع الأعمدة.

اقسم عرض الأصل على ارتفاعه لمعرفة نسبته الطبيعية. صورة 1200 × 800 نسبتها 1.5؛ وعند عرضها كاملة بعرض 360 بكسل يكون ارتفاعها المتناسب 240 بكسل. إجبار محتواها كله على مربع 360 × 360 يغيّر هندستها. تفيد هذه المقارنة البسيطة عندما يبدو الهاتف أو الوجه أو المنتج أنحف أو أطول من الطبيعي.

يمكن لمسؤول الموقع ترك ارتفاع الصورة المضمنة العادية يتبع عرضها. وفي الإطار الثابت المقصود، تميّز MDN بين object-fit: contain الذي يحفظ الصورة كاملة مع احتمال وجود فراغ، وcover الذي يملأ الإطار بقص الأطراف. وقد يشوّه fill الصورة إذا اختلفت النسب. اختر وفق الغرض، ولا تطبّق cover على كل شعار أو لقطة شاشة أو رسم منتج.

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

المراجع: MDN: خاصية object-fit وإطار الصورة — بالإنجليزية

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

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

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

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

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

المراجع: MDN: الصور المتجاوبة في HTML — بالإنجليزية

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

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

المراجع: MDN: عنصر img والأبعاد الأصلية — بالإنجليزية · Google Search Central: إرشادات ظهور الصور — بالإنجليزية

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

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

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

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

أُعدّ هذا الدليل بمساعدة الذكاء الاصطناعي، مع فحص المعلومات المتعلقة بالمنصات مقابل المراجع الأصلية أدناه وقت النشر. أطر القرار وقوائم الفحص توصيات تحريرية من بياواي؛ الأمثلة الموصوفة بأنها توضيحية ليست قصص عملاء أو نتائج فعلية. قد تتغير واجهات المنصات وشروطها.

• MDN: خاصية object-fit وإطار الصورة — بالإنجليزية
• MDN: الصور المتجاوبة في HTML — بالإنجليزية
• MDN: عنصر img والأبعاد الأصلية — بالإنجليزية
• Google Search Central: إرشادات ظهور الصور — بالإنجليزية