Fakecreditcardتنزيل كملف أو تضمين مباشر في الكود
اختر الصيغة الأنسب لمشروعك. صيغة SVG لا يتجاوز حجمها بضع مئات من البايتات للصورة المؤقتة البسيطة وتبقى حادة التفاصيل عند أي مقاس. أما PNG فتحافظ على وضوح النصوص والألوان المصمتة وتعد الصيغة النقطية الأكثر توافقاً. وتعمل صيغة WebP على جميع المتصفحات الحديثة وتوفر عادةً حجماً أصغر من PNG، حتى مع المساحات اللونية المصمتة. بينما تقتصر فائدة JPG على الأدوات التي تتطلبها حصراً، نظراً لعدم دعمها للشفافية واحتمال ظهور تشوهات في التدرجات اللونية. بالنسبة للصور النقطية، يمكنك تحديد @2x أو @3x لعرض صور عالية الدقة على شاشات العرض الكثيفة (Retina) مع الحفاظ على نفس أبعاد CSS؛ ويتم تقليص الصور الضخمة جداً تلقائياً إلى نحو 16 ميغابكسل، وهو الحد الأقصى لعنصر canvas في متصفح Safari والعديد من الهواتف الذكية.
يتيح لك خيار نسخ بتنسيق الحصول على الصورة كبيانات مضمنة (data URI) داخل الكود المناسب لك: وسم <img> مع العرض والارتفاع، أو كود Markdown لملفات README والتوثيق، أو خاصية background-image في CSS مع نسبة أبعاد aspect-ratio مطابقة، أو كود <img> لمشاريع React. يتم ترميز SVG باستخدام URL-encoding بدلاً من base64، مما يسهل قراءة الكود ويحافظ على حجم مضغوط لا يتعدى حجم base64.
هل تحتاج إلى رابط مثل /600x400؟
توفر بعض المواقع صوراً مؤقتة عبر روابط مثل /600x400. ورغم سهولتها في البداية، إلا أنها سرعان ما تصبح عائقاً إذا توقف الموقع أو غيّر هيكلة روابطه، مما يؤدي إلى تعطل كافة التصاميم التجريبية المرتبطة به دفعة واحدة، ناهيك عن إضافة طلبات خارجية بطيئة مع كل زيارة للصفحة. يعد استخدام data URI المضمن حلاً بديلاً ومكتفياً ذاتياً: انسخه مرة واحدة ليعمل دون اتصال بالإنترنت، وفي النماذج الأولية وتجارب Storybook وبيئات الاختبار. يُستثنى من ذلك حالتان: برامج وتطبيقات البريد الإلكتروني (بما فيها Gmail) التي لا تدعم عرض صور data-URI (لذا يُفضل تنزيل PNG للإيميل)، وحالة الصور المضمنة الضخمة جداً التي تزيد من حجم ملفات HTML بشكل مفرط، حيث يُنصح بتنزيلها كملفات منفصلة.
ثلاثة استخدامات لمفهوم «الصورة المؤقتة» (Placeholder)
- صورة وهمية أثناء التصميم (Dummy): مساحة بالمقاس المطلوب تحجز مكان الصورة النهائية قيد الإعداد — وهو ما ينتجه هذا المولد.
- صورة بديلة افتراضية (Fallback): تظهر للمستخدم عندما يفتقر المحتوى إلى صورة، كمنتج دون صورة أو حساب مستخدم دون صورة شخصية. يجب أن تكون حيادية، وبنفس نسبة الأبعاد، مع نص وصفي بديل (alt text) يوضح ما هو مفقود.
- صورة مؤقتة أثناء التحميل (Loading placeholder): معاينة مصغرة مموهة أو مساحة بلون موحد تظهر ريثما تكتمل حمولة الصورة الأصلية، مثل
blurDataURLفي Next.js. يمكنك استخدام كود SVG بلون مصمت أو تدرج خفيف من هذه الأداة لهذا الغرض.
المقاسات الأكثر شيوعاً للصور المؤقتة
| الاستخدام | المقاس (بكسل) | نسبة الأبعاد |
|---|---|---|
| Open Graph / معاينة الروابط (Facebook، وLinkedIn) | 1200 × 630 | ≈ 1.91:1 |
| بطاقة X (Twitter) للصورة الكبيرة | 1200 × 600 | 2:1 |
| منشور Instagram مربع | 1080 × 1080 | 1:1 |
| منشور Instagram رأسي | 1080 × 1350 | 4:5 |
| القصص (Stories)، وReels، وTikTok | 1080 × 1920 | 9:16 |
| صورة مصغرة لـ YouTube، وفيديو HD | 1280 × 720 | 16:9 |
| بنر رئيسي (Hero) أو شريحة Full HD | 1920 × 1080 | 16:9 |
| صورة تدوينة أو بطاقة محتوى | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| صورة منتج متجر إلكتروني | 1000 × 1000 | 1:1 |
| إعلان مستطيل متوسط (MPU) | 300 × 250 | 6:5 |
| إعلان عريض (Leaderboard) | 728 × 90 | ≈ 8:1 |
| إعلان ناطحة سحاب عريض (Skyscraper) | 160 × 600 | 4:15 |
| بنر إعلاني للجوال | 320 × 50 | 32:5 |
| صورة شخصية (Avatar) | 150 × 150 (دائرية) | 1:1 |
تُحدّث منصات التواصل الاجتماعي أبعاد الصور المفضلة لديها بشكل مستمر، لذا احرص على مراجعة المواصفات الرسمية الحديثة لكل منصة قبل تصميم النسخ النهائية.
تجنب إفساد تناسق الصفحة بالصور المؤقتة
- حدد دائماً العرض والارتفاع (أو
aspect-ratioفي CSS) لعنصر الصورة. يتيح ذلك للمتصفح حجز المساحة المطلوبة مسبقاً قبل تحميل المحتوى لتفادي قفزات الصفحة — وهو ما تقيسه مؤشرات أداء الويب Core Web Vitals بمعدل تذبذب التصميم (CLS). - التزم بنسبة الأبعاد النهائية، لتتمكن من ملاحظة مشاكل القص والتجاوب عند استخدام
object-fit: coverفي مرحلة مبكرة. - أبقِ المقاس مكتوباً داخل الصورة أثناء جلسات مراجعة التصميم، ليعرف فريق العمل بسهولة أبعاد الملحقات التي لا تزال قيد التحضير.
- استخدم
alt=""للصور المؤقتة التزيينية وتأكد من استبدال كافة الصور الوهمية قبل إطلاق الموقع: فوجود صورة مؤقتة على الموقع الفعلي يُعد خطأً برمجياً وتصميمياً.
الأسئلة الشائعة
ما هي الصورة المؤقتة (Placeholder Image)؟
هي صورة بديلة تحجز مساحة الصورة الحقيقية: تتكون من مربع بالأبعاد واللون المطلوبين، وغالباً ما يُكتب عليها مقاسها، وتُستخدم في التصاميم الأولية، والواجهات التجريبية، والقوالب ريثما تكتمل الصور النهائية. يُطلق المصطلح أيضاً على الصور الافتراضية التي تُعرض عند عدم توفر صورة، أو المعاينات المموهة التي تظهر أثناء تحميل الصورة الأصلية.
ما هو المقاس المناسب للصورة المؤقتة؟
المقاس الفعلي ذاته للصورة النهائية، أو على الأقل نسبة أبعادها — مثل 1200 × 630 لمعاينات الروابط، و1080 × 1080 للمنشورات المربعة، و1920 × 1080 للبنرات العريضة بالكامل. التوافق في المقاسات يكشف عيوب التخطيط وقص الصور مبكراً قبل إدراج الصور الأصلية.
هل استخدام الصور المؤقتة مجاني؟
نعم، بالكامل. يتم إنشاؤها محلياً على جهازك وفقاً للإعدادات التي اخترتها دون أي قيود ترخيص؛ ويمكنك استخدامها بحرية في المشاريع التجارية والقوالب وأعمال العملاء دون الحاجة لذكر المصدر.
هل تتوفر روابط مباشرة للصور، مثل /600x400؟
كلا، وذلك عن قصد؛ إذ يتم إنشاء كل شيء داخل متصفحك مباشرةً، ولا توجد خوادم تستضيف الصور لتضمين روابطها. يمكنك نسخ الصورة ككود <img> أو Markdown أو كود CSS — حيث تكون الـ data URI مستقلة ذاتياً وتستمر بالعمل حتى دون اتصال بالإنترنت.
هل يمكن إنشاء صورة مؤقتة شفافة أو دائرية؟
نعم. فعّل خيار خلفية شفافة لصيغ PNG أو WebP أو SVG (صيغة JPG لا تدعم الشفافية وتأتي بخلفية بيضاء)، واختر الشكل الدائري أو ذو الحواف المستديرة مع إضافة إطار اختياري للصور الرمزية والبطاقات.
ما هو أقصى مقاس يمكن إنشاؤه؟
حتى 4000 × 4000 بكسل بمعدل @1x. قد تستغرق الملفات الكبيرة بصيغتي PNG وWebP لحظات قليلة للترميز، بينما تكون صيغة SVG فورية تماماً بأي حجم.