← بازگشت به ویژگی‌ها
Pro

جایگزین‌کننده تصویر

جایگزین‌کننده تصویر به شما اجازه می‌دهد روی هر تصویری در یک صفحه وب کلیک کنید و آن را با تصویر خودتان جایگزین کنید — یا با آپلود یک فایل محلی یا با جایگذاری یک URL تصویر. جایگزین به ابعاد اصلی عنصر تناسب دارد و چیدمان صفحه را حفظ می‌کند.

طراحان و توسعه‌دهندگان اغلب نیاز دارند ببینند یک تصویر جدید در یک چیدمان موجود چگونه به نظر می‌رسد. جایگزین‌کننده تصویر این را فوری می‌کند — روی تصویری که می‌خواهید تغییر دهید کلیک کنید، جایگزین را آپلود کنید یا URL بچسبانید و تصویر فوراً عوض می‌شود در حالی که ابعاد و استایل عنصر اصلی حفظ می‌شود.

پیش‌نمایش زنده
example.com/product-page Image Replacer: ON
Click any image to replace it
✓ Replaced
product-hero.jpg
Click to replace
product-thumb.png
Replace Image
Current image
product-thumb.png
400 × 300 · 45 KB
Drop image or click to upload
PNG, JPG, SVG, WebP
Or paste image URL
https://...
Apply
Replaced (1)
product-hero.jpg
✓ replaced
ویژگی‌های کلیدی

کلیک برای انتخاب هر تصویر

روی تصاویر صفحه hover کنید تا برجسته شوند. برای انتخاب تصویری که می‌خواهید جایگزین کنید کلیک کنید. ابزار عناصر img، عناصر CSS background-image و picture/source را تشخیص می‌دهد.

آپلود از دستگاه

یک فایل تصویر از کامپیوتر خود drag and drop کنید یا برای باز کردن file picker کلیک کنید. از فرمت‌های PNG، JPG، WebP، SVG و GIF پشتیبانی می‌کند. فایل به‌صورت محلی بارگذاری می‌شود.

جایگذاری هر URL تصویر

تصویری در جای دیگری دارید؟ URL را جایگذاری کنید و فوراً اعمال می‌شود. با هر URL تصویر قابل دسترس عمومی کار می‌کند.

جایگزینی حفاظت‌کننده چیدمان

تصویر جایگزین با object-fit ابعاد عنصر اصلی را پر می‌کند تا چیدمان صفحه دقیقاً یکسان باشد. بدون جابه‌جایی چیدمان، بدون reflow.

تاریخچه جایگزینی

یک پانل sidebar همه تصاویری که در جلسه فعلی جایگزین کرده‌اید را ردیابی می‌کند. اصلی در مقابل جایگزین را در یک نگاه ببینید.

کاملاً غیر مخرب

همه جایگزینی‌ها فقط در حافظه مرورگر وجود دارند. فایل‌های تصویر واقعی و HTML صفحه هرگز تغییر نمی‌کنند. صفحه را refresh کنید تا همه تصاویر اصلی بازگردند.

موارد استفاده رایج

آزمایش تصاویر Hero جدید

تیم شما سه تصویر hero نامزد برای صفحه اصلی دارد. به جای deploy هر کدام، سایت تولید را باز کرده و تصویر hero را با هر نامزد عوض کنید.

ارائه Mockup به مشتری

در یک تماس با مشتری، تصاویر placeholder در یک سایت staging را با عکس‌های واقعی محصول یا دارایی‌های برند مشتری جایگزین کنید.

ایجاد Screenshots بومی‌سازی‌شده

Screenshots نشان‌دهنده محتوای منطقه‌ای مختلف نیاز دارید؟ تصاویر محصول، عکس‌های تیم یا گرافیک‌های ویژگی را با نسخه‌های منطقه‌ای جایگزین کنید.

نمونه‌سازی تغییرات طراحی

کاوش در نحوه ظاهر سبک تصویرسازی یا رویکرد عکاسی متفاوت. تصاویر را یک به یک عوض کنید تا یک نمونه بصری بسازید بدون لمس هیچ کدی.

بررسی اندازه‌ها و فرمت‌های تصویر

یک JPG را با نسخه WebP جایگزین کنید تا کیفیت را بصری تأیید کنید. یا یک تصویر با رزولوشن بالاتر را برای بررسی نحوه مدیریت چیدمان با تصاویر 2x جایگزین کنید.

نحوه استفاده
1

فعال‌سازی جایگزین‌کننده تصویر

داک شناور DevSuite Pro را باز کنید و روی آیکون جایگزین‌کننده تصویر کلیک کنید. ابزار فعال می‌شود و تصاویر صفحه هنگام hover برجسته می‌شوند.

2

روی تصویر برای جایگزینی کلیک کنید

روی هر تصویر در صفحه کلیک کنید. یک dialog جایگزینی ظاهر می‌شود که اطلاعات تصویر فعلی را نشان می‌دهد.

3

جایگزین را انتخاب کنید

یک فایل از کامپیوتر drag and drop کنید، برای مرور کلیک کنید یا یک URL تصویر جایگذاری کنید. جایگزینی فوراً اعمال می‌شود.

4

بررسی در زمینه

ببینید تصویر جدید در چیدمان واقعی صفحه چگونه به نظر می‌رسد. بررسی کنید با text overlays کار می‌کند و به container مناسب است.

5

جایگزینی بیشتر یا Refresh

روی تصاویر دیگر کلیک کنید تا به جایگزینی ادامه دهید. وقتی تمام شد، صفحه را refresh کنید تا همه تصاویر اصلی بازگردند.

آماده برای امتحان کردن هستید؟ جایگزین‌کننده تصویر?

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox