تطوير الويب
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
- Enter a width and height in pixels and a placeholder image is generated instantly with its dimensions labeled.
- Optionally set the background and text color to match the mockup's theme.
- Download the finished image or copy a link to use directly in a src attribute.
Common uses
- Laying out a page before real photos or illustrations arrive from a designer.
- Testing a responsive image grid with various aspect ratios and sizes.
- Demoing a prototype to a client with clear dimensions instead of empty boxes.
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 الوهمية لا تؤثر تقريبًا على السرعة، لأن وزنها بضع بايتات فقط بغض النظر عن الأبعاد المحددة، بينما يمكن للصور الوهمية النقطية الكبيرة أن تضيف وزنًا ملحوظًا للصفحة — لذا يُفضَّل عند اختبار الأداء اختيار صيغة قريبة من الصورة الحقيقية المستقبلية.