باختصار: الصور النائبة رسومات وهمية رمادية (أو ملوّنة) بأبعاد دقيقة، تحلّ محلّ الصور الحقيقية أثناء التصميم. قيمتها الحقيقية أنها تحجز المساحة الصحيحة مبكرًا، فيتصرّف التخطيط بالمثل قبل وصول الأصول النهائية وبعده — دون إعادة تدفّق ولا مفاجآت. يغطّي هذا الدليل متى تستخدمها، وأي صيغة تصدّر، وكيف تتفادى إزاحة التخطيط.
انتظار التصوير النهائي قبل بناء تخطيط هو عكس الصواب. تتيح لك الصور النائبة تثبيت الأبعاد أولًا، ثم إدراج المرئيات الحقيقية دون أن ينزلق التصميم من تحتك.
احجز المساحة، ولا تملأها فحسب
أثمن ما تفعله الصورة النائبة هو الاحتفاظ بالعرض والارتفاع الدقيقين اللذين ستستخدمهما الصورة الحقيقية. فإن بُني التخطيط حول صور بلا أبعاد محجوزة، أدّى إدراج الأصول النهائية إلى قفز كل شيء — يلتفّ النص، وتتحرّك الأزرار، ويظهر ذلك على الويب كإزاحة تخطيط تراكمية (CLS). والتصميم منذ البداية بصور نائبة صحيحة الحجم يجعل الاستبدال النهائي يغيّر الصورة لا الموضع.
طابِق الأبعاد والنسبة الحقيقية
لا تنفع الصورة النائبة إلا إذا طابقت ما سيأتي. اضبط أبعاد البكسل الفعلية ونسبة العرض إلى الارتفاع للصورة النهائية — صورة رئيسية 16:9، وصورة رمزية 1:1، وصورة مصغّرة 4:3 — كي يعكس النموذج الواقع. ووسم كل صورة نائبة بحجمها (تطبعه كثير من المولّدات على الصورة) يسهّل رصد أي تفاوت أثناء المراجعة.
ريتينا والكثافة العالية
على الشاشات عالية الكثافة تحتاج الصورة إلى بكسلات فيزيائية أكثر من حجمها في التخطيط. وتصدير صورة نائبة بـ 2× أو 3× أو 4× يتيح اختبار كيف سيبدو الأصل الحقيقي على شاشات ريتينا، وتأكيد أنك خطّطت للملف الأكبر الذي ستتطلّبه النسخة النهائية.
أي صيغة تصدّر
- PNG / WebP — لنماذج الشاشة والنماذج الأولية.
- SVG — مستقل عن الدقة، صغير جدًا، مثالي حين يكون الحجم الدقيق ما زال مرنًا.
- Base64 / Data URI — يضمّن الصورة النائبة مباشرة في HTML أو CSS، مفيد لنموذج أوّلي مكتفٍ ذاتيًا بلا ملفات خارجية.
سير عمل عملي
- اسرد مواضع الصور في تخطيطك وأبعادها الحقيقية.
- ولّدها في مولّد الصور النائبة — واستخدم الوضع الدفعي لإنتاج كل الأحجام مرة واحدة.
- أدرجها في التصميم وتأكّد ألّا يقفز شيء عند تغيير حجم إطار العرض.
- استبدل الأصول الحقيقية واحدًا تلو الآخر؛ ولأن المساحة محجوزة يبقى التخطيط ثابتًا.
وإن احتجت أيضًا نصًّا وهميًا لملء المحتوى حول تلك الصور، فأرفق مولّد Lorem Ipsum ليُقرأ النموذج كله بكثافة واقعية.
أخطاء شائعة يجب تجنّبها
- استخدام صور نائبة بنسبة خاطئة، فتُقتصّ الصورة الحقيقية على نحو غير متوقّع.
- عدم حجز أبعاد الصورة، ما يسبّب إزاحة تخطيط عند وصول النهائية.
- تجاهل قياس ريتينا والتقليل من حجم الملف.
- إرسال صورة نائبة إلى الإنتاج لأنها لم تُستبدل قط.