شريط تمرير لمقارنة الصور

كيف يعمل شريط تمرير مقارنة الصور

ما الذي تفعله الأداة

يقوم شريط تمرير مقارنة الصور بتراكب صورتين ويُظهر فقط الجزء الذي تريد رؤيته عبر سحب مقبض عمودي. عند التحريك يمينًا ويسارًا، ينكشف المزيد من صورة 'قبل' أو 'بعد'، مما يجعل الفروق البصرية جنبًا إلى جنب واضحة فورًا. كما يتم عرض أحجام الملفات ونسبة التغيّر لتتمكن من رؤية الأثر على مستوى البايت أيضًا.

حالات استخدام شائعة للمطورين

يقارن المهندسون الذين يتحققون من ضغط الصور الفاقد نسخة JPEG مقابل WebP للمصدر نفسه. يراجع المصممون تغييرات تعيين النغمات أو التنقيح أو تصحيح الألوان بين مسودة ونسخة نهائية. يتصور مهندسو التعلم الآلي/الذكاء الاصطناعي نتائج رفع الدقة الفائقة أو إزالة الضجيج أو نقل الأسلوب مقارنةً بمدخلاتهم. وتنتج فرق التسويق عروضًا درامية قبل/بعد لصفحات الهبوط.

تنسيقات البيانات أو أنواعها أو متغيراتها

يدعم أي تنسيق صور يمكن للمتصفح عرضه — PNG وJPEG وWebP وAVIF وGIF وSVG. تبقى الصور داخل متصفحك عبر عناوين كائنات (URL.createObjectURL)، لذا لا يتم رفع أي شيء. للحصول على مقارنة أكثر فائدة، ينبغي أن تكون للصورتين الأبعاد ونسبة العرض إلى الارتفاع نفسها؛ وإذا اختلفتا، فسيتم عرض كلتيهما باستخدام object-fit: contain حتى لا يتم قص أي منهما.

المزالق الشائعة والحالات الطرفية

تؤدي مقارنة صور ذات نسب عرض إلى ارتفاع مختلفة إلى ظهور أشرطة letterbox على أحد الجانبين. قد تُبطئ الصور الكبيرة جدًا (>50 MB) تفاعل السحب في المتصفحات الأقدم. يكشف شريط التمرير كامل صورة "بعد" — إذا كان كلا الملفين يحتويان على شفافية، فضع شريط التمرير فوق منطقة معتمة وإلا سترى خلفية الصفحة تتسرب عبر اللوحتين.

متى تستخدم هذه الأداة بدلًا من الكود

استخدم أداة المتصفح للمقارنة السريعة عند الحاجة أثناء التطوير أو لعروض سريعة لأصحاب المصلحة. في مواقع الإنتاج، ادمج مكتبات مخصصة مثل react-compare-slider أو img-comparison-slider لدعم إمكانية الوصول والتحميل الكسول وSSR؛ ولإجراء فحوصات جودة آلية على دفعات عبر مئات الصور، استخدم أدوات تعتمد على SSIM/PSNR مثل ImageMagick `compare` أو pixelmatch.