Về công cụ này
Image Diff so sánh hai ảnh theo từng pixel và làm nổi bật chính xác nơi chúng khác nhau, hoàn toàn ngay trong trình duyệt của bạn. Thả ảnh chụp màn hình hoặc bản mockup thiết kế "trước" làm Ảnh A và phiên bản "sau" — ảnh chụp màn hình mới, phiên bản đã triển khai của cùng thiết kế, hoặc bản xuất lại — làm Ảnh B. Nếu hai ảnh không cùng kích thước, cả hai sẽ được đặt lên một canvas đủ lớn để chứa ảnh lớn hơn; bất kỳ vùng nào chỉ một ảnh che phủ đều được tính là khác biệt, vì bản thân sự thay đổi kích thước cũng là điều bạn muốn phát hiện. Kết quả là một ảnh khác biệt: Ảnh A được vẽ lại với mọi pixel thay đổi được tô màu đỏ tươi (magenta) nổi bật, cùng với số lượng và tỷ lệ phần trăm pixel khác nhau được cập nhật liên tục.
Đây là một quy trình thực sự hướng đến nhà phát triển: phát hiện hồi quy giao diện bằng cách so sánh hai ảnh chụp màn hình trước và sau khi thay đổi CSS hoặc component, kiểm tra giao diện đã triển khai so với bản mockup thiết kế gốc theo từng pixel, hoặc phát hiện hiện tượng vỡ khối và dải màu (banding) tinh vi mà lần nén JPEG/WebP thứ hai thêm vào một ảnh đã được xuất một lần. Ngưỡng độ nhạy kiểm soát mức độ thay đổi màu cần thiết để một pixel được tính là khác biệt — giá trị thấp hơn (gần 0) đánh dấu gần như mọi thay đổi, kể cả nhiễu nén 1–2 bit, trong khi giá trị cao hơn chỉ đánh dấu những khác biệt rõ ràng có thể nhìn thấy, đây thường là điều bạn muốn khi so sánh hai bản xuất của cùng một ảnh gốc. Không có gì được tải lên: cả hai ảnh đều được giải mã và so sánh bằng Canvas API ngay trên thiết bị của bạn, và ảnh khác biệt bạn tải xuống cũng được tạo ra theo cách tương tự.
Câu hỏi thường gặp
Điều gì xảy ra nếu hai ảnh có kích thước khác nhau?
Cả hai ảnh được đặt lên một canvas chung có kích thước vừa với ảnh lớn hơn trong hai ảnh, và bất kỳ vùng nào chỉ được bao phủ bởi một trong hai ảnh (vì ảnh kia nhỏ hơn) đều được tính là khác biệt — điều này thể hiện đúng sự không khớp kích thước như một phần của việc so sánh, thay vì âm thầm kéo giãn một ảnh để khớp với ảnh kia (điều này sẽ làm méo mó việc so sánh và che giấu thực tế rằng chúng có kích thước khác nhau ngay từ đầu).
Tôi nên dùng ngưỡng độ nhạy nào?
Ngưỡng thấp bắt được ngay cả những khác biệt nhỏ, tinh vi (hữu ích để phát hiện các hiện tượng nén hoặc thay đổi kết xuất rất nhỏ), trong khi ngưỡng cao hơn chỉ đánh dấu các pixel rõ ràng khác nhau (hữu ích để phát hiện các thay đổi hình ảnh đáng kể như phần tử di chuyển hoặc nội dung khác, đồng thời bỏ qua nhiễu chống răng cưa/nén nhỏ giữa hai ảnh vốn giống hệt nhau). Bắt đầu ở khoảng giữa phạm vi và điều chỉnh dựa trên việc bạn thấy quá nhiều nhiễu (tăng lên) hay bỏ lỡ sự khác biệt thực sự (giảm xuống).