Behold: Image view modes
Now when you view commits that include images you’ll be presented with four ways to view them: 2-up, Swipe, Onion Skin. 2-Up is the default mode, which lets you get…
Now when you view commits that include images you’ll be presented with four ways to view them: 2-up, Swipe, Onion Skin.
2-Up is the default mode, which lets you get a quick glimpse of both images. In addition, if the image has changed size between versions, the actual dimension change will be displayed. This should hopefully reduce headaches like shifts in UI alignment caused by asset size changes.
Swipe lets you view portions of your image side by side. Not sure if the colors shifted between versions? Drag the swipe slider over the area in question and compare the pixels for yourself.
Onion Skin really comes in handy when elements move around by small, hard to notice amounts. Did that icon shift two pixels to the left? Drag the opacity slider back a bit and see if things move around.
Difference is best used when it’s not particularly obvious if something has changed. It will highlight only pixels that are different between the two images, making it the go-to view mode for finding those single pixel changes in a file.
All four modes are supported in the latest versions of the most common browsers. Versions of Internet Explorer before version 9 don’t support canvas unfortunately, so Difference mode won’t show up if you use those browsers.
I should also mention that the Difference mode is possible thanks to @Phrogz’s awesome context-blender project that replicates Photoshop blend modes.
Want to try it for yourself? Check out the demo.
Written by
Related posts
![](https://github.blog/wp-content/uploads/2023/10/Collaboration-DarkMode-2.png?resize=400%2C212)
2024 is the biggest global election year in history. What’s at stake for developers?
GitHub is considering what is at stake for our users and platform, how we can take responsible action to support free and fair elections, and how developers contribute to resilient democratic processes.
![](https://github.blog/wp-content/uploads/2023/10/AI-DarkMode-2.png?resize=400%2C212)
GitHub named a Leader in the Gartner first-ever Magic Quadrant for AI Code Assistants
This year, as part of its annual Magic Quadrant series, Gartner published a first-of-its-kind report analyzing the state of play in the AI Code Assistants market–and named GitHub a Leader.
![AI in software development 2024 survey results with colorful graphics and percentages.](https://github.blog/wp-content/uploads/2024/08/ai-survey-header.png?resize=400%2C212)
Survey: The AI wave continues to grow on software development teams
We surveyed 2,000 people on software development teams at enterprises in the U.S., Brazil, India, and Germany about the use, experience, and expectations around generative AI tools in software development.