تطوير الويب

Placeholder Image Generator

إنشاء صورة نائبة (placeholder) بحجم محدد للتخطيطات والتصميم.

A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.

How to use it

Common uses

Things to keep in mind

SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.

A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.

مقالة عن هذه الأداة: صور Placeholder: لماذا تهم الصور الوهمية أثناء التطوير

الأسئلة الشائعة

كيف أتحكم في حجم الصورة ومظهرها؟

تضبط العرض والارتفاع بالبكسل بالإضافة إلى ألوان الخلفية والنص؛ إذا لم تكتب نصًا مخصصًا، تعرض الأداة افتراضيًا الأبعاد نفسها، مثل 600×400.

ما فائدة هذه الأداة؟

مخصصة للنماذج الأولية وتصميم التخطيطات — يتيح لك إدراج صورة نائبة التحقق من التباعد ونسب الأبعاد والتصميم قبل جاهزية الصور الحقيقية.

هل يمكنني استخدام الصورة دون تنزيل ملف؟

نعم، بالإضافة إلى التنزيل يمكنك نسخ الصورة كـ Data URI ولصقها مباشرة في HTML أو CSS الخاص بك.

ما الفرق بين صورة وهمية بصيغة SVG وأخرى بصيغة PNG؟

الصورة الوهمية بصيغة SVG متجهية، لذا تتوسع دون فقدان الجودة وتزن عادة بضعة كيلوبايتات فقط بغض النظر عن الحجم، بينما PNG صيغة نقطية يزداد وزنها مع حجم الصورة، مما يحاكي بشكل أفضل سلوك صورة حقيقية عند اختبار أداء الصفحة.

هل يؤثر حجم الصورة الوهمية فعليًا على سرعة تحميل الصفحة أثناء التطوير؟

صور SVG الوهمية لا تؤثر تقريبًا على السرعة، لأن وزنها بضع بايتات فقط بغض النظر عن الأبعاد المحددة، بينما يمكن للصور الوهمية النقطية الكبيرة أن تضيف وزنًا ملحوظًا للصفحة — لذا يُفضَّل عند اختبار الأداء اختيار صيغة قريبة من الصورة الحقيقية المستقبلية.

مقالات: تطوير الويب

HEX وRGB وHSL: لماذا توجد طرق عديدة لكتابة اللون

لماذا يفضّل المصممون غالبًا HSL على HEX عند اختيار درجة لون يدويًا.

تصغير CSS: ما الذي يُحذَف فعليًا من الملف ولماذا

لماذا يعمل CSS المصغّر بنفس الطريقة تمامًا في المتصفح رغم أنه يصبح غير قابل للقراءة للإنسان.

تصغير JavaScript: الفرق بين التصغير والتعتيم

لماذا يمكن قراءة الكود المصغّر إذا أراد أحد ذلك، بينما لا يمكن قراءة الكود المعتّم.

تصغير HTML: لماذا تهم المسافات في الترميز أصلًا

لماذا يمكن أن يكسر حذف المسافات داخل <pre> أو textarea مظهر الصفحة، بخلاف أي مكان آخر تقريبًا.

تدرجات CSS: كيف يختلف linear عن radial وconic

لماذا يناسب conic-gradient الرسوم البيانية الدائرية بينما يعطي radial-gradient تأثير بقعة ضوء.

خوارزمية لون: كيف يُتحقَّق من صحة رقم البطاقة

لماذا لا يعني رقم بطاقة يجتاز فحص لون أن هذه البطاقة موجودة فعلًا.

IBAN: كيف يُبنى رقم الحساب المصرفي الدولي

لماذا الحرفان الأولان في IBAN هما رمز الدولة، لا جزءًا من رقم الحساب نفسه.

رموز QR: كيف يتّسع رابط داخل مربع من البكسلات

لماذا يظل رمز QR بشعار في المنتصف قابلًا للمسح رغم تغطية جزء من النمط.

الباركود: كيف يختلف Code 128 عن EAN-13

لماذا تستخدم المنتجات على أرفف المتاجر EAN-13 دائمًا تقريبًا بدلًا من Code 128.