منشئ الصور النائبة
أنشئ صورًا نائبة بأي مقاس، بألوان ونصوص مخصصة — مخرجات PNG أو SVG فورية، تُنشأ بالكامل دون اتصال بالإنترنت ودون أي طلبات إلى خادم.
224 مشاهدة
لماذا يستخدم المصممون والمطورون الصور النائبة
قبل أن تكون الصور الفوتوغرافية الحقيقية أو الرسومات أو صور المنتجات الخاصة بموقع ويب جاهزة بوقت طويل، لا يزال شخص ما بحاجة إلى رؤية شكل الصفحة وهي تحتوي على صور. التصميم المبني بالكامل من مربعات رمادية فارغة أو أيقونات "صورة مفقودة" مضلِّل — فالهوامش، ونِسَب الأبعاد، وطريقة التفاف النص حول صورة، كلها تتصرف بشكل مختلف بمجرد أن يشغل شيء ما ذلك المكان فعليًا. تحل الصورة النائبة هذه المشكلة بأن تحل محل الأصل النهائي مؤقتًا: فلها العرض والارتفاع الصحيحان، وتشغل الموضع الصحيح في الشبكة، وتتيح للمصمم أو المطور الحكم على ما إذا كان التخطيط (layout) يعمل، دون الحاجة لوجود المحتوى النهائي بعد. محتوى الصورة النائبة — لونها، تسميتها — غير مهم عمدًا؛ ما يهم هو أن أبعادها ونسبة عرضها إلى ارتفاعها تطابق ما ستكون عليه الصورة الحقيقية في النهاية.
لهذا السبب تعمل خدمات الصور النائبة الشائعة تقليديًا بترميز المقاس مباشرة داخل رابط URL، مثل طلب صورة بمقاس 800×600 والحصول على مستطيل رمادي مطبوع عليه "800 × 600". هذا المقاس المطبوع مفيد بحد ذاته: فهو يتيح لأي شخص يلقي نظرة سريعة على النموذج الأولي التأكد فورًا من أن مساحة الصورة بالأبعاد المفترضة، دون فحص كود HTML. تتبع هذه الأداة نفس العرف — اترك حقل النص فارغًا وستُسمِّي المستطيل تلقائيًا بعرضه وارتفاعه الخاصين، أو أدخل نصًا مخصصًا لمعاينة تسمية توضيحية، أو اسم علامة تجارية نائب، أو أي شيء آخر يجب أن يتسع داخل ذلك المربع.
لماذا يمكن أن يكون SVG صيغة صورة نائبة أفضل من PNG
الصورة النائبة بصيغة PNG هي شبكة من البكسلات: مستطيل بلون واحد مقاسه 800×600 مع نص لا يزال يتعين عليه تخزين معلومات لون لكل الـ480,000 بكسل، رغم أن الغالبية العظمى منها لون موحد واحد. أما الصورة النائبة بصيغة SVG، على النقيض، فليست مكوّنة من بكسلات على الإطلاق — إنها كتلة نصية قصيرة تصف أشكالًا: "ارسم مستطيلًا بهذا العرض وهذا الارتفاع، مملوءًا بهذا اللون، ثم ارسم هذا النص متوسِّطًا داخله." بالنسبة إلى صورة نائبة بسيطة بلون مسطح ونص، كتلك التي تنشئها هذه الأداة، يبلغ هذا الوصف عادةً بضع مئات من البايتات، أصغر بشكل كبير من PNG المكافئ. تتمتع SVG بميزة ثانية أكثر أهمية للصور النائبة المستخدَمة عبر تخطيط متجاوب: لأنها مُعرَّفة بتعليمات شكل رياضية بدلًا من شبكة بكسل ثابتة، يمكن تكبيرها أو تصغيرها إلى أي مقاس دون فقدان جودة أو تكسّر بكسلي (pixelation)، بينما تصبح صورة PNG المُمدَّدة إلى ما بعد دقتها الأصلية ضبابية بشكل ملحوظ.
تُولَّد كلتا الصيغتين هنا بنفس الطريقة: يُرسم مستطيل ويُملأ بلون الخلفية المختار، ويُوسَّط نص التسمية داخله أفقيًا وعموديًا معًا، بحجم يتناسب تدريجيًا مع أبعاد المربع حتى لا تُطغى صورة نائبة صغيرة بنص كبير الحجم بشكل مفرط. تُعرَض نسخة PNG على عنصر canvas في HTML5 وتُصدَّر باستخدام canvas.toDataURL()؛ أما نسخة SVG فتُبنى مباشرة كنص XML يحتوي على عنصر <rect> وعنصر <text> وتُنزَّل كملف. على عكس خدمات الصور النائبة التي تجلب صورة من رابط URL بعيد — طلب شبكة حقيقي في كل مرة تُحمَّل فيها الصفحة — يعمل كل شيء هنا محليًا: لا يغادر أي طلب المتصفح أبدًا، لذا لا يوجد شيء يفشل إذا تعطلت تلك الخدمة الخارجية، ولا يوجد أي حد للحجم يفرضه خادم شخص آخر.
الأسئلة الشائعة
لماذا أستخدم صورة نائبة رمادية بدلًا من ترك المساحة فارغة فقط؟
المساحة الفارغة تنهار أو تتصرف بشكل غير متوقع حسب التخطيط، بينما تحافظ صورة نائبة بالعرض والارتفاع الصحيحين على ذلك الموضع تمامًا كما ستفعل الصورة الحقيقية لاحقًا — بحيث يمكنك الحكم على التباعد والمحاذاة والتفاف النص قبل وجود الأصل النهائي.
ما الفرق الفعلي بين مخرجات PNG وSVG؟
PNG هو شبكة ثابتة من البكسلات تُولَّد على عنصر canvas؛ أما SVG فهو كتلة صغيرة من التعليمات المتجهة (مستطيل بالإضافة إلى نص متوسِّط) تصف نفس الصورة رياضيًا. بالنسبة للصور النائبة البسيطة ذات اللون المسطح، يكون ملف SVG أصغر بكثير عادة ويمكن تغيير حجمه إلى أي مقاس دون فقدان الجودة، بينما تصبح صورة PNG الممدَّدة ضبابية.
هل ترك حقل النص فارغًا يُعطِّل أي شيء؟
لا — إذا لم يُدخَل نص مخصص، تُسمِّي الأداة تلقائيًا الصورة النائبة بعرضها وارتفاعها الخاصين، مثل "800 × 600"، وهو نفس العرف الذي تستخدمه معظم خدمات الصور النائبة.
هل إنشاء صورة نائبة هنا يُجري أي طلب شبكة؟
لا. تُبنى كل من PNG وSVG بالكامل بعمليات canvas ونصوص محلية داخل متصفحك؛ لا يُجلَب أو يُرسَل أي شيء من أو إلى أي خادم.
هل يمكن أن تكون ألوان الخلفية والنص أي لون، بما في ذلك مطابقة لوحة علامة تجارية؟
نعم — يُضبَط كلا اللونين بمنتقي ألوان قياسي، لذا يمكن استخدام أي قيمة Hex، بما في ذلك ألوان العلامة التجارية الدقيقة، لمعاينة كيف ستبدو الصورة النائبة إلى جانب بقية نظام التصميم.
أدوات مشابهة
الإبلاغ عن مشكلة
منشئ الصور النائبة
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!