جایگزینکننده تصویر به شما اجازه میدهد روی هر تصویری در یک صفحه وب کلیک کنید و آن را با تصویر خودتان جایگزین کنید — یا با آپلود یک فایل محلی یا با جایگذاری یک URL تصویر. جایگزین به ابعاد اصلی عنصر تناسب دارد و چیدمان صفحه را حفظ میکند.
طراحان و توسعهدهندگان اغلب نیاز دارند ببینند یک تصویر جدید در یک چیدمان موجود چگونه به نظر میرسد. جایگزینکننده تصویر این را فوری میکند — روی تصویری که میخواهید تغییر دهید کلیک کنید، جایگزین را آپلود کنید یا URL بچسبانید و تصویر فوراً عوض میشود در حالی که ابعاد و استایل عنصر اصلی حفظ میشود.
روی تصاویر صفحه hover کنید تا برجسته شوند. برای انتخاب تصویری که میخواهید جایگزین کنید کلیک کنید. ابزار عناصر img، عناصر CSS background-image و picture/source را تشخیص میدهد.
یک فایل تصویر از کامپیوتر خود drag and drop کنید یا برای باز کردن file picker کلیک کنید. از فرمتهای PNG، JPG، WebP، SVG و GIF پشتیبانی میکند. فایل بهصورت محلی بارگذاری میشود.
تصویری در جای دیگری دارید؟ URL را جایگذاری کنید و فوراً اعمال میشود. با هر URL تصویر قابل دسترس عمومی کار میکند.
تصویر جایگزین با object-fit ابعاد عنصر اصلی را پر میکند تا چیدمان صفحه دقیقاً یکسان باشد. بدون جابهجایی چیدمان، بدون reflow.
یک پانل sidebar همه تصاویری که در جلسه فعلی جایگزین کردهاید را ردیابی میکند. اصلی در مقابل جایگزین را در یک نگاه ببینید.
همه جایگزینیها فقط در حافظه مرورگر وجود دارند. فایلهای تصویر واقعی و HTML صفحه هرگز تغییر نمیکنند. صفحه را refresh کنید تا همه تصاویر اصلی بازگردند.
تیم شما سه تصویر hero نامزد برای صفحه اصلی دارد. به جای deploy هر کدام، سایت تولید را باز کرده و تصویر hero را با هر نامزد عوض کنید.
در یک تماس با مشتری، تصاویر placeholder در یک سایت staging را با عکسهای واقعی محصول یا داراییهای برند مشتری جایگزین کنید.
Screenshots نشاندهنده محتوای منطقهای مختلف نیاز دارید؟ تصاویر محصول، عکسهای تیم یا گرافیکهای ویژگی را با نسخههای منطقهای جایگزین کنید.
کاوش در نحوه ظاهر سبک تصویرسازی یا رویکرد عکاسی متفاوت. تصاویر را یک به یک عوض کنید تا یک نمونه بصری بسازید بدون لمس هیچ کدی.
یک JPG را با نسخه WebP جایگزین کنید تا کیفیت را بصری تأیید کنید. یا یک تصویر با رزولوشن بالاتر را برای بررسی نحوه مدیریت چیدمان با تصاویر 2x جایگزین کنید.
داک شناور DevSuite Pro را باز کنید و روی آیکون جایگزینکننده تصویر کلیک کنید. ابزار فعال میشود و تصاویر صفحه هنگام hover برجسته میشوند.
روی هر تصویر در صفحه کلیک کنید. یک dialog جایگزینی ظاهر میشود که اطلاعات تصویر فعلی را نشان میدهد.
یک فایل از کامپیوتر drag and drop کنید، برای مرور کلیک کنید یا یک URL تصویر جایگذاری کنید. جایگزینی فوراً اعمال میشود.
ببینید تصویر جدید در چیدمان واقعی صفحه چگونه به نظر میرسد. بررسی کنید با text overlays کار میکند و به container مناسب است.
روی تصاویر دیگر کلیک کنید تا به جایگزینی ادامه دهید. وقتی تمام شد، صفحه را refresh کنید تا همه تصاویر اصلی بازگردند.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.