An online project under the direction of the CAPE ANN MUSEUM
How to Use the Image Comparison Tool
The Image Comparison Tool (ICT) enables scholars and researchers working on the Fitz Henry Lane catalogue raisonné website to be able to compare related images to one another. With this tool, images can be analyzed to discover changes between a final painting and the sketches or preliminary works-in-progress that led up to the final painting.
With the ICT, you can:
- View up to 4 selected images side by side;
- Zoom in to examine the details of images;
- Overlay one image on top of another image;
- Share the compared images with their respective zoom and positioning with other users, without either user needing to login to the website.
The ICT enables you to place multiple images into a “workspace,” and manipulate them by enlarging, zooming, repositioning within the workspace, adjusting the transparency, or removing one or more images.
The Image Comparison Tool is accessed from a record page in the Fitz Henry Lane website.
Click the Image Comparison Tool button, and the ICT will open in a new browser window.
The high-level structure of the tool includes:
- a toolbar at the top of the screen with image controls such as zoom;
- a workspace in the center of the screen for manipulating and comparing the images (with the images from the CR record they were viewing pre-loaded); and
- My Image Library at the bottom of the screen where the supplementary and related images are stored. Additional images can be added/removed from My Image Library as well. Related and Supplementary images for the main image they are viewing are pre-loaded into My Image Library.
The ICT is comprised of two comparison modes (Side-by-Side and Overlay) and a search mode.
Side-by-side mode allows up to 4 images to be compared at one time.
To add images to a comparison, click on the top of My Image Library to open it (if closed), and click the Compare checkbox for the image(s) you want to add. As each image is added, the workspace will split to add an additional image frame.
You can zoom in and reposition each image within their own frames in the workspace. There is a grey title bar above each image which contains the title (or caption, in the case of supplementary images) as well as the controls for that image. Use the zoom in and zoom out icons to enlarge the image. You can move the image around just by clicking and dragging it within its frame.
To “lock” the images together so that they can be zoomed in and moved together, click the Lock
Images checkbox in the Toolbar above the workspace. Uncheck the lock checkbox to manipulate the images independently.
To remove an image from a comparison, click the (x) icon in the right corner of the grey title bar above the image.
Overlay mode allows you to place one image on top of another image and adjust the opacity to directly compare elements in two paintings.
To switch into Overlay mode, click the “Go to Overlay Mode” button in the Toolbar at the top of the ICT. You can only compare two images at a time in Overlay mode, so if you have more than two images in the workspace in Side-by-Side mode, remove additional images until you only have two loaded.
In Overlay mode, instead of a frame for each image in the workspace, both images are loaded into the same workspace area.
You can click directly on an image in the background to make it the top image.
You can also use the “Switch Front Image” button in the Toolbar at the top of the workspace to toggle the layering of the images.
To enlarge the image, click on the zoom in (or zoom out) icon.
To move the entire image window, click on the grey title bar and drag the window around the workspace.
Once you’ve zoomed in, you can click on the image and drag it around to reposition it within the window. You can expand the size of the window by clicking on the black border of the window and dragging it out (just like you can with any internet browser window).
The opacity of an image is how “see-thru” or transparent it is. One of the key features of this tool is that you can layer one image on top of another image, and then reduce the opacity of the top image to make it semi-transparent. This allows you to align the images into registration and compare the placement of specific elements in the paintings.
You can set the opacity of the top image in two places — when the images are unlocked, the opacity slider is in the grey title bar at the top of the image, to the left of the zoom tools.
When the images are locked, the opacity slider is in the toolbar above the workspace.
Sliding the circular “handle” on the slider to the left reduces the opacity. Sliding it to the right (the default position) increases the opacity.
My Image Library is the repository for all of your images. By default, we’ve populated the library with the supplementary and related images of the main image that you were viewing in the catalog.
You can remove, add and re-order images within My Image Library.
To remove an image, hover your cursor over the thumbnail of the image and click the red Remove button.
To re-order an image within the library, hover your cursor over the thumbnail, and click and drag anywhere on the menu. Drag and drop the image into its new position.
To add a new image to the library, refer to the next section on Search.
When you have a Related image in My Image Library for a main work, the supplementary images for that related image will not automatically be added to My Image Library. If you would like to add them, hover over the Related image. If there are supplementary images available to be added, a blue Add Supplementary Images button will be displayed in the hover menu.
Click this button to add these images.
From My Image Library, click on the Search button to enter the Search mode.
In the search box in the upper right corner of the ICT, enter your search term. A search term can be a title, caption or a keyword for the image(s) that you’re looking for. The list of potential matches to your search term will be refined as you type. Click on a match from the dropdown list or just hit Enter when you’re done typing, and your results will be displayed.
Search results are displayed with the Main work listed along with its supplementary images.
To add an image so that you can use it in a comparison, you must add it to My Image Library.
Hover over an image thumbnail in the search results, and then click the ADD button to add that image to your image library.
In My Image Library, click the Compare checkbox for any images you want to compare, and then click the Start Comparing button. You can only select up to 4 images to compare.
You can setup a comparison in either Side-by-Side mode or Overlay mode and share it with someone else.
When you have your image comparison ready, click the Share link button on the far right side of the toolbar. Your comparison layout will be saved and a unique URL link will be generated that you can copy / paste and send to someone else. When that link is clicked, the ICT will open and your comparison layout will be displayed just as you had created it.
If you share a link and then continue making changes to your comparison, those changes won’t be visible to the person accessing your link. You must create a new link every time you make changes to your comparison layout.