Added difference overlay mode in image comparison. #48
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Uses CSS for difference overlay - Spacebar keyboard shortcut toggle - VS Code Agent GPT-5 (Preview) Prompts: ``` I saw this great tool at: https://tools.simonwillison.net/image-resize-quality It is open source on Github, so I checked it out. The tool shows an image at different resolutions and compression quality levels. I want to make it easier to do a visual diff. I want to have a toggle for showing the each resolution/quality image overlayed inverse on top of the source image (matched to scale). So if the quality matched perfectly, the image would be black because they'd both cancel each other out. This will make seeing compression artifacts more obvious. I want the filtering done using just CSS. Any questions? ``` ``` That is a good start, but the two images aren't aligned correctly. Here is a screenshot of how it renders. ``` ``` How dark can we make the page background before the contrast with the black text is too low for WCAG? I was thinking of making it a more neutral background gray when the diff mode is on. ``` ``` Let's go with #777 background and #000 for color when the diff mode is active ``` ``` What do you mean the image containers no longer switch to dark scheme? ``` ``` Let's try making it #111 for the background color, and #CCC for the text color when it is in the overlay mode. ``` ``` That looks good. Add a keyboard shortcut to toggle on/off diff mode using the spacebar. ``` ``` The keyboard shortcut is working well. But now I noticed an issue with image sizing when turning it on and off. The images get bigger when the diff mode goes on. It looks like it is due to the max-width being set at 80% but only when the diff mode is off. That must work the same with diff mode on. ``` ``` The images aren't centered in the `.image-diff-wrapper` like they should be. ``` ``` That is working great. One last change I'd like. I'd like to use CSS styling (and some pseudo or real elements) so that the real checkbox is hidden and a iOS style toggle slider is there. I was thinking it could be one parent element (that is the next sibling of the checkbox) that is styled to have pill-esque dimensions. Inside that element is another element that is styled to be a circle with some space between it and the outside edge of its parent element. Make it so that the circle is aligned left/right inside its pill shaped parent depending on if the checkbox is checked or not. Make it so that the movement happens with a transition. Make the background color of the pill shaped parent different if it is on versus off. The circle should always be the same color. ```
There was a problem hiding this comment.
Pull Request Overview
This PR adds a difference overlay mode to the image comparison tool that helps visualize compression artifacts by overlaying processed images with the original using CSS blend modes.
- Added an iOS-style toggle switch with keyboard shortcut support (spacebar) to enable difference overlay mode
- Implemented CSS-based image difference visualization using mix-blend-mode:difference
- Updated UI styling with dark theme when difference mode is active
Comments suppressed due to low confidence (1)
image-resize-quality.html:1
- This CSS rule for
.mask.land.mask.ris being removed but may be needed for the cropper functionality. If these mask elements are still used elsewhere in the application, removing this rule could break the layout.
<!DOCTYPE html>
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Prompts: