باختصار: العنصر النائب الضبابي ليس زخرفة — إنه إصلاح لـCumulative Layout Shift متنكرًا كتأثير تحميل، إذ يحجز عنصر نائب مُقاس بشكل صحيح المساحة الدقيقة للصورة قبل وصول الملف الحقيقي. اقرن هذا الدليل مع Character Counter وEncoding Converter وText Difference وAI Hidden Characters.

LQIP (عنصر نائب لصورة منخفضة الجودة) هو نسخة صغيرة جدًا ومضغوطة بشدة من الصورة الحقيقية — غالبًا 20×20 بكسل أو أقل، بضع مئات من البايتات — تُعرض ضبابية ومكبَّرة بينما يُحمَّل الملف بدقة كاملة.

المشكلة الحقيقية التي يحلها LQIP: إزاحة التخطيط، لا الجماليات

بدون عنصر نائب يحجز الأبعاد النهائية للصورة، تُعرض الصفحة دون مساحة للصورة، ثم تدفع كل ما تحتها للأسفل في اللحظة التي يصل فيها الملف — يعاقب Cumulative Layout Shift (CLS)، أحد Core Web Vitals من غوغل، هذا بالضبط. يشغل عنصر نائب بنفس نسبة العرض إلى الارتفاع (ضبابيًا أو لا) المساحة الصحيحة منذ أول عرض، فلا يتحرك شيء عند تحميل الصورة الحقيقية — الضبابية إضافة لطيفة فوق الإصلاح الحقيقي، وهو حجز المساحة.

كيف تُدمج صورة صغيرة جدًا فورًا

تُدمج العناصر النائبة LQIP عادةً كـURIs بيانات مُرمَّزة بـbase64 مباشرة في HTML — <img src="data:image/jpeg;base64,..."> — لذا يُعرض العنصر النائب بصفر طلبات شبكة إضافية، وهذا مهم لأن الهدف كله هو إظهار شيء ما قبل أن يكتمل طلب الصورة الحقيقية أصلًا. بما أن الصورة المصدر صغيرة جدًا (غالبًا أقل من 1 كيلوبايت قبل الترميز)، فإن الزيادة الناتجة عن Base64 — نحو 33٪ فوق حجم البايتات الخام — ضئيلة لعنصر نائب رغم كونها مُبذِّرة لصورة بحجم كامل.

LQIP مقابل عنصر نائب بلون سائد صلب

تحمل صورة مصغرة ضبابية معلومات مرئية أكثر (أشكال تقريبية، توزيع ألوان) من مستطيل واحد بلون سائد، لكنها تعني أيضًا عملًا أكثر في الإعداد — توليد وتخزين صورة صغيرة لكل صورة فوتوغرافية، مقابل حساب لون متوسط واحد. لمعرض صور كثيف حيث الصورة نفسها هي الهدف، عادةً ما تستحق الدقة الإضافية لـLQIP العناء؛ لصور واجهة مستخدم أصغر أو أيقونات، يؤدي عنصر نائب بلون مسطح مهمة منع CLS بتكلفة أقل.

سير عمل لإضافة العناصر النائبة بشكل صحيح

  1. حدّد width وheight صريحين (أو aspect-ratio بـCSS) على كل وسم صورة — هذا ما يحجز المساحة فعليًا؛ لا تفعل صورة العنصر النائب ذلك بمفردها.
  2. ولّد العنصر النائب الصغير جدًا بنسبة العرض إلى الارتفاع الحقيقية للصورة، لا بحجم ثابت لا يطابق — تُنتج نسبة غير متطابقة إزاحة عند استبدال الصورة الحقيقية لها.
  3. ادمج العنصر النائب كـURI بيانات base64 لتحميل بصفر طلبات، مخصص فقط لصور نائبة صغيرة حقًا.
  4. اختبر بتقييد شبكة المتصفح — تظهر قيمة العنصر النائب فقط عندما تتأخر الصورة الحقيقية في الوصول.

أخطاء شائعة يجب تجنبها

  • إضافة تأثير ضبابي دون أيضًا تحديد أبعاد صريحة — الضبابية وحدها لا تفعل شيئًا لإزاحة التخطيط.
  • استخدام عنصر نائب بنسبة عرض إلى ارتفاع مختلفة عن الصورة الحقيقية، ما يسبب إزاحة على أي حال عند استبدالها.
  • دمج صورة بحجم كامل بـbase64 "من أجل الاتساق"، ما يُضخِّم وزن الصفحة دون أي فائدة من العنصر النائب.
  • معاملة LQIP كتأثير مرئي بحت وتفويت أن مهمته الحقيقية هي حجز مساحة التخطيط.

الضبابية هي ما يلاحظه المستخدمون؛ حجز المساحة عبر تحديد الأبعاد هو ما يحمي فعليًا درجة Core Web Vitals الخاصة بك.