Thanh trượt so sánh ảnh
Chi tiết kỹ thuật
Cách hoạt động của thanh trượt so sánh hình ảnh
Công cụ làm gì
Thanh trượt so sánh hình ảnh chồng hai hình lên nhau và chỉ hiển thị phần bạn muốn xem bằng cách kéo một tay cầm dọc. Khi bạn trượt sang trái và phải, nhiều hơn của hình 'trước' hoặc 'sau' sẽ được lộ ra, giúp các khác biệt trực quan cạnh nhau trở nên rõ ràng ngay lập tức. Kích thước tệp và phần trăm thay đổi cũng được hiển thị để bạn thấy cả tác động ở mức byte.
Các trường hợp sử dụng phổ biến cho lập trình viên
Các kỹ sư kiểm tra nén ảnh mất dữ liệu sẽ so sánh phiên bản JPEG với WebP của cùng một nguồn. Các nhà thiết kế xem lại các thay đổi về tone-mapping, chỉnh sửa (retouching) hoặc hiệu chỉnh màu giữa bản nháp và bản cuối. Các kỹ sư ML/AI trực quan hóa kết quả siêu phân giải, khử nhiễu hoặc chuyển phong cách so với đầu vào của họ. Các nhóm marketing tạo các bản demo trước/sau ấn tượng cho landing page.
Định dạng dữ liệu, kiểu hoặc biến thể
Hỗ trợ mọi định dạng ảnh mà trình duyệt có thể hiển thị — PNG, JPEG, WebP, AVIF, GIF, SVG. Ảnh được giữ trong trình duyệt của bạn thông qua object URL (URL.createObjectURL), vì vậy không có gì được tải lên. Để so sánh hữu ích nhất, hai ảnh nên có cùng kích thước và tỷ lệ khung hình; nếu khác nhau, cả hai sẽ được hiển thị với object-fit: contain để không ảnh nào bị cắt.
Các lỗi thường gặp và trường hợp biên
So sánh các ảnh có tỷ lệ khung hình khác nhau sẽ tạo ra các dải letterbox ở một bên. Ảnh rất lớn (>50 MB) có thể làm chậm thao tác kéo trong các trình duyệt cũ. Thanh trượt hiển thị toàn bộ ảnh 'sau' — nếu cả hai tệp đều có độ trong suốt, hãy đặt thanh trượt lên vùng không trong suốt nếu không bạn sẽ thấy nền trang bị lộ xuyên qua cả hai khung.
Khi nào nên dùng công cụ này thay vì viết mã
Dùng công cụ trong trình duyệt để so sánh nhanh theo nhu cầu trong quá trình phát triển hoặc để demo nhanh cho các bên liên quan. Trên website sản phẩm, hãy tích hợp các thư viện chuyên dụng như react-compare-slider hoặc img-comparison-slider để có khả năng truy cập, lazy loading và hỗ trợ SSR; để kiểm tra chất lượng tự động theo lô trên hàng trăm ảnh, hãy dùng các công cụ dựa trên SSIM/PSNR như ImageMagick `compare` hoặc pixelmatch.