اسحب صورة أو انقر للاختيار
PNG, JPEG, WebP, GIF, BMP, AVIF
كيف يعمل
العنصر النائب هو ما يشغل مكان الصورة أثناء تنزيلها. وهو يخدم غرضين مختلفين: حجز المساحة الدقيقة التي ستشغلها الصورة حتى لا يقفز النص المحيط عند ظهورها، وعرض شيء يشبه المحتوى النهائي حتى يبدو الانتظار أقصر مما لو كان أمام مستطيل رمادي.
هناك ثلاث عائلات من الحلول. الهاشات المضغوطة (BlurHash وThumbHash) تختصر الصورة في سلسلة نصية قصيرة إلى حد يمكنك معه تخزينها في عمود في قاعدة البيانات إلى جانب بقية السجل؛ ثم يفكّها المتصفح ويرسم النسخة الضبابية. أما روابط data-URI (الصورة المصغرة LQIP وSVG) فتحمل الصورة مُرمَّزة داخل HTML أو CSS، ولذلك لا تحتاج إلى أي جافاسكربت. واللون الموحّد هو أرخص عنصر نائب على الإطلاق: سبعة أحرف.
يعتمد الخيار الأنسب على مصدر HTML. إذا كانت الصور تأتي من قاعدة بيانات وتعرضها بالمئات، فالهاش هو الأخف لكل سجل. أما إذا كنت تولّد صفحات ثابتة أو تستخدم إطار عمل يدعم العناصر النائبة أصلًا، فإن data-URI يجنّبك إضافة كود لفك الترميز. وكل القيم التي تراها هنا تُحسب في متصفحك: الصورة لا تُرفع إلى أي خادم.
أمثلة
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjيعتمد طول BlurHash على عدد المكوّنات فقط، لا على حجم الصورة ولا على محتواها: مع 4 × 3 يكون دائمًا 28 حرفًا، ومع 3 × 3 يكون 22، ومع 5 × 4 يكون 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHيشغل ThumbHash بين 17 و25 بايت، أي من 24 إلى 36 حرفًا بترميز Base64. ويتوقف الحجم الدقيق على نسبة أبعاد الصورة وعلى وجود الشفافية من عدمه، لأن الصيغة تُرمّز قناة ألفا أيضًا.lqip 24 px webpdata:image/webp;base64,UklGRi…عادةً ما تبقى صورة مصغرة بعرض 24 بكسل بصيغة WebP دون 1 كيلوبايت. وبما أنها مضمّنة داخل HTML فهي لا تولّد طلبًا إضافيًا، لكنها تزيد حجم المستند الذي لا يُخزَّن مؤقتًا بشكل منفصل.حالات الاستخدام
- تخزين BlurHash أو ThumbHash في جدول الصور حتى تعرض القائمة أو التغذية ذات التمرير اللانهائي شيئًا منذ اللحظة الأولى.
- تعبئة السمة blurDataURL في next/image أو placeholder في NgOptimizedImage عندما لا تكون الصورة استيرادًا ثابتًا.
- تجنّب انزياح التخطيط (CLS) في بطاقات المنتجات أو المقالات عبر الجمع بين العنصر النائب وسمتَي width وheight.
- تضمين عنصر نائب في HTML ثابت أو رسالة بريد أو قالب لا يمكنك فيه تشغيل جافاسكربت لفك الترميز.
- إعادة استخدام نفس BlurHash على الويب وفي تطبيقات الهاتف، التي تتوفر لها أدوات فك ترميز بلغات Swift وKotlin وFlutter.
- استخدام متوسط اللون كخلفية للحاوية عندما لا تسمح ميزانية البايتات حتى بصورة مصغرة.
الأسئلة الشائعة
BlurHash أم ThumbHash؟
يعيد ThumbHash إنتاج الصورة بدقة أعلى وببايتات أقل، ويحافظ على الشفافية ويخزّن نسبة الأبعاد، فلا تحتاج حتى إلى معرفة الحجم الأصلي لرسمه. أما BlurHash فهو أقدم وأقل دقة، لكن له تطبيقات على منصات ولغات أكثر بكثير. إن كنت تبدأ من الصفر فاختر ThumbHash؛ وإن كانت لديك أدوات فك ترميز BlurHash في بيئتك فلا داعي للانتقال.
هل يحسّن هذا مقياس LCP؟
ليس مباشرة. يحسّن العنصر النائب الإحساس بالسرعة، وبالاشتراك مع width وheight يلغي انزياح التخطيط، لكن مقياس LCP يظل يُقاس عند اكتمال رسم الصورة الحقيقية. بل أكثر من ذلك: إذا كانت الصورة الرئيسية هي عنصر LCP فلا تضع لها loading="lazy" ولا تؤجّلها خلف عنصر نائب؛ من الأفضل تعليمها بـ fetchpriority="high" ليطلبها المتصفح مبكرًا. العناصر النائبة مخصصة للصور الواقعة خارج الشاشة الأولى.
كم عدد المكوّنات المناسب في BlurHash؟
أربعة في ثلاثة مناسبة للصور الأفقية، وثلاثة في أربعة للصور الرأسية. كل مكوّن إضافي يضيف حرفين وقدرًا يسيرًا من التفاصيل، لكن فوق الستة أو السبعة يتوقف الفرق عن الظهور للعين المجردة، لأن النتيجة تُعرض ضبابية على أي حال.
هاش أم data-URI؟
يشغل الهاش بضع عشرات من البايتات لكل صورة، وهو مثالي عندما تكون هناك صور كثيرة في الصفحة نفسها، لكنه يتطلب كودًا في العميل لفك ترميزه. أما data-URI فلا يحتاج إلى شيء، غير أنه أثقل بعشرة إلى خمسين ضعفًا ويسافر داخل HTML الذي لا يُخزَّن مؤقتًا بشكل منفصل. مع عدد قليل من الصور البارزة يُفضَّل data-URI، ومع القوائم الطويلة يُفضَّل الهاش.
لماذا نستخدم SVG بدلًا من الصورة المصغرة مباشرة؟
لأن المتصفح هو من يطبّق التمويه عند رسم SVG. وهذا يتيح لك الانطلاق من صورة مصغرة أصغر بكثير دون أن تظهر مربعات البكسل عند التكبير، ويبدو الناتج بالنعومة نفسها في أي حجم. كما يثبّت SVG قناة ألفا على القيمة المعتمة حتى لا يجعل التمويه الحواف شفافة.
هل هناك حد لحجم العنصر النائب؟
يعتمد ذلك على الأداة. يعرض NgOptimizedImage في Angular تحذيرًا في وحدة التحكم عندما يتجاوز data-URI الخاص بالعنصر النائب أربعة آلاف حرف، لأن وزن HTML يبدأ عندئذ في تجاوز الفائدة. وهذه مرجعية عامة جيدة: إن تجاوزت صورتك المصغرة هذه القيمة فقلّل العرض أو الجودة.