يتيح لك مستبدل الصور النقر على أي صورة في صفحة الويب واستبدالها بصورة خاصة بك — إما عن طريق رفع ملف محلي أو لصق عنوان رابط للصورة (URL). يتناسب الاستبدال تماماً مع أبعاد العنصر الأصلي، مما يحافظ على تخطيط الصفحة. اختبر كيف تبدو الأصول الجديدة في الموقع الحي، وقم بإنشاء نماذج بمحتوى حقيقي، أو التقط لقطات شاشة بصور مخصصة.
يحتاج المصممون والمطورون بشكل متكرر إلى رؤية كيف ستبدو الصورة الجديدة في التخطيط الحالي. هل ستعمل صورة البطل (hero image) الجديدة مع النص المتراكب عليها؟ هل تبدو صورة المنتج الجديدة جيدة في شبكة البطاقات الحالية؟ هل شعار العميل بالحجم المناسب للرأس (header)؟ في العادة، تتطلب الإجابة على هذه الأسئلة تحرير الكود، وتبديل ملفات الصور، وإعادة البناء، والمعاينة. أداة استبدال الصور تجعل الأمر فورياً — انقر على الصورة التي تريد تغييرها، ثم ارفع بديلاً أو ألصق رابطها، وسيتم تبديل الصورة على الفور مع الحفاظ على أبعاد العنصر الأصلي وأنماط تصميمه. لا يحدث أي تغير في التخطيط، وتبقى العناصر المجاورة في مكانها، وسترى بالضبط كيف تبدو الصورة الجديدة في سياق الصفحة الحقيقي. جميع التغييرات غير مدمرة ويُعاد تعيينها عند تحديث الصفحة.
مرر مؤشر الماوس فوق الصور لرؤيتها تبرز. انقر لتحديد الصورة التي تريد استبدالها. الأداة تتعرف على عناصر img وعناصر صور الخلفية لـ CSS وعناصر الـ picture/source.
قم بسحب وإفلات ملف صورة من جهاز الحاسوب الخاص بك أو انقر لفتح منتقي الملفات. تدعم صيغ PNG، و JPG، و WebP، و SVG، و GIF. يتم تحميل الملف محلياً — لا يتم رفعه لأي خادم.
هل لديك صورة مستضافة في مكان آخر؟ الصق رابطها وسيتم تطبيقه على الفور. يعمل مع أي رابط صورة متاح للعامة — Unsplash، أو Imgur، أو CDN الخاص بك، أو حزم S3، أو أي رابط مباشر.
تملأ الصورة المستبدَلة أبعاد العنصر الأصلي باستخدام خاصية object-fit، لذلك يبقى تخطيط الصفحة تماماً كما هو. لا توجد قفزات بالتخطيط، ولا تشوهات للشبكات. تتكيف الصورة الجديدة بسلاسة مع المساحة.
تقوم لوحة الشريط الجانبي بتتبع كل الصور التي قمت باستبدالها في الجلسة الحالية. قم بعرض الأصلية والمستبدلة بلمحة، وانقر على أي عنصر بالسجل للتراجع عن ذلك الاستبدال المحدد.
جميع الاستبدالات تتم فقط داخل ذاكرة المتصفح. ملفات HTML والصور الفعلية الخاصة بالصفحة لا يتم التدخل بها أبداً. قم بتحديث الصفحة لاستعادة كل صورة أصلية فوراً. آمن للاستخدام على أي موقع.
لدى فريقك ثلاث صور مرشحة لتكون البطل (hero image) بالصفحة الرئيسية. بدلاً من رفع كل منها، افتح منصة الإنتاج وابدل صورة البطل المرشحة. ولاحظ كل واجهة بنصوصها المتراكبة وشريط التصفح وحوالي الصور.
أثناء مكالمة مع عميل، استبدل صور العناصر النائبة (placeholder) في موقع مرحلي بصور منتجات فعلية أو أصول للعلامة التجارية لعميلك. واعرض عليه بالضبط كيف يبدو المحتوى بالتصميم النهائي — مباشرة بالمتصفح.
أمحتج لالتقاط صورة تُظهِر بعض المحتوى الإقليمي؟ استبدل صور المنتجات وفرق العمل بالنماذج الخاصة بتلك المنطقة قبل تصويرها — وكل ذلك دون إنشاء ونشر تطبيقات مستقلة.
إذا كنت تجرب كيف يبدو نمط الرسوم التوضيحية والصور الجديدة بصفحات موجودة، استبدل الصور الواحدة تلو الأخرى بغرض بناء نماذج أولية دون تغيير كود البرمجة.
ابدل ملف الـ JPG بـ WebP لترى هل الدقة وجودتها مناسبة بصرياً. أو بدّل لملف عالي الدقة، للاستيثاق من كون المعالجات المتقنة تُلبي التخطيط.
افتح اللوحة العائمة لـ DevSuite Pro وانقر فوق أيقونة مستبدل الصور. تتفعل الأداة وتصبح الصور الموجودة بالصفحة أهدافاً قابلة للنقر، ومظللة عند التمرير عليها.
انقر على أي صورة بالصفحة. تظهر نافذة استبدال توضح معلومات الصورة الحالية (اسم الملف، الأبعاد، الحجم) وخيارات الرفع واختيار مسار رابط الإنترنت.
اسحب من جهازك ملفاً وأفلته، وانقر للتصفح، أو ألصق رابط الصورة. يُطبق الاستبدال ويتم استبدال الصورة مكانها بالحال.
شاهد كيف تندمج الصورة الجديدة ضمن تخطيط الصفحة الفعلي. تحقق مما إذا كانت منسجمة مع النصوص، وتملأ الحاوية (container) كما يجب، وتتناسب مع المحتوى.
انقر على صور أخرى تستلزم التغيير. يُسجل شريط التاريخ الجانبي جميع تغييراتك. حين تفرغ من المهام، قم بتحديث الصفحة لترجع الصور الأصلية.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
