في تصميم واجهة عربية، لا تقتصر فائدة الصورة الوهمية على ملء مساحة فارغة فحسب، بل تساعد أيضًا على اختبار شيء يسهل تجاهله في التصميم من اليسار إلى اليمين: هل ينعكس موضع الصورة والنص المحيط بها بشكل صحيح عندما يتحول اتجاه الصفحة إلى dir="rtl"؟
لماذا نحتاج الصور الوهمية أصلًا
تتيح صورة وهمية بنسب صحيحة رؤية كيفية تنظيم المحتوى حول صورة بالحجم المقصود فورًا، دون انتظار الرسومات النهائية من مصمم أو مصوّر. يسرّع هذا التطوير ويتيح العمل على التخطيط والمحتوى بالتوازي.
نفس دور lorem ipsum، لكن للصور
تؤدي الصورة الوهمية لتخطيط الصفحة نفس الدور الذي يؤديه نص lorem ipsum للفقرة: تشير إلى أن المحتوى نفسه ليس هو ما يجب تقييمه الآن، بل الشكل والتناسب. كلتا الأداتين تحلّان المشكلة ذاتها — ملء التركيبة البصرية لتقييم النسب والتسلسل الهرمي دون أن يشتت عنصر غير مكتمل الانتباه عمّا يُختبر فعليًا.
اختبار الاستجابة والاتجاه دون صور حقيقية
تساعد الصور الوهمية بأحجام ونسب مختلفة في التحقق من كيفية تصرف التخطيط على شاشات مختلفة، وفي صفحة عربية تحديدًا تكشف بسرعة ما إذا كانت الصورة والنص المرافق لها يتبادلان مواضعهما بشكل صحيح تحت التخطيط من اليمين إلى اليسار، أو هل يعمل القص (crop) بشكل صحيح عند تغيير حجم النافذة.
لماذا نحتاج هذا
- ملء تخطيط بسرعة بصور بالحجم المطلوب قبل جاهزية الرسومات الحقيقية.
- اختبار استجابة تخطيط، بما في ذلك اتجاهه، باستخدام صور بنسب مختلفة.
- عرض بنية صفحة على عميل أو فريق دون انتظار المحتوى النهائي.
صيغ الصور الوهمية: SVG مقابل الصور النقطية
يمكن إنشاء الصور الوهمية كصور نقطية (PNG، JPEG) أو كـSVG — صيغة متجهية تتوسع دون فقدان الجودة. تزن الصورة الوهمية بصيغة SVG عادة بضعة كيلوبايتات فقط بغض النظر عن الحجم المحدد، لأنها تصف أشكالًا هندسية ونصًا بدلًا من تخزين بيانات بكسل. الصيغة النقطية أكثر فائدة عند الحاجة لمحاكاة وزن ملف الصورة الحقيقية المستقبلية بدقة، لاختبار أداء تحميل الصفحة.