The “Before & After” image comparison mode allows you to show two different versions of the same image, and is typically used to show an image in post-processed vs. pre-processed states. The two images occupy the same space, and clicking or tapping on the image will cause it to transition between states.
To use, in the Color Palette control pane set Page Type as “CE3 Standard”:
In the Appearance control pane, in the Page: Staging control group set Gallery/Embed Style as “Before & After”:
Proper use of the Before & After mode requires two images, cropped identically. The images should appear in the filmstrip such that the post-processed image is first, and the pre-processed image second:
The post-processed image will appear first on the page, will be used as thumbnail for auto indexing purposes, and will contribute to SEO for the page.
The pre-processed image should have minimal contribution to page SEO, if any at all.
In my own workflow, I typically do not keep pre-processed files for processed images; I only have the processed version(s). The easiest way I find to create a pre-processed version for Before & After comparison is as follows:
Having followed these steps, your pre-processed image rendition should now be cropped identically to the processed version, but without any other adjustments made.