اسلایدر مقایسه تصویر
جزئیات فنی
اسلایدر مقایسهٔ تصویر چگونه کار میکند
این ابزار چه کاری انجام میدهد
اسلایدر مقایسهٔ تصویر دو تصویر را روی هم قرار میدهد و با کشیدن یک دستگیرهٔ عمودی فقط بخشی را که میخواهید ببینید آشکار میکند. با حرکت دادن اسلایدر به چپ و راست، بخش بیشتری از تصویر «قبل» یا «بعد» نمایان میشود و تفاوتهای بصری کناربهکنار را فوراً واضح میکند. اندازهٔ فایلها و درصد تغییر هم نمایش داده میشود تا اثر آن را در سطح بایت نیز ببینید.
موارد استفادهٔ رایج برای توسعهدهندگان
مهندسان برای بررسی فشردهسازی اتلافی تصویر، نسخهٔ JPEG را با نسخهٔ WebP از همان منبع مقایسه میکنند. طراحان تغییرات تونمپینگ، روتوش یا اصلاح رنگ را بین نسخهٔ پیشنویس و نسخهٔ نهایی بررسی میکنند. مهندسان ML/AI نتایج سوپررزولوشن، نویززدایی یا انتقال سبک را در برابر ورودیهایشان بصریسازی میکنند. تیمهای بازاریابی دموهای چشمگیرِ قبل/بعد برای صفحات فرود تولید میکنند.
قالبها، نوعها یا گونههای داده
هر فرمتی از تصویر را که مرورگر بتواند رندر کند میپذیرد — PNG، JPEG، WebP، AVIF، GIF، SVG. تصاویر از طریق object URL (URL.createObjectURL) داخل مرورگر شما میمانند، بنابراین چیزی آپلود نمیشود. برای مقایسهٔ مفیدتر، دو تصویر باید ابعاد و نسبت تصویر یکسانی داشته باشند؛ اگر متفاوت باشند، هر دو با object-fit: contain رندر میشوند تا هیچکدام برش نخورد.
دامهای رایج و حالتهای لبهای
مقایسهٔ تصاویر با نسبتهای تصویر متفاوت، در یک سمت نوارهای letterbox ایجاد میکند. تصاویر بسیار بزرگ (>50 MB) ممکن است در مرورگرهای قدیمیتر تعامل کشیدن را کند کنند. اسلایدر کل تصویر 'after' را نمایش میدهد — اگر هر دو فایل شفافیت داشته باشند، اسلایدر را روی یک ناحیهٔ مات قرار دهید وگرنه پسزمینهٔ صفحه را خواهید دید که از هر دو پنل عبور میکند.
چه زمانی از این ابزار استفاده کنیم در برابر کُد
برای مقایسهٔ موردی (ad-hoc) در حین توسعه یا برای دموهای سریع برای ذینفعان از ابزار مرورگر استفاده کنید. در وبسایتهای تولیدی، برای دسترسپذیری، بارگذاری تنبل و پشتیبانی از SSR، کتابخانههای اختصاصی مانند react-compare-slider یا img-comparison-slider را یکپارچه کنید؛ برای بررسیهای کیفی خودکارِ دستهای روی صدها تصویر، از ابزارهای مبتنی بر SSIM/PSNR مانند ImageMagick `compare` یا pixelmatch استفاده کنید.